grid.addListener('rowcontextmenu', rightClickFn);//右键菜单代码关键部分 var rightClick=new Ext.menu.Menu({ id:'rightClickCont', //在HTML文件中必须有个rightClickCont的DIV元素 items: [{id: 'rMenu1', handler: rMenu1Fn,//点击后触发的事件 text: '右键菜单1' }, {id: 'rMenu2', handler: rMenu2Fn, text: '右键菜单2' }] });
function rightClickFn(grid,rowindex,e){ e.preventDefault(); rightClick.showAt(e.getXY()); }
function rMenu1Fn(){
Ext.MessageBox.alert('right','rightClick'); }
****Grid提供了4个与右键菜单有关的事件：
contextmenu : (Ext.EventObject e): 全局性的右键事件
cellcontextmenu:(Grid this,Number rowIndex, Number cellIndex,Ext.EventObject e): 单元格的右键事件
rowcontextmenu:(Grid this,Number rowIndex, Ext.EventObject e): 行上的右键事件 headercontextmenu:(Grid this,Number colIndex, Ext.EventObject e): 表头的右键事件
9、将GridPanel放入一个Panel或TabPanel中 var tabs = new Ext.TabPanel({ collapsible: true, renderTo: 'product-exceptions', width: 450, height:400, activeTab: 0, items:[ {title: 'Unmatched'}, {title: 'Matched'} ] });
tabs.doLayout();
var panel = new Ext.Panel({ renderTo: 'panel', title:'panel', collapsible:true,
width:450, height:400, items:[grid] //管理grid });
Panel必须有DIV存在。其包含的Component有items管理。
10、从服务器获取数据和数据翻页控件
从一个服务器文件，如ASP、JSP或Servlet中获得数据二维Array、JSON或XML数据，
也可以被Ext读取，并被Grid显示：
服务器文件data.asp: <% start = cint(request(\ limit = cint(request(\ dim json json=cstr(\ for i = start to limit + start-1 json =json + cstr(\+cstr(i) + cstr(\+ cstr(i) + cstr(\ if i <> limit + start - 1 then json =json + \ end if next json = json +\ response.write(json) %>
我们可以看到，这个页面会根据传入的start和limit的不同，返回不同的数据，其实质是个分页的代码。
下面是start=0,limit=10的JSON数据： {totalProperty:100,root:[{'id':'0','name':'name0','descn':'descn0'}, {'id':'1','name':'name1','descn':'descn1'}, {'id':'2','name':'name2','descn':'descn2'}, {'id':'3','name':'name3','descn':'descn3'}, {'id':'4','name':'name4','descn':'descn4'}, {'id':'5','name':'name5','descn':'descn5'}, {'id':'6','name':'name6','descn':'descn6'}, {'id':'7','name':'name7','descn':'descn7'}, {'id':'8','name':'name8','descn':'descn8'}, {'id':'9','name':'name9','descn':'descn9'} ]}
我们使用分页控件来控制Grid的数据： Ext.onReady(function(){ var sm=new Ext.grid.CheckboxSelectionModel(); var cm=new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), sm, {header:'编号',dataIndex:'id'}, {header:'性别',dataIndex:'sex'}, {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'} ]); cm.defaultSortable = true; var ds = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({url:'data.asp'}), reader: new Ext.data.JsonReader( {totalProperty: 'totalProperty', root: 'root' }, [{name: 'id'},{name: 'name'},{name: 'descn'}]) }); ds.load({params:{start:0,limit:10}}); var grid = new Ext.grid.GridPanel({ el: 'grid3', ds: ds, cm: cm, sm: sm, title: 'ASP->JSON', bbar: new Ext.PagingToolbar({ pageSize: 10, store: ds, displayInfo: true, displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: \没有记录\ }), tbar: new Ext.PagingToolbar({ pageSize: 10, store: ds, displayInfo: true,
条',
}) }); grid.render(); })
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} emptyMsg: \没有记录\
实例一：GridPrimary.htm
data=[{id:1,name:'EasyWeb',organization:'EasyJF',homepage:'www.easyjf.com',score:'80'}, {id:2,name:'jfox',organization:'huihoo',homepage:'www.huihoo.org',score:'75'}, {id:3,name:'jdon',organization:'jdon',homepage:'www.jdon.com',score:'70'},
{id:4,name:'springside',organization:'springside',homepage:'www.springside.org.cn',score:'85'} ]; //输出列定义 var colM=new Ext.grid.ColumnModel([ {id:'id',header:\ {header:\项目名称\ {header:\开发团队\ {header:\网址\ {header:\得分\
