EXT-Grid

Ext - Grid Grid是Ext框架中一个重要的组成部分。一般建立Grid主要实现数据的增删改查。 建立一个Grid Grid一般有三个主要的内容，ds,cm,GridPanel var ds = new Ext.data.Store(); var cm = new Ext.grid.ColumnModel(); var grid = new Ext.grid.GridPanel(); 如果要页面载入时，Grid不显示，事件触发查询并建立Grid显示。 很简单，将GridPanel建立在事件的function中就可以了。 如果载入时就显示Grid,这里分几种情况: (1)页面载入时，Grid显示，并查询和显示出数据。 (2)页面载入时，Grid显示，但不发送请求数据，事件触发查询。该查询条件已固定或不需要条件。 (3)页面载入时，Grid显示，不查询数据，事件触发查询，该查询需要从页面上存在的文本框中获得数据作为条件。 (4)与(3)相同，但是希望在Grid查询过程中有loadMask效果。 对于1）直接在Ext.onReady()中建立GridPanel，并且ds调用load方法。 对于2）在Ext.onReady()中建立GridPanel,而在事件的function中写ds.load() 对于3) 在Ext.onReady()中建立GridPanel,而此时的ds为一个假ds,它的作用仅仅是为了能够在页面载入时就显示Grid,而在事件的function中,则再建立一个带有查询条件的ds,然后用该ds重新配置Grid.grid.reconfigure(ds,cm); 对于4) 查询的要求可由grid被新的ds重新配置的方法实现，但是会发现，这样做时，Grid的loadMask效果也不会出现了。有一个方法，就是在事件的 function中，将Grid的render的div清空，即div.innerHTML="" 之后再重新建立一个Grid。这样做的缺点就是会在有很多代码重复。 可能还会出现一些其他的function的调用以及无法取得某对象的问题。 以下由第三种情况为例，来说明增删改查。 建立： var fds = new Ext.data.Store(); var cm = new Ext.grid.ColumnModel([ {header:'例子',width:100,dataIndex:'test', editor:new Ext.form.TextField({ id:'test' }) } ]); var sm = new Ext.grid.RowSelectionModel(); var grid = new Ext.grid.EditorGridPanel({ ds:fds, cm:cm, sm:sm, width:200, height:200, title:'举例', renderTo:Ext.get("testdiv") }); 这里建立EditorGridPanel，是可以进行编辑的Grid. 1 查询：(点击按钮触发事件) function btnclick() { var Record = Ext.data.Record.create([ {name:'test'} ]); //此处将record单独提出方便操作 var ds = new Ext.data.Store({ url:'访问的地址', reader:new Ext.data.XmlReader({ record:'item' },Record) }); ds.load(); grid.reconfigure(ds,cm); } 2 添加 新建一条数据 var r = new Record({ test:'随便举个例子' }); 插入到表格指定行，n为要插到这行后（此处取了表格的行数，即插入到最后），m是编辑完毕后focus的位置列数 var n = grid.getStore().getCount(); grid.stopEditing(); grid.getStore().insert(n,r); grid.startEditing(n,m); 3 删除 删除选定的行 var r = grid.getSelectionModel().getSelected(); ds.remove(r); 删除多行，也一样，用getSelections()反法取到选中的行的一个数组，然后再一一删除。 删除所有行 ds.removeAll(); 4 修改 两种方法，一种直接手动点击需要修改的单元格，EditorGridPanell中的ClicksToEdit来设置点击几下进入编辑状态。 还有一种从别处获得数据自动修改。 假设一条新的数据， var nr = ['修改后的例子']; 选定你要修改的行 var recordtoedit = grid.getSelectionModel().getSelected(); 或者var recordtoedit = ds.getAt(rowIndex); recordtoedit.set('test','修改后的例子'); 还可以在修改完毕后将修改过的行的颜色改变来标示出哪一条是修改过的。 添加事件 grid.on('afteredit',function(e){ var rowIndex = e.row; grid.getView().getRow(rowIndex).style.backgroundColor="red"; //可以增加透明度效果 grid.getView().getRow(number).style.filter = "alpha(opacity=50)"; grid.getView().getRow(number).style.MozOpacity =".5"; });