标签：proxy 年龄 lock 行号 load 行选中 ini alt page
要使用GridPanel，首先要定义Store，而在创建Store的时候必须要有Model，因此我们首先来定义Model：
//1.定义Model
Ext.define("MyApp.model.User", {
extend: "Ext.data.Model",
fields: [
{ name: ‘name‘, type: ‘string‘ },
{ name: ‘age‘, type: ‘int‘ },
{ name: ‘phone‘, type: ‘string‘ }
]
});
然后创建Store：
//2.创建store
var store = Ext.create("Ext.data.Store", {
model: "MyApp.model.User",
autoLoad: true,
pageSize: 5,
proxy: {
type: "ajax",
url: "GridHandler.ashx",
reader: {
root: "rows"
}
}
});
接下来才是GridPanel的代码：
//3.创建grid
var grid = Ext.create("Ext.grid.Panel", {
xtype: "grid",
store: store,
width: 500,
height: 200,
margin: 30,
columnLines: true,
renderTo: Ext.getBody(),
selModel: {
injectCheckbox: 0,
mode: "SIMPLE", //"SINGLE"/"SIMPLE"/"MULTI"
checkOnly: true //只能通过checkbox选择
},
selType: "checkboxmodel",
columns: [
{ text: ‘姓名‘, dataIndex: ‘name‘ },
{
text: ‘年龄‘, dataIndex: ‘age‘, xtype: ‘numbercolumn‘, format: ‘0‘,
editor: {
xtype: "numberfield",
decimalPrecision: 0,
selectOnFocus: true
}
},
{ text: ‘电话‘, dataIndex: ‘phone‘, editor: "textfield" }
],
plugins: [
Ext.create(‘Ext.grid.plugin.CellEditing‘, {
clicksToEdit: 1
})
],
listeners: {
itemdblclick: function (me, record, item, index, e, eOpts) {
//双击事件的操作
}
},
bbar: { xtype: "pagingtoolbar", store: store, displayInfo: true }
});
这个GridPanel的效果如下：
在这个GridPanel中，我们可以通过复选框勾选数据行，可以编辑“年龄”和“电话”列，还可以对数据进行客户端排序。
Extjs GridPanel的列有多种类型，例如：文本列、数字列、日期列、选择框列、操作列等。我们可以通过xtype来指定不同的列类型。
下面是列的常用配置项：
控制Extjs GridPanel行选择模型的两个配置项是selType和selModel。默认情况下，selType为rowmodel，对应的Ext.selection.Model。这种选择模型不会在grid中添加复选框，它通过点击行进行选中，默认为多选“MULTI”。
如果我们要使用复选框来选择行，我们需要使用下面的配置：
selType: "checkboxmodel",
然后，我们可以通过selModel来配置selType：
selModel: {
injectCheckbox: 0,
mode: "SIMPLE", //"SINGLE"/"SIMPLE"/"MULTI"
checkOnly: true //只能通过checkbox选择
},
除了界面操作来选中行，我们还可以通过代码来选中行：
//选择行，并保持其他行的选择状态 grid.getSelectionModel().select(records, true); //选择所有 grid.getSelectionModel().selectAll(); //根据row index选择 grid.getSelectionModel().selectRange(startRow, endRow, true)
获取选中行，仍然需要通过SelectionModel来完成：
var records = grid.getSelectionModel().getSelection();
默认情况下Extjs GridPanel是不显示行号的，我们需要手动添加行号列。
columns: [
{ xtype: "rownumberer", text: "序号", width:40 },
{ text: ‘姓名‘, dataIndex: ‘name‘ },
{
text: ‘年龄‘, dataIndex: ‘age‘, xtype: ‘numbercolumn‘, format: ‘0‘,
editor: {
xtype: "numberfield",
decimalPrecision: 0,
selectOnFocus: true
}
},
{ text: ‘电话‘, dataIndex: ‘phone‘, editor: "textfield" }
],
我们可以设置行号的列头和宽度。
Extjs GridPanel的异步加载数据是通过Store来实现的。我们之前已经介绍过Extjs Store的各种代理方式，可以参考我之前的文章：
异步加载通常采用ajax代理，例如我们代码中用到的：
//2.创建store
var store = Ext.create("Ext.data.Store", {
model: "MyApp.model.User",
autoLoad: true,
pageSize: 5,
proxy: {
type: "ajax",
url: "GridHandler.ashx",
reader: {
root: "rows"
}
}
});
服务器端返回的数据格式如下：
{
"rows": [
{
"name": "Tom",
"age": 12,
"phone": "1233455"
},
{
"name": "Jerry",
"age": 12,
"phone": "1233455"
},
{
"name": "Sinbo",
"age": 12,
"phone": "1233455"
},
{
"name": "Jack",
"age": 12,
"phone": "1233455"
},
{
"name": "Johnson ",
"age": 12,
"phone": "1233455"
}
],
"total": 5
}
当GridPanel中数据量大的时候，我们就需要使用分页了。
分页的实现由两部来完成，首先是在Store中添加pageSize配置项，用来确定每页显示多少行数据；然后需要为GridPanel添加PagingToolbar。
1. Store添加pageSize配置项
var store = Ext.create("Ext.data.Store", {
model: "MyApp.model.User",
autoLoad: true,
pageSize: 5,
proxy: {
type: "ajax",
url: "GridHandler.ashx",
reader: {
root: "rows"
}
}
});
在分页参数加上之后，Extjs在执行ajax请求的时候会添加三个参数：
2. GridPanel添加PagingToolbar
bbar: { xtype: "pagingtoolbar", store: store, displayInfo: true }
在完成这两项配置以后，GridPanel就可以使用分页了。
Extjs GridPanel可以方便的实现列编辑。要实现这个功能需要两步：
1. 添加GridPanel的编辑插件
plugins: [
Ext.create(‘Ext.grid.plugin.CellEditing‘, {
clicksToEdit: 1
})
],
2. 为需要编辑的列指定编辑器
columns: [
{ xtype: "rownumberer", text: "序号", width:40 },
{ text: ‘姓名‘, dataIndex: ‘name‘ },
{
text: ‘年龄‘, dataIndex: ‘age‘, xtype: ‘numbercolumn‘, format: ‘0‘,
editor: {
xtype: "numberfield",
decimalPrecision: 0,
selectOnFocus: true
}
},
{ text: ‘电话‘, dataIndex: ‘phone‘, editor: "textfield" }
编辑器可以是一个field的配置，也可以是一个xtype。
对于编辑后的单元格，会在左上角出现一个红色的标识，说明该数据是编辑过的，要想去掉这个红色箭头，需要调用record的commit()方法。
grid.on(‘edit‘, function (editor, e) {
// commit the changes right after editing finished
e.record.commit();
});
除了单元格编辑外，Extjs还支持行编辑功能，只需要将插件替换为RowEditing即可，此处不再进行演示。
在默认情况下，Extjs GridPanel不允许进行选中单元格中的内容，由于不能选中，我们就不可能来复制单元格中的内容。如果要实现这种功能，我们需要通过viewConfig来实现。
代码如下：
viewConfig:{
stripeRows:true,//在表格中显示斑马线
enableTextSelection:true //可以复制单元格文字
}
Extjs GridPanel的列，当我们点击列头的时候，会出现一个菜单：
如果我们要禁用这个菜单，可以将每个column定义属性menuDisabled指定为true，代码如下：
{header: ‘Idno‘, dataIndex: ‘idno‘, width:150,menuDisabled:true}
标签：proxy 年龄 lock 行号 load 行选中 ini alt page
原文地址：http://www.cnblogs.com/raorao1994/p/6188224.html
