wtl[计算机]extjs gridpanel的应用.docVIP

Grid.js页面 Espace(test.grid); /*store最少需要两个参数 1 DataProxy 用于访问一个数据连接 2 reader 主要有三个实现类Ext.data.JsonReader or XMLReader or ArrayReader * 其中JsonReader用于接受一个Json响应后（即DataProxy响应的数据）创建一个Record对象组成的数组。 * 数组内的每个对象都是EXt.Data.Record 映射的结果（即Json数据与页面显示列的对应关系 */ //1 DataProxy的生成 var proxy_url = data.jsp; //创建URL访问类 var _proxy = new Ext.data.HttpProxy({url:proxy_url}); //数据问题参数 var _jsonProperty= totalProperty; //数据根目录参数 var _jsonRoot = root; //Record显示列表对应关系 var _record = [{name:name,mapping:name}, {name:sex,mapping:sex}, {name:age,mapping:age}, {name:code,mapping:code}]; //创建JSONReader对象,需要设置记录总数，根目录名称，记录映射 var _reader = new Ext.data.JsonReader({idProperty:name,totalProperty:_jsonProperty,root:_jsonRoot},_record); /** * 封装了一个客户端的Record对象缓存。 * 为GridPanel提供数据入口 * 需要两个必须的参数 * 1 提供数据的地址；即Proxy代理类 * 2 数据的读取方式；即Reader类。这里通过JsonReader读取数据 * * 通过getAt(行号)取得某一行的数据对象。 * 行数据对象通过get(列名)取得单元格信息 */ var _store = new Ext.data.Store({ proxy:_proxy, reader:_reader }); /** ColumnModel * 数据在页面上显示标题信息， * 顺序和Record对应 * sortable 是否排序 * dataIndex 进行对应的列，对应Record中的NAME * * handler方法中 第一个参数表示父类的对象，本例中为GridPanel对象。 * 第二个参数表示第几行。 * 第三个参数表示第几列。 */ var _cm = new Ext.grid.ColumnModel([ { header : 姓名 , width : 200 , sortable : true , dataIndex : name}, { header : 性别 , width : 200}, { header : 年龄 , width : 200}, { xtype : actioncolumn, width : 50, heigth : 20, header :操作, dataIndex : sex, items : [{ icon : a.jpg, tooltip: 操作, handler: function(a,b,c,d){ var st = _store.getAt(b); alert(st.get(sex)) } }] }, { header : 编码, dataIndex : code} ]); //设置标题提醒，接收两个参数（序号，显示信息） _cm.setColumnTooltip(1,姓名信息); //var _cm = window.eval(new Ext.grid.ColumnModel([{ header : 姓名},{ header : 性别 }])); /** * 自动提供翻页控制的工具栏 */ var _pageSize = 10; var _toolbar = new Ext.PagingToolbar({ store : _store, pageSize : _pageSize, emptyMsg : 无信息, displayMsg:显示第{0}条到第{1}条记录，一共{2}条, displayInfo : true }); //可编辑的EditorGridPanel。用于编辑单元格 /** * GridPanel对象 * 数据列表页面