extjs之GridPanel表格

grid初级部分：

  需要的其他辅助类有ColumnModel（Observable的子类）、RowSeletedModel、GridView、Store、RowNumberer、CheckboxSelectiondModel

（1）、包含表头（列的宽度、是否改变大小、是否排序(sortable)、是否出现菜单，是否隐藏(hidden)，渲染(renderer)）、数据行、分页栏。

（2）、为autoExpandColumn属性的列必须id属性。

（3）、列模型的dataIndex列需要对应reader中的name属性，reader中的mapping属性对应proxy中的name属性。

（4）、在columnModel中设置列属性renderer:Ext.util.Format.dateRenderer('Y-m-d')可以控制日期的格式

（5）、行选择模型值（grid.getSelectionModel()）负责选择行的方法（第一个、最后一个、下一个、上一个、选择指定的、选择全部）和行被选择的信息（是否被选中、取消指定的选择、得到选中的条目、判断是否还有上/下条）

（6）、通过grid.getView().getRows().length可以取得总行数

（7）、通过指定Ext.grid.RowNumberer()添加序号

（8）、通过指定Ext.grid.CheckboxSelectionModel()添加复选框，在Gridpanel中添加sm:sm

（9）、视图模型（GridView）有getRows()、getRow(row)、getCell(row,col)、refresh(true：是否表头也刷新)

（10）、通过grid.getStore().getAt(i).get('name')在模型记录中获得对应的数据内容，另外在Store中定义了add(record),insert(index,records),remove()remove(index),removeAll()

（11）、   grid.getColumnModel().getColumnById('tagline').sortable = true;可以通过列模型设置列是否可排序

  同样：var colModel = grid.getColumnModel();     colModel.setHidden(column.getIndexById('tagline'), true)设置列为隐藏

（12）、enableColumnMove:false;  设置列不能拖动

（13）、从xml读取数据的准备有：在store中配置url，reader用XmlReader，XmlReader的第一个参数要用record设置数据行在xml中的根目录，最后用load()方法加载

（14）、从json读取数据和xml差不多，只用把XmlReader变为JsonReader，把record改为root，在json对象中要有一个success属性和root属性的一个对象数组

（15）、为列模型指定：Ext.grid.RowNumberer()配置学号

（16）、为列模型配置和GridPanel配置：Ext.grid.CheckboxSelectionModel()可以配备复选框

（17）、通过grid.getSelectionModel()获取选择模型，有selectFirstRow()、selectLastRow()、selectNext(keeping)、selectPrevious(keeping)、hasNext()、hasPrevious()、selectAll()、isSelected(index)、selectedRows(rows, keeping)、selectRange(start, end, keeping)、deselectRow(index)、deselectRange(start, end)、getCount()

（18）、通过grid.getView().getRows().length可以获得总行数，GirdView中常用方法有：getRows()、getRow(index)、getCell(row, col)、refresh(boolean)

（19）、grid.getStore().getAt(i).get('name')获取指定name的行，在store常用的方法有：add(records)、insert(index,records)、remove(record)、removeAll()

（20）、CellSelectionModel：一次选择一个单元格

                 RowSelectModel：一次选择一行

                ColumnSelectionModel：一次选择一列

                CheckBoxSelectionModel：使用checkbox来做行的选择

grid高级部分

一、显示摘要

grid有一个隐藏的RowBody，由GridView管理，在grid的viewConfig属性配置中,有属性forceFit(按一定比列拉伸列的宽度)、enableRowBody(启动RowBody)、showPreview(是否显示摘要)、getRowClass()设置RowBody的内容

配置如下：

viewConfig:{

forceFit:true,

enableRowBody:true,

showPreview:true,

getRowClass:function(record,rowIndex,p,store){

if(this.showPreview){

p.body = '<p style="padding:5px;border:1px #DFE8F6 solid;margin:2px"><span style="color:#15428B;font-weight:bold;">备注:</span>顶替棋不日</p>';

return 'x-grid3-row-expanded';

}

return 'x-grid3-row-collapsed';

}

},

二、分组

需要GroupingStore(Store的子类)和GroupingView(GridView)的支持，分组的依据是reader的name属性，要进行分组有以下准备：

（1）:要配置GroupingStore,

var store = new Ext.data.GroupingStore({

proxy:proxy,

reader:reader,

groupField:'Sex',

autoLoad:true,

sortInfo:{field:'Sex',direction:'DESC'}

});

（2）：在GridPanel中指定view:new Ext.grid.GroupingView()

（3）：要使得分组和摘要同时显示，必须把先前的viewConfig配置写在view的GroupingView的配置里面

三、可编辑的EditorGridPanel

（1）：EditorGridPanel的选择模型是CellSelectionModel，而且列模型要指定一个editor：new Ext.grid.GridEditor()，里面是是一些表单控件。

（2）：在EditorGridPanel比以前多autoEncode:true,clickToEdit:1

（3）：将记录设置为脏数据状态，并将修改后的记录存放在Record类型的数组modified中。当删除数据时，modified不变化，所以这些操作：删除Store，modified中指定的元素，触发remove事件，更新EditGridPanel视图

（4）：可以用CellSelectionModel模型用getSelectedCell()获取单元格信息，返回如[3,4]这的行列坐标；用hasSelection()获取是否有有选中的单元格

（5）：EditorGridPanel的验证和表单完全一样

四、paging分页

bbar:new Ext.PagingToolbar({

store:store,

pageSize:2,

displayInfo:true,

displayMsg:'本页显示第{0}条到第{1}条的记录,一共{2}条',

emptyMsg:'没有记录！',

items:['-',{

icon:'../resources/images/default/dd/drop-yes.gif',

cls:'x-btn-text-icon',

pressed:true,

text:'隐藏备注',

cls:'x-btn-text-icon details',

toggleHandler:function(btn,pressed){

var view = grid.getView();

if(pressed){

btn.setText('隐藏备注');

}else{

btn.setText('显示备注');

}

view.showPreview = pressed;

view.refresh();

}

}]

})