ExtJS - UI组件 - Grid
更新记录
2022年8月17日 发布。
2022年8月13日 从笔记迁移到博客。
ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html
转载请注明出处:https://www.cnblogs.com/cqpanda/p/16587500.html
Ext.grid.Panel（网格）
说明
Grid组件常用于显示仓库的数据。Ext.grid.Panel 继承自Ext.panel.Table。
注意：
经典工具集（Classic toolkit）中网格对应的类为：Ext.grid.Panel
现代工具集（Modern toolkit）中网格对应的类为：Ext.grid.Grid
语法：
Ext.create('Ext.grid.Panel',{
grid properties..
columns : [Columns]
});
支持的列类型
Classic toolkit工具集，在Ext.grid.column命名空间下
支持的单元格类型
Classic toolkit工具集，在Ext.grid.cell命名空间下
特性（Features）
特性用于添加Gird额外的功能
Ext.grid.feature.Feature是所有特性的基类
实例：配置列
实例：列最基本的使用
{
xtype: 'gridpanel', //grid面板
title: 'PandaTest',
width: 600,
height: 300,
frame: true, //带边框
columns: [ //定义列
{ text: '姓名', dataIndex: 'name', }, //text为显示的列名称，dataIndex为对应的数据项
{ text: '性别', dataIndex: 'sex', },
{ text: '年龄', dataIndex: 'age', },
],
store: { //定义数据仓库
data: [ //直接内联数据做测试使用
{name: 'Panda', sex: '男', age: 666 },
],
}
}
实例：设置列自动填充
使用forceFit配置项
{
xtype: 'gridpanel', //grid面板
title: 'PandaTest',
width: 600,
height: 300,
forceFit: true, //自动拉伸填充空白
frame: true, //带边框
columns: [ //定义列
{ text: '姓名', dataIndex: 'name', },
{ text: '性别', dataIndex: 'sex', },
{ text: '年龄', dataIndex: 'age', },
],
store: { //定义数据仓库
data: [ //直接内联数据做测试使用
{name: 'Panda', sex: '男', age: 666 },
],
}
}
实例：设置列隐藏
使用列的hidden配置项即可
//定义商品model
Ext.define('PandaApp.model.Product', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string'},
{ name: 'price', type: 'number' }
]
});
//创建商品store实例
var dataStore = Ext.create('Ext.data.Store', {
model: 'PandaApp.model.Product',
data: [
{
id: 666,
name: 'Panda',
price: 66.66
},
{
id: 888,
name: 'Cat',
price: 77.77
},
{
id: 999,
name: 'Dog',
price: 88.88
}
]
});
//定义Grid
Ext.define('PandaApp.com.ProductGrid', {
extend: 'Ext.grid.Panel', //继承自Grid组件
title: '商品信息', //标题
closable: true, //可关闭
draggable: true, //可拖拽
renderTo: Ext.getBody(), //渲染到body
width: 500, //设置宽度
store: dataStore, //关联Store
columns: [ //设置列
{
header: '商品编号', //设置列标题
dataIndex: 'id', //设置对应的Store数据列
flex: 0.5, //设置列的想对宽度
hidden: true, //设置列隐藏
},
{
header: '商品',
dataIndex: 'name',
flex: 1
},
{
header: '价格',
dataIndex: 'price',
flex: 1
}
]
});
//创建Grid实例
Ext.create('PandaApp.com.ProductGrid');
实例：设置列禁止排序
默认情况下，是自动开启列排序的，可以将sortable配置项设置为false禁用排序
//定义商品model
Ext.define('PandaApp.model.Product', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string'},
{ name: 'price', type: 'number' }
]
});
//创建商品store实例
var dataStore = Ext.create('Ext.data.Store', {
model: 'PandaApp.model.Product',
data: [
{
id: 666,
name: 'Panda',
price: 66.66
},
{
id: 888,
name: 'Cat',
price: 77.77
},
{
id: 999,
name: 'Dog',
price: 88.88
}
]
});
//定义Grid
Ext.define('PandaApp.com.ProductGrid', {
extend: 'Ext.grid.Panel', //继承自Grid组件
title: '商品信息', //标题
closable: true, //可关闭
draggable: true, //可拖拽
renderTo: Ext.getBody(), //渲染到body
width: 500, //设置宽度
store: dataStore, //关联Store
columns: [ //设置列
{
header: '商品编号', //设置列标题
dataIndex: 'id', //设置对应的Store数据列
flex: 0.5, //设置列的想对宽度
hidden: true, //设置列隐藏
},
{
header: '商品',
dataIndex: 'name',
flex: 1,
sortable: false, //禁用排序,重点在这里~~~~~~~~
},
{
header: '价格',
dataIndex: 'price',
flex: 1
}
]
});
//创建Grid实例
Ext.create('PandaApp.com.ProductGrid');
实例：设置远程排序
可以将组件的remoteSort配置项设置为true，开启远程排序
实例：设置列过滤
在grid中添加plugins: 'gridfilters'过滤插件
然后在列中设置过滤filter配置项
//定义商品model
Ext.define('PandaApp.model.Product', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string'},
{ name: 'price', type: 'number' }
]
});
//创建商品store实例
var dataStore = Ext.create('Ext.data.Store', {
model: 'PandaApp.model.Product',
data: [
{
id: 666,
name: 'Panda',
price: 66.66
},
{
id: 888,
name: 'Cat',
price: 77.77
},
{
id: 999,
name: 'Dog',
price: 88.88
}
]
});
//定义Grid
Ext.define('PandaApp.com.ProductGrid', {
extend: 'Ext.grid.Panel', //继承自Grid组件
title: '商品信息', //标题
closable: true, //可关闭
draggable: true, //可拖拽
plugins: 'gridfilters', //添加过滤插件
renderTo: Ext.getBody(), //渲染到body
width: 500, //设置宽度
store: dataStore, //关联Store
columns: [ //设置列
{
header: '商品编号', //设置列标题
dataIndex: 'id', //设置对应的Store数据列
flex: 0.5, //设置列的想对宽度
hidden: true, //设置列隐藏
},
{
header: '商品',
dataIndex: 'name',
flex: 1,
filter:'string', //开启过滤。设置过滤的类型
},
{
header: '商品',
dataIndex: 'name',
flex: 1,
filter: { //设置列具体过滤配置
type: 'string', //过滤的类型为string
itemDefaults: { //具体的过滤配置项
emptyText: '搜索内容' //提示文本
}
}
},
{
header: '价格',
dataIndex: 'price',
flex: 1,
renderer: function(value){ //自定义渲染
return Ext.String.format("￥{0}",value);
}
}
]
});
//创建Grid实例
Ext.create('PandaApp.com.ProductGrid');
实例：设置列自定义渲染（强调显示）
在列配置项中使用render函数即可
render函数的参数列表：
value: The value of the bound model field
metaData: Additional attributes of the cell being rendered, for example, tdCls,
tdAttr, and tdStyle
record: The record for the current row
rowIndex: The index of the current row
colIndex: The index of the current column
store: The store that is bound to the grid
view: The grid view
// 定义Model
Ext.define('StudentDataModel', {
extend: 'Ext.data.Model',
fields: [ //定义字段
{name: 'name', mapping : 'name'},
{name: 'age', mapping : 'age'},
{name: 'marks', mapping : 'marks'}
]
});
// 定义数据
var myData = [
{ name : "Asha", age : "16", marks : "90" },
{ name : "Vinit", age : "18", marks : "95" },
{ name : "Anand", age : "20", marks : "76" },
{ name : "Niharika", age : "21", marks : "86" },
{ name : "Manali", age : "22", marks : "57" }
];
// 创建数据仓库
var gridStore = Ext.create('Ext.data.Store', {
model: 'StudentDataModel', //指定Model
data: myData //指定内联数据
});
// 创建Gird
Ext.create('Ext.grid.Panel', {
id: 'gridId', //定义组件Id
store: gridStore, //指定数据仓库
stripeRows: true, //定义条纹
closable: true, //可关闭
draggable: true, //可拖拽
collapsible: true, //定义可折叠
title: '学生成绩', //Grid的面板标题
width: 600, //定义宽带
renderTo: Ext.getBody(),//渲染到body
enableColumnMove: true, //开启列可移动
enableColumnResize:true,//开启列可调整大小
columns: [ //定义列Header行
{
header: "学生姓名", //定义列标题
dataIndex: 'name', //定义列对应的数据列名
id : 'name', //设置列Id
flex: 0.5, //定义列的宽度比例
sortable: true, //设置为可排序
hideable: true //设置为可隐藏
},
{
header: "年龄",
dataIndex: 'age',
flex: .5,
sortable: true,
hideable: true,
//自定义渲染
renderer : function(value, metaData, record, rowIndex, colIndex, store,view) {
//对未成年人强调显示
if(value < 18)
{
result = '<strong>' + value + '</strong>';
}
else
{
result = value;
}
return result;
}
},
{
header: "分数",
dataIndex: 'marks',
flex: .5,
sortable: true
},
{
header: "是否优秀",
dataIndex: 'marks',
flex: .5,
sortable: true,
//自定义渲染
//设置显示条件
//设置分数对应等级
//显示为优秀、良好、普通
renderer : function (value, metadata, record, rowIndex, colIndex, store) {
if (value > 85) {
return '优秀';
} else if(value > 75){
return '良好';
} else {
return '普通';
}
}
}
]
});
实例：设置列自定义渲染（加货币符号）
//定义商品model
Ext.define('PandaApp.model.Product', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string'},
{ name: 'price', type: 'number' }
]
});
//创建商品store实例
var dataStore = Ext.create('Ext.data.Store', {
model: 'PandaApp.model.Product',
data: [
{
id: 666,
name: 'Panda',
price: 66.66
},
{
id: 888,
name: 'Cat',
price: 77.77
},
{
id: 999,
name: 'Dog',
price: 88.88
}
]
});
//定义Grid
Ext.define('PandaApp.com.ProductGrid', {
extend: 'Ext.grid.Panel', //继承自Grid组件
title: '商品信息', //标题
closable: true, //可关闭
draggable: true, //可拖拽
renderTo: Ext.getBody(), //渲染到body
width: 500, //设置宽度
store: dataStore, //关联Store
columns: [ //设置列
{
header: '商品编号', //设置列标题
dataIndex: 'id', //设置对应的Store数据列
flex: 0.5, //设置列的想对宽度
hidden: true, //设置列隐藏
},
{
header: '商品',
dataIndex: 'name',
flex: 1,
sortable: false, //禁用排序
},
{
header: '价格',
dataIndex: 'price',
flex: 1,
renderer: function(value){ //自定义渲染
return Ext.String.format("￥{0}",value);
}
}
]
});
//创建Grid实例
Ext.create('PandaApp.com.ProductGrid');
实例：配置列类型-说明
Gird的单元格类型定义在Ext.grid.column命名空间下，所有的单元格类型都继承自Ext.grid.column.Column类型。
具体的单元格类型
Ext.grid.column.RowNumberer：序号自动排序。
Ext.grid.column.Action：图标列，可以单个/多个图标，可以绑定事件。
Ext.grid.column.Boolean: 渲染布尔数据。
Ext.grid.column.Date: 渲染日期数据。
Ext.grid.column.Number: 渲染数值数据。
Ext.grid.column.Template: 渲染模板数据。
Ext.grid.column.Check：CheckBox列。
实例：配置列类型-序号列（rownumberer）
Grid的行序号列用于显示行的序号，可以自动增长编号
将列的类型设置为rownumberer类型即可
{
xtype: 'rownumberer', //定义行序号列
align: 'left' //设置对齐方式，支持left、right、center
},
实例代码：
// 定义Model
Ext.define('StudentDataModel', {
extend: 'Ext.data.Model',
fields: [ //定义字段
{name: 'name', mapping : 'name'},
{name: 'age', mapping : 'age'},
{name: 'marks', mapping : 'marks'}
]
});
// 创建数据仓库
var gridStore = Ext.create('Ext.data.Store', {
model: 'StudentDataModel', //指定Model
data: [ //指定内联数据
{ name : "Asha", age : "16", marks : "90" },
{ name : "Vinit", age : "18", marks : "95" },
{ name : "Anand", age : "20", marks : "76" },
{ name : "Niharika", age : "21", marks : "86" },
{ name : "Manali", age : "22", marks : "57" }
]
});
// 创建Gird
Ext.create('Ext.grid.Panel', {
id: 'gridId', //定义组件Id
store: gridStore, //指定数据仓库
stripeRows: true, //定义条纹
closable: true, //可关闭
draggable: true, //可拖拽
collapsible: true, //定义可折叠
title: '学生成绩', //Grid的面板标题
width: 600, //定义宽带
renderTo: Ext.getBody(),//渲染到body
enableColumnMove: true, //开启列可移动
enableColumnResize:true,//开启列可调整大小
columns: [ //定义列
{ //定义行序号列
xtype: 'rownumberer'
},
{
header: "学生姓名", //定义列标题
dataIndex: 'name', //定义列对应的数据列名
id : 'name', //设置列Id
flex: 0.5, //定义列的宽度比例
sortable: true, //设置为可排序
hideable: true //设置为可隐藏
},
{
header: "年龄",
dataIndex: 'age',
flex: .5,
sortable: true,
hideable: false
},
{
header: "分数",
dataIndex: 'marks',
flex: .5,
sortable: true
}
]
});
实例：配置列类型-模板列（templatecolumn）
使用模板列可以实现对列的自定义格式化显示
设置列的类型为模板列
xtype: 'templatecolumn', //设置列类型为模板列
配置列的tel配置项即可配置具体模板
tpl: "{marks}分", //配置模板
代码：
//创建数据仓库
var dataStore = Ext.create('Ext.data.Store', {
flelds: [
"id","name","score"
],
data: [
{
id: 666,
name: 'panda',
score: 99
},
{
id: 222,
name: 'dog',
score: 86
},
{
id: 111,
name: 'cat',
score: 76
},
]
});
//创建Gird
Ext.create('Ext.grid.Panel', {
id: 'girdId666',
renderTo: Ext.getBody(),
store: dataStore,
width: 600,
closable: true,
columns: [
{
header: '编号',
dataIndex: 'id',
sortable: true,
flex: 0.5
},
{
header: '姓名',
dataIndex: 'name',
sortable: true,
flex: 1
},
{
xtype: 'templatecolumn', //设置为模板列
header: '分数',
dataIndex: 'score',
sortable: true,
flex: 1,
tpl: "<span style='color:red;'>{score}分</span>"
}
]
});
实例：配置列类型-数值列（numbercolumn）
设置列的类型为数值列
xtype: 'numbercolumn', //设置列类型为数值列
配置列的format配置项即可
format: '0.00', //显示的格式 0.00
代码：
// 定义Model
Ext.define('StudentDataModel', {
extend: 'Ext.data.Model',
fields: [ //定义字段
{ name: 'name', type: 'string'},
{ name: 'age', type : 'int'},
{ name: 'marks', type : 'number'},
{ name: 'createDate', type: 'date' }
]
});
// 创建数据仓库
var gridStore = Ext.create('Ext.data.Store', {
model: 'StudentDataModel', //指定Model
data: [ //指定内联数据
{ name : "Asha", age : "16", marks : "90", createDate: '2020/11/02' },
{ name : "Vinit", age : "18", marks : "95", createDate: '2020/11/02' },
{ name : "Anand", age : "20", marks : "76", createDate: '2020/11/02' },
{ name : "Niharika", age : "21", marks : "86", createDate: '2020/11/02' },
{ name : "Manali", age : "22", marks : "57", createDate: '2020/11/02' }
]
});
// 创建Gird
Ext.create('Ext.grid.Panel', {
id: 'gridId', //定义组件Id
store: gridStore, //指定数据仓库
stripeRows: true, //定义条纹
closable: true, //可关闭
draggable: true, //可拖拽
collapsible: true, //定义可折叠
title: '学生成绩', //Grid的面板标题
width: 600, //定义宽带
renderTo: Ext.getBody(),//渲染到body
enableColumnMove: true, //开启列可移动
enableColumnResize:true,//开启列可调整大小
columns: [ //定义列
{ //定义行序号列
xtype: 'rownumberer'
},
{
header: "学生姓名", //定义列标题
dataIndex: 'name', //定义列对应的数据列名
id : 'name', //设置列Id
flex: 0.5, //定义列的宽度比例
sortable: true, //设置为可排序
hideable: true //设置为可隐藏
},
{
header: "年龄",
dataIndex: 'age',
flex: .5,
sortable: true,
hideable: false
},
{
header: "分数",
xtype: 'numbercolumn', //设置列类型为数值列
format: '0.00', //显示的格式 0.00
dataIndex: 'marks',
flex: .5,
sortable: true
},
{
header: "添加日期",
xtype: 'datecolumn', //设置列类型为日期列
format: 'Y年m月d日', //设置日期格式
dataIndex: 'createDate',
flex: .5,
sortable: true
}
]
});
实例：配置列类型-日期列（datecolumn）
设置列的类型为数值列
xtype: 'datecolumn', //设置列类型为日期列
配置列的format配置项即可
format: 'Y年m月d日', //显示的格式 2021年11月22日
代码：
// 定义Model
Ext.define('StudentDataModel', {
extend: 'Ext.data.Model',
fields: [ //定义字段
{ name: 'name', type: 'string'},
{ name: 'age', type : 'int'},
{ name: 'marks', type : 'number'},
{ name: 'createDate', type: 'date' }
]
});
// 创建数据仓库
var gridStore = Ext.create('Ext.data.Store', {
model: 'StudentDataModel', //指定Model
data: [ //指定内联数据
{ name : "Asha", age : "16", marks : "90", createDate: '2020/11/02' },
{ name : "Vinit", age : "18", marks : "95", createDate: '2020/11/02' },
{ name : "Anand", age : "20", marks : "76", createDate: '2020/11/02' },
{ name : "Niharika", age : "21", marks : "86", createDate: '2020/11/02' },
{ name : "Manali", age : "22", marks : "57", createDate: '2020/11/02' }
]
});
// 创建Gird
Ext.create('Ext.grid.Panel', {
id: 'gridId', //定义组件Id
store: gridStore, //指定数据仓库
stripeRows: true, //定义条纹
closable: true, //可关闭
draggable: true, //可拖拽
collapsible: true, //定义可折叠
title: '学生成绩', //Grid的面板标题
width: 600, //定义宽带
renderTo: Ext.getBody(),//渲染到body
enableColumnMove: true, //开启列可移动
enableColumnResize:true,//开启列可调整大小
columns: [ //定义列
{ //定义行序号列
xtype: 'rownumberer'
},
{
header: "学生姓名", //定义列标题
dataIndex: 'name', //定义列对应的数据列名
id : 'name', //设置列Id
flex: 0.5, //定义列的宽度比例
sortable: true, //设置为可排序
hideable: true //设置为可隐藏
},
{
header: "年龄",
dataIndex: 'age',
flex: .5,
sortable: true,
hideable: false
},
{
header: "分数",
xtype: 'numbercolumn', //设置列类型为数值列
format: '0.00', //显示的格式 0.00
dataIndex: 'marks',
flex: .5,
sortable: true
},
{
header: "添加日期",
xtype: 'datecolumn', //设置列类型为日期列
format: 'Y年m月d日', //设置日期格式
dataIndex: 'createDate',
flex: .5,
sortable: true
}
]
});
自定义渲染
Column renderers
{
xtype: 'datecolumn',
dataIndex: 'clientSince',
text: 'Client Since',
format: 'M-d-Y H:i',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view ){
// Our code here....
}}
}
实例：配置列类型-布尔列（booleancolumn）
设置列的xtype
xtype: 'booleancolumn', //设置列类型为布尔列
设置配置项
falseText: '未检查', //false显示的文本
trueText: '已检查', //true显示的文本
代码：
// 定义Model
Ext.define('StudentDataModel', {
extend: 'Ext.data.Model',
fields: [ //定义字段
{ name: 'name', type: 'string'},
{ name: 'age', type : 'int'},
{ name: 'marks', type : 'number'},
{ name: 'isCheck', type: 'bool' },
]
});
// 创建数据仓库
var gridStore = Ext.create('Ext.data.Store', {
model: 'StudentDataModel', //指定Model
data: [ //指定内联数据
{ name : "Asha", age : "16", marks : "90", isCheck: true },
{ name : "Vinit", age : "18", marks : "95", isCheck: false },
{ name : "Anand", age : "20", marks : "76", isCheck: true },
{ name : "Niharika", age : "21", marks : "86", isCheck: false },
{ name : "Manali", age : "22", marks : "57", isCheck: true }
]
});
// 创建Gird
Ext.create('Ext.grid.Panel', {
id: 'gridId', //定义组件Id
store: gridStore, //指定数据仓库
stripeRows: true, //定义条纹
closable: true, //可关闭
draggable: true, //可拖拽
collapsible: true, //定义可折叠
title: '学生成绩', //Grid的面板标题
width: 600, //定义宽带
renderTo: Ext.getBody(),//渲染到body
enableColumnMove: true, //开启列可移动
enableColumnResize:true,//开启列可调整大小
columns: [ //定义列
{ //定义行序号列
xtype: 'rownumberer'
},
{
header: "学生姓名", //定义列标题
dataIndex: 'name', //定义列对应的数据列名
id : 'name', //设置列Id
flex: 0.5, //定义列的宽度比例
sortable: true, //设置为可排序
hideable: true //设置为可隐藏
},
{
header: "年龄",
dataIndex: 'age',
flex: .5,
sortable: true,
hideable: false
},
{
header: "分数",
xtype: 'numbercolumn', //设置列类型为数值列
format: '0.00', //显示的格式 0.00
dataIndex: 'marks',
flex: .5,
sortable: true
},
{
header: "是否检查",
xtype: 'booleancolumn', //设置列类型为布尔列
falseText: '未检查', //false显示的文本
trueText: '已检查', //true显示的文本
dataIndex: 'isCheck',
flex: .5,
sortable: true
}
]
});
实例：配置列类型-check列（checkcolumn）
设置列xtype
xtype: 'checkcolumn', //设置列类型为check列
代码：
// 定义Model
Ext.define('StudentDataModel', {
extend: 'Ext.data.Model',
fields: [ //定义字段
{ name: 'name', type: 'string'},
{ name: 'age', type : 'int'},
{ name: 'marks', type : 'number'},
{ name: 'isCheck', type: 'bool' },
]
});
// 创建数据仓库
var gridStore = Ext.create('Ext.data.Store', {
model: 'StudentDataModel', //指定Model
data: [ //指定内联数据
{ name : "Asha", age : "16", marks : "90", isCheck: true },
{ name : "Vinit", age : "18", marks : "95", isCheck: false },
{ name : "Anand", age : "20", marks : "76", isCheck: true },
{ name : "Niharika", age : "21", marks : "86", isCheck: false },
{ name : "Manali", age : "22", marks : "57", isCheck: true }
]
});
// 创建Gird
Ext.create('Ext.grid.Panel', {
id: 'gridId', //定义组件Id
store: gridStore, //指定数据仓库
stripeRows: true, //定义条纹
closable: true, //可关闭
draggable: true, //可拖拽
collapsible: true, //定义可折叠
title: '学生成绩', //Grid的面板标题
width: 600, //定义宽带
renderTo: Ext.getBody(),//渲染到body
enableColumnMove: true, //开启列可移动
enableColumnResize:true,//开启列可调整大小
columns: [ //定义列
{ //定义行序号列
xtype: 'rownumberer'
},
{
header: "学生姓名", //定义列标题
dataIndex: 'name', //定义列对应的数据列名
id : 'name', //设置列Id
flex: 0.5, //定义列的宽度比例
sortable: true, //设置为可排序
hideable: true //设置为可隐藏
},
{
header: "年龄",
dataIndex: 'age',
flex: .5,
sortable: true,
hideable: false
},
{
header: "分数",
xtype: 'numbercolumn', //设置列类型为数值列
format: '0.00', //显示的格式 0.00
dataIndex: 'marks',
flex: .5,
sortable: true
},
{
header: "是否检查",
xtype: 'checkcolumn', //设置列类型为check列
dataIndex: 'isCheck',
flex: .5,
sortable: true
}
]
});
实例：配置列类型-动作列（actioncolumn）
设置列类型
xtype: 'actioncolumn', //设置列类型为action列
设置具体的按钮子项
items: [{
iconCls: 'x-fa fa-cog',
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
console.log('Config');
}
},{
iconCls: 'x-fa fa-cog',
tooltip: 'Delete',
handler: function(grid, rowIndex, colIndex) {
console.log('Delete');
}
}]
代码：
// 定义Model
Ext.define('StudentDataModel', {
extend: 'Ext.data.Model',
fields: [ //定义字段
{ name: 'name', type: 'string'},
{ name: 'age', type : 'int'},
{ name: 'marks', type : 'number'},
{ name: 'isCheck', type: 'bool' },
]
});
// 创建数据仓库
var gridStore = Ext.create('Ext.data.Store', {
model: 'StudentDataModel', //指定Model
data: [ //指定内联数据
{ name : "Asha", age : "16", marks : "90", isCheck: true },
{ name : "Vinit", age : "18", marks : "95", isCheck: false },
{ name : "Anand", age : "20", marks : "76", isCheck: true },
{ name : "Niharika", age : "21", marks : "86", isCheck: false },
{ name : "Manali", age : "22", marks : "57", isCheck: true }
]
});
// 创建Gird
Ext.create('Ext.grid.Panel', {
id: 'gridId', //定义组件Id
store: gridStore, //指定数据仓库
stripeRows: true, //定义条纹
closable: true, //可关闭
draggable: true, //可拖拽
collapsible: true, //定义可折叠
title: '学生成绩', //Grid的面板标题
width: 600, //定义宽带
renderTo: Ext.getBody(),//渲染到body
enableColumnMove: true, //开启列可移动
enableColumnResize:true,//开启列可调整大小
columns: [ //定义列
{ //定义行序号列
xtype: 'rownumberer'
},
{
header: "学生姓名", //定义列标题
dataIndex: 'name', //定义列对应的数据列名
id : 'name', //设置列Id
flex: 0.5, //定义列的宽度比例
sortable: true, //设置为可排序
hideable: true //设置为可隐藏
},
{
header: "年龄",
dataIndex: 'age',
flex: .5,
sortable: true,
hideable: false
},
{
header: "分数",
xtype: 'numbercolumn', //设置列类型为数值列
format: '0.00', //显示的格式 0.00
dataIndex: 'marks',
flex: .5,
sortable: true
},
{
header: "操作",
xtype: 'actioncolumn', //设置列类型为action列
flex: .5,
items: [{
iconCls: 'x-fa fa-cog',
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
console.log('Config');
}
},{
iconCls: 'x-fa fa-cog',
tooltip: 'Delete',
handler: function(grid, rowIndex, colIndex) {
console.log('Delete');
}
}]
}
]
});
实例：配置组件列
支持的组件列类型
Progress Bar (Ext.ProgressBarWidget or progressbarwidget)
Slider (Ext.slider.Widget or sliderwidget)
Sparklines (Ext.sparkline.*):
Line (sparklineline)
Bar (sparklinebar)
Discrete (sparklinediscrete)
Bullet (sparklinebullet)
Pie (sparklinepie)
Box (sparklinebox)
TriState (sparklinetristate)
实例：组件列-按钮
列除了可以显示文本，还可以放置组件
将列配置为组件列即可
{
xtype : 'widgetcolumn',
flex: .5,
header : 'Action',
widget: {
xtype : 'button',
text : 'Details'
}
}
实例：
// 定义Model
Ext.define('StudentDataModel', {
extend: 'Ext.data.Model',
fields: [ //定义字段
{name: 'name', mapping : 'name'},
{name: 'age', mapping : 'age'},
{name: 'marks', mapping : 'marks'}
]
});
// 定义数据
var myData = [
{ name : "Asha", age : "16", marks : "90" },
{ name : "Vinit", age : "18", marks : "95" },
{ name : "Anand", age : "20", marks : "76" },
{ name : "Niharika", age : "21", marks : "86" },
{ name : "Manali", age : "22", marks : "57" }
];
// 创建数据仓库
var gridStore = Ext.create('Ext.data.Store', {
model: 'StudentDataModel', //指定Model
data: myData //指定内联数据
});
// 创建Gird
Ext.create('Ext.grid.Panel', {
id: 'gridId', //定义组件Id
store: gridStore, //指定数据仓库
stripeRows: true, //定义条纹
closable: true, //可关闭
draggable: true, //可拖拽
collapsible: true, //定义可折叠
title: '学生成绩', //Grid的面板标题
width: 700, //定义宽带
renderTo: Ext.getBody(),//渲染到body
enableColumnMove: true, //开启列可移动
enableColumnResize:true,//开启列可调整大小
columns: [ //定义列Header行
{
header: "学生姓名", //定义列标题
dataIndex: 'name', //定义列对应的数据列名
id : 'name', //设置列Id
flex: 0.5, //定义列的宽度比例
sortable: true, //设置为可排序
hideable: true //设置为可隐藏
},
{
header: "年龄",
dataIndex: 'age',
flex: .5,
sortable: true,
hideable: true,
//自定义渲染
renderer : function(value, metaData, record, rowIndex, colIndex, store,view) {
//对未成年人强调显示
if(value < 18)
{
result = '<strong>' + value + '</strong>';
}
else
{
result = value;
}
return result;
}
},
{
header: "分数",
dataIndex: 'marks',
flex: .5,
sortable: true
},
{
header: "是否优秀",
dataIndex: 'marks',
flex: .5,
sortable: true,
//自定义渲染
//设置显示条件
//设置分数对应等级
//显示为优秀、良好、普通
renderer : function (value, metadata, record, rowIndex, colIndex, store) {
if (value > 85) {
return '优秀';
} else if(value > 75){
return '良好';
} else {
return '普通';
}
}
},
{
xtype : 'widgetcolumn',
flex: .5,
header : '详细信息',
widget: {
xtype : 'button',
text : '点击查看',
listeners: {
click: function(btn){
var rec = btn.getWidgetRecord();
console.log('Widget Button clicked! - ', rec.get('Name'));
}
}
}
}
]
});
实例：组件列-折线图图形
代码：
// 定义Model
Ext.define('StudentDataModel', {
extend: 'Ext.data.Model',
fields: [ //定义字段
{name: 'name', mapping : 'name'},
{name: 'age', mapping : 'age'},
{name: 'marks', mapping : 'marks'},
{name: 'line',type: 'auto', defaultValue: [4, 9, 12, 66, 9] }
]
});
// 创建数据仓库
var gridStore = Ext.create('Ext.data.Store', {
model: 'StudentDataModel', //指定Model
data: [ //指定内联数据
{ name : "Asha", age : "16", marks : "90" ,line: [4, 1, 12, 66, 9] },
{ name : "Vinit", age : "18", marks : "95" ,line: [4, 9, 32, 66, 9] },
{ name : "Anand", age : "20", marks : "76" ,line: [4, 9, 12, 56, 9] },
{ name : "Niharika", age : "21", marks : "86" ,line: [4, 9, 12, 46, 99] },
{ name : "Manali", age : "22", marks : "57" ,line: [4, 9, 11, 66, 79] }
]
});
// 创建Gird
Ext.create('Ext.grid.Panel', {
id: 'gridId', //定义组件Id
store: gridStore, //指定数据仓库
stripeRows: true, //定义条纹
closable: true, //可关闭
draggable: true, //可拖拽
collapsible: true, //定义可折叠
title: '学生成绩', //Grid的面板标题
width: 700, //定义宽带
renderTo: Ext.getBody(),//渲染到body
enableColumnMove: true, //开启列可移动
enableColumnResize:true,//开启列可调整大小
columns: [ //定义列Header行
{
header: "学生姓名", //定义列标题
dataIndex: 'name', //定义列对应的数据列名
id : 'name', //设置列Id
flex: 0.5, //定义列的宽度比例
sortable: true, //设置为可排序
hideable: true //设置为可隐藏
},
{
header: "年龄",
dataIndex: 'age',
flex: .5,
sortable: true,
hideable: true,
},
{
header: "分数",
dataIndex: 'marks',
flex: .5,
sortable: true
},
{
xtype : 'widgetcolumn', //配置为组件列
flex: .5,
header : '详细信息',
dataIndex: 'line',
widget: {
xtype: 'sparklineline' //设置为折线图
}
}
]
});
实例：组件列-进度条
代码：
// 定义Model
Ext.define('StudentDataModel', {
extend: 'Ext.data.Model',
fields: [ //定义字段
{ name: 'name', type: 'string'},
{ name: 'age', type : 'int'},
{ name: 'marks', type : 'number'},
{ name: 'isCheck', type: 'bool' },
{ name: 'progressData', type: 'number' },
]
});
// 创建数据仓库
var gridStore = Ext.create('Ext.data.Store', {
model: 'StudentDataModel', //指定Model
data: [ //指定内联数据
{ name : "Asha", age : "16", marks : "90", progressData: 0.15 },
{ name : "Vinit", age : "18", marks : "95", progressData: 0.8 },
{ name : "Anand", age : "20", marks : "76", progressData: 0.6 },
{ name : "Niharika", age : "21", marks : "86", progressData: 0.5 },
{ name : "Manali", age : "22", marks : "57", progressData: 0.4 }
]
});
// 创建Gird
Ext.create('Ext.grid.Panel', {
id: 'gridId', //定义组件Id
store: gridStore, //指定数据仓库
stripeRows: true, //定义条纹
closable: true, //可关闭
draggable: true, //可拖拽
collapsible: true, //定义可折叠
title: '学生成绩', //Grid的面板标题
width: 600, //定义宽带
renderTo: Ext.getBody(),//渲染到body
enableColumnMove: true, //开启列可移动
enableColumnResize:true,//开启列可调整大小
columns: [ //定义列
{ //定义行序号列
xtype: 'rownumberer',
align: 'left'
},
{
header: "学生姓名", //定义列标题
dataIndex: 'name', //定义列对应的数据列名
id : 'name', //设置列Id
flex: 0.5, //定义列的宽度比例
sortable: true, //设置为可排序
hideable: true //设置为可隐藏
},
{
header: "年龄",
dataIndex: 'age',
flex: .5,
sortable: true,
hideable: false
},
{
header: "分数",
xtype: 'numbercolumn', //设置列类型为数值列
format: '0.00', //显示的格式 0.00
dataIndex: 'marks',
flex: .5,
sortable: true
},
{
header: "个人进度",
xtype: 'widgetcolumn', //定义组件列
dataIndex: 'progressData',
sortable: true,
widget: {
xtype: 'progressbarwidget', //设置为进度条类型
textTpl: [' <div style="font-size:0.9em;">{percent:number("0")}%</div> ' ]
}
}
]
});
实例：组件列-滑动条
代码：
// 定义Model
Ext.define('StudentDataModel', {
extend: 'Ext.data.Model',
fields: [ //定义字段
{ name: 'name', type: 'string'},
{ name: 'age', type : 'int'},
{ name: 'marks', type : 'number'},
{ name: 'isCheck', type: 'bool' },
{ name: 'progressData', type: 'number' },
]
});
// 创建数据仓库
var gridStore = Ext.create('Ext.data.Store', {
model: 'StudentDataModel', //指定Model
data: [ //指定内联数据
{ name : "Asha", age : "16", marks : "90", progressData: 0.15 },
{ name : "Vinit", age : "18", marks : "95", progressData: 0.8 },
{ name : "Anand", age : "20", marks : "76", progressData: 0.6 },
{ name : "Niharika", age : "21", marks : "86", progressData: 0.5 },
{ name : "Manali", age : "22", marks : "57", progressData: 0.4 }
]
});
// 创建Gird
Ext.create('Ext.grid.Panel', {
id: 'gridId', //定义组件Id
store: gridStore, //指定数据仓库
stripeRows: true, //定义条纹
closable: true, //可关闭
draggable: true, //可拖拽
collapsible: true, //定义可折叠
title: '学生成绩', //Grid的面板标题
width: 600, //定义宽带
renderTo: Ext.getBody(),//渲染到body
enableColumnMove: true, //开启列可移动
enableColumnResize:true,//开启列可调整大小
columns: [ //定义列
{ //定义行序号列
xtype: 'rownumberer',
align: 'left'
},
{
header: "学生姓名", //定义列标题
dataIndex: 'name', //定义列对应的数据列名
id : 'name', //设置列Id
flex: 0.5, //定义列的宽度比例
sortable: true, //设置为可排序
hideable: true //设置为可隐藏
},
{
header: "年龄",
dataIndex: 'age',
flex: .5,
sortable: true,
hideable: false
},
{
header: "分数",
xtype: 'numbercolumn', //设置列类型为数值列
format: '0.00', //显示的格式 0.00
dataIndex: 'marks',
flex: .5,
sortable: true
},
{
header: "个人进度",
xtype: 'widgetcolumn', //配置为组件列
text: '滑动条',
flex: .5,
dataIndex: 'progressData',
widget: {
xtype: 'sliderwidget', //配置滑动条
minValue: 0, //设置下限
maxValue: 1, //设置上限
decimalPrecision: 2, //设置精度范围
listeners: {
change: function(slider, value) {
if (slider.getWidgetRecord)
{
var rec = slider.getWidgetRecord();
if (rec)
{
rec.set('progress', value);
}
}
}
}
}
}
]
});
实例：组件列-饼图
代码：
// 定义Model
Ext.define('StudentDataModel', {
extend: 'Ext.data.Model',
fields: [ //定义字段
{name: 'name', mapping : 'name'},
{name: 'age', mapping : 'age'},
{name: 'marks', mapping : 'marks'},
{name: 'line',type: 'auto', defaultValue: [4, 9, 12, 66, 9] }
]
});
// 创建数据仓库
var gridStore = Ext.create('Ext.data.Store', {
model: 'StudentDataModel', //指定Model
data: [ //指定内联数据
{ name : "Asha", age : "16", marks : "90" ,line: [4, 1, 12, 66, 9] },
{ name : "Vinit", age : "18", marks : "95" ,line: [4, 9, 32, 66, 9] },
{ name : "Anand", age : "20", marks : "76" ,line: [4, 9, 12, 56, 9] },
{ name : "Niharika", age : "21", marks : "86" ,line: [4, 9, 12, 46, 99] },
{ name : "Manali", age : "22", marks : "57" ,line: [4, 9, 11, 66, 79] }
]
});
// 创建Gird
Ext.create('Ext.grid.Panel', {
id: 'gridId', //定义组件Id
store: gridStore, //指定数据仓库
stripeRows: true, //定义条纹
closable: true, //可关闭
draggable: true, //可拖拽
collapsible: true, //定义可折叠
title: '学生成绩', //Grid的面板标题
width: 700, //定义宽带
renderTo: Ext.getBody(),//渲染到body
enableColumnMove: true, //开启列可移动
enableColumnResize:true,//开启列可调整大小
columns: [ //定义列Header行
{
header: "学生姓名", //定义列标题
dataIndex: 'name', //定义列对应的数据列名
id : 'name', //设置列Id
flex: 0.5, //定义列的宽度比例
sortable: true, //设置为可排序
hideable: true //设置为可隐藏
},
{
header: "年龄",
dataIndex: 'age',
flex: .5,
sortable: true,
hideable: true,
},
{
header: "分数",
dataIndex: 'marks',
flex: .5,
sortable: true
},
{
xtype : 'widgetcolumn', //配置为组件列
flex: .5,
header : '详细信息',
dataIndex: 'line',
widget: {
xtype: 'sparklinepie' //设置为饼图
}
}
]
});
实例：组件列-
代码：
实例：组件列-
代码：
实例：组件列-
代码：
实例：组件列-
代码：
实例：配置单元格/行
实例：配置单元格可以编辑
单元格编辑需要使用插件才可以完成
添加插件：Ext.grid.plugin.CellEditing
plugins: 'cellediting', //添加单元格编辑插件
//还可以自己定义Ext.grid.plugin.CellEditing类型的实例
plugins:[
Ext.create ("Ext.grid.plugin.CellEditing", {
clicksToEdit:1 //设置为点一下就进入编辑
}
]
然后在列上进行配置 editor 配置项
editor: { //可编辑配置
allowBlank: false, //不允许为空
type: 'string' //设置数据类型
}
可以配置各种Form Filed类型，但除HtmEditor外。
editor: new Ext.form.field.ComboBox({ //配置可编辑
typeAhead: true,
triggerAction: 'all',
store: [
['Bath','Bath'],
['Kitchen','Kitchen'],
['Electronic','Electronic'],
['Food', 'Food'],
['Computer', 'Computer']
]
})
代码实例：
//定义商品model
Ext.define('PandaApp.model.Product', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string'},
{ name: 'price', type: 'number' }
]
});
//创建商品store实例
var dataStore = Ext.create('Ext.data.Store', {
model: 'PandaApp.model.Product',
proxy: {
url: '/product.json', //请求的URL
type: 'ajax', //请求的类型
pageSize: 35, //分页的每页数据条数
reader: {
type: 'json', //读取器类型
rootProperty: 'data', //后端数据根节点名称
totalProperty: 'total', //后端数据总条数对应节点名称
}
}
});
//定义Grid
Ext.define('PandaApp.com.ProductGrid', {
extend: 'Ext.grid.Panel', //继承自Grid组件
title: '商品信息', //标题
closable: true, //可关闭
draggable: true, //可拖拽
plugins: 'cellediting', //添加单元格编辑插件
renderTo: Ext.getBody(), //渲染到body
width: 800, //设置宽度
height: 300,
store: dataStore, //关联Store
dockedItems: [ //添加停靠栏
{
xtype: 'pagingtoolbar', //添加分页组件
store: dataStore, //对应的Store
dock: 'bottom', //停靠在底部
displayInfo: true //显示提示信息
}
],
columns: [ //设置列
{
header: '商品编号', //设置列标题
dataIndex: 'id', //设置对应的Store数据列
flex: 0.5, //设置列的想对宽度
hidden: true, //设置列隐藏
},
{
header: '商品',
dataIndex: 'name',
flex: 1,
editor: { //可编辑配置
allowBlank: false, //不允许为空
type: 'string' //设置数据类型
}
},
{
header: '商品类别',
dataIndex: 'productType',
flex: 1,
editor: new Ext.form.field.ComboBox({ //配置可编辑
typeAhead: true,
triggerAction: 'all',
store: [
['Bath','Bath'],
['Kitchen','Kitchen'],
['Electronic','Electronic'],
['Food', 'Food'],
['Computer', 'Computer']
]
})
},
{
header: '价格',
dataIndex: 'price',
flex: 1,
renderer: function(value){ //自定义渲染
return Ext.String.format("￥{0}",value);
}
}
]
});
//创建Grid实例
Ext.create('PandaApp.com.ProductGrid');
实例：配置行可编辑
配置行可编辑需要使用Ext.grid.plugin.RowEditing插件
plugins: ['rowediting'], //添加行编辑插件
在列上设置可编辑的类型即可
editor: { //可编辑配置
allowBlank: false, //不允许为空
type: 'string' //设置数据类型
}
代码：
//定义商品model
Ext.define('PandaApp.model.Product', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string'},
{ name: 'price', type: 'number' }
]
});
//创建商品store实例
var dataStore = Ext.create('Ext.data.Store', {
model: 'PandaApp.model.Product',
proxy: {
url: '/product.json', //请求的URL
type: 'ajax', //请求的类型
pageSize: 35, //分页的每页数据条数
reader: {
type: 'json', //读取器类型
rootProperty: 'data', //后端数据根节点名称
totalProperty: 'total', //后端数据总条数对应节点名称
}
}
});
//定义Grid
Ext.define('PandaApp.com.ProductGrid', {
extend: 'Ext.grid.Panel', //继承自Grid组件
title: '商品信息', //标题
closable: true, //可关闭
draggable: true, //可拖拽
plugins: ['rowediting','cellediting'], //添加行/单元格编辑插件
renderTo: Ext.getBody(), //渲染到body
width: 800, //设置宽度
height: 300,
store: dataStore, //关联Store
dockedItems: [ //添加停靠栏
{
xtype: 'pagingtoolbar', //添加分页组件
store: dataStore, //对应的Store
dock: 'bottom', //停靠在底部
displayInfo: true //显示提示信息
}
],
columns: [ //设置列
{
header: '商品编号', //设置列标题
dataIndex: 'id', //设置对应的Store数据列
flex: 0.5, //设置列的想对宽度
hidden: true, //设置列隐藏
},
{
header: '商品',
dataIndex: 'name',
flex: 1,
editor: { //可编辑配置
allowBlank: false, //不允许为空
type: 'string' //设置数据类型
}
},
{
header: '商品类别',
dataIndex: 'productType',
flex: 1,
editor: new Ext.form.field.ComboBox({ //配置可编辑
typeAhead: true,
triggerAction: 'all',
store: [
['Bath','Bath'],
['Kitchen','Kitchen'],
['Electronic','Electronic'],
['Food', 'Food'],
['Computer', 'Computer']
]
})
},
{
header: '价格',
dataIndex: 'price',
flex: 1,
renderer: function(value){ //自定义渲染
return Ext.String.format("￥{0}",value);
},
editor: { //可编辑配置
allowBlank: false, //不允许为空
type: 'string' //设置数据类型
}
}
]
});
//创建Grid实例
Ext.create('PandaApp.com.ProductGrid');
实例：配置列分组
使用Ext.grid.feature.Grouping特性实现
在Grid对应的Store中设置分组使用的字段
groupField: 'name' //指定分组使用的字段
在Grid中添加特性
features: [ //添加特性
{
id: 'group', //组Id
ftype: 'grouping', //开启分组
groupHeaderTpl : '{name}', //组标题模板
hideGroupedHeader: true, //是否显示组名称
enableGroupingMenu: true, //
startCollapsed: false //开启的时候默认折叠
}
],
代码：
//定义商品model
Ext.define('PandaApp.model.Product', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string'},
{ name: 'price', type: 'number' }
]
});
//创建商品store实例
var dataStore = Ext.create('Ext.data.Store', {
model: 'PandaApp.model.Product',
proxy: {
url: '/product.json', //请求的URL
type: 'ajax', //请求的类型
pageSize: 35, //分页的每页数据条数
reader: {
type: 'json', //读取器类型
rootProperty: 'data', //后端数据根节点名称
totalProperty: 'total', //后端数据总条数对应节点名称
}
},
groupField: 'name' //指定分组使用的字段
});
//定义Grid
Ext.define('PandaApp.com.ProductGrid', {
extend: 'Ext.grid.Panel', //继承自Grid组件
title: '商品信息', //标题
closable: true, //可关闭
draggable: true, //可拖拽
plugins: ['rowediting','cellediting'], //添加行/单元格编辑插件
renderTo: Ext.getBody(), //渲染到body
width: 800, //设置宽度
height: 300,
store: dataStore, //关联Store
dockedItems: [ //添加停靠栏
{
xtype: 'pagingtoolbar', //添加分页组件
store: dataStore, //对应的Store
dock: 'bottom', //停靠在底部
displayInfo: true //显示提示信息
}
],
features: [ //开启分组
{
id: 'group', //组Id
ftype: 'grouping', //
groupHeaderTpl : '{name}', //组标题模板
hideGroupedHeader: true, //是否显示组名称
enableGroupingMenu: true //
}
],
columns: [ //设置列
{
header: '商品编号', //设置列标题
dataIndex: 'id', //设置对应的Store数据列
flex: 0.5, //设置列的想对宽度
hidden: true, //设置列隐藏
groupable: true, //是否可以用于分组
},
{
header: '商品',
dataIndex: 'name',
flex: 1,
groupable: true, //是否可以用于分组
},
{
header: '商品类别',
dataIndex: 'productType',
flex: 1,
groupable: true, //是否可以用于分组
},
{
header: '价格',
dataIndex: 'price',
flex: 1,
groupable: true, //是否可以用于分组
}
]
});
//创建Grid实例
Ext.create('PandaApp.com.ProductGrid');
实例：配置分页
实例：远程加载商品信息
后端JSON数据：
{"data":[{"id":666,"name":"0panda","price":88.88},{"id":888,"name":"9dog","price":99.99},{"id":999,"name":"8monkey","price":77.77},{"id":123,"name":"1monkey","price":77.77},{"id":133,"name":"2monkey","price":77.77},{"id":135,"name":"3monkey","price":77.77},{"id":162,"name":"4monkey","price":77.77},{"id":173,"name":"5monkey","price":77.77},{"id":173,"name":"6monkey","price":77.77},{"id":185,"name":"7monkey","price":77.77}],"total":10}
代码：
//定义商品model
Ext.define('PandaApp.model.Product', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string'},
{ name: 'price', type: 'number' }
]
});
//创建商品store实例
var dataStore = Ext.create('Ext.data.Store', {
model: 'PandaApp.model.Product',
proxy: {
url: '/product.json', //请求的URL
type: 'ajax', //请求的类型
pageSize: 35, //分页的每页数据条数
reader: {
type: 'json', //读取器类型
rootProperty: 'data', //后端数据根节点名称
totalProperty: 'total', //后端数据总条数对应节点名称
}
}
});
//定义Grid
Ext.define('PandaApp.com.ProductGrid', {
extend: 'Ext.grid.Panel', //继承自Grid组件
title: '商品信息', //标题
closable: true, //可关闭
draggable: true, //可拖拽
plugins: 'gridfilters', //添加过滤插件
renderTo: Ext.getBody(), //渲染到body
width: 800, //设置宽度
height: 300,
store: dataStore, //关联Store
dockedItems: [ //添加停靠栏
{
xtype: 'pagingtoolbar', //添加分页组件
store: dataStore, //对应的Store
dock: 'bottom', //停靠在底部
displayInfo: true //显示提示信息
}
],
columns: [ //设置列
{
header: '商品编号', //设置列标题
dataIndex: 'id', //设置对应的Store数据列
flex: 0.5, //设置列的想对宽度
hidden: true, //设置列隐藏
},
{
header: '商品',
dataIndex: 'name',
flex: 1,
filter:'string', //开启过滤。设置过滤的类型
},
{
header: '商品',
dataIndex: 'name',
flex: 1,
filter: { //设置列具体过滤配置
type: 'string', //过滤的类型为string
itemDefaults: { //具体的过滤配置项
emptyText: '搜索内容' //提示文本
}
}
},
{
header: '价格',
dataIndex: 'price',
flex: 1,
renderer: function(value){ //自定义渲染
return Ext.String.format("￥{0}",value);
}
}
]
});
//创建Grid实例
Ext.create('PandaApp.com.ProductGrid');
实例：使用分页工具条
//创建数据仓库
var dataStore = Ext.create('Ext.data.Store', {
pageSize: 3,
flelds: [
"id","name","score"
],
data: [
{
id: 666,
name: 'panda',
score: 99
},
{
id: 222,
name: 'dog',
score: 86
},
{
id: 111,
name: 'cat',
score: 76
},
{
id: 111,
name: 'cat',
score: 76
},
]
});
//创建Gird
Ext.create('Ext.grid.Panel', {
id: 'girdId666',
renderTo: Ext.getBody(),
width: 600,
closable: true,
store: dataStore,
resizable: true,
dockedItems: [
{
xtype: 'pagingtoolbar',
store: dataStore,
dock: 'bottom',
displayInfo: true
}
],
columns: [
{
header: '编号',
dataIndex: 'id',
sortable: true,
flex: 0.5
},
{
header: '姓名',
dataIndex: 'name',
sortable: true,
flex: 1
},
{
header: '分数',
dataIndex: 'score',
sortable: true,
flex: 1,
}
]
});
实例：动态加载后端数据 + 使用分页工具条
//创建数据模型
Ext.define('Employee',{
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
{ name: 'fullName', type: 'string' },
{ name: 'age', type: 'int' },
{ name: 'joinDateTime', type: 'date', format: 'Y-m-d' },
{ name: 'city', type: 'string'}
]
});
//创建数据仓库
var baseURL = 'http://127.0.0.1:81/test.json'
var dataStore = Ext.create('Ext.data.Store', {
model: 'Employee', //设置对应的模型
pageSize: 9, //每页显示的数据条数
proxy: { //设置代理
type: 'ajax', //设置代理的类型
api: {
create: baseURL,
read: baseURL,
destory: baseURL,
update: baseURL,
},
reader: { //设置读取器
type: 'json', //读取器的类型
metaProperty: 'meta', //设置JSON辅助数据节点
rootProperty: 'data', //设置JSON根节点
idProperty: 'id', //设置数据的Id键
totalProperty: 'meta.total', //设置JSON数据的总条数对应字段
successProperty: 'meta.success' //设置JSON数据成功的对应字段
},
writer: { //设置写入器
type: 'json', //设置写入器的类型
encode: true, //设置是否编码
writeAllFields: true, //写入记录的所有字段
rootProperty: 'data', //设置JSON数据的根节点
allowSingle: true, //允许
}
}
});
//加载数据
dataStore.load();
//创建网格
var grid = Ext.create('Ext.grid.Panel', {
title: '员工信息', //设置Grid标题
id: 'employeeGrid1', //设置组件Id
closable: true, //设置可关闭
collapsible: true, //设置可折叠
loadMask: true, //加载时显示遮罩
draggable: true, //设置可拖拽
resizable: true, //设置允许设置大小
width: 700, //设置宽度
store: dataStore, //设置关联的数据仓库
dockedItems: [
{
xtype: 'pagingtoolbar',
store: dataStore,
dock: 'bottom',
displayInfo: true
}
],
renderTo: Ext.getBody(),
columns: [ //设置标题行
{
header: '编号',
dataIndex: 'id',
sortable: true,
flex: 0.5
},
{
header: '姓名',
dataIndex: 'fullName',
sortable: true,
flex: 1
},
{
header: '年龄',
dataIndex: 'age',
sortable: true,
flex: 0.5
},
{
header: '加入公司的日期',
dataIndex: 'joinDateTime',
sortable: true,
flex: 1
},
{
header: '所在城市',
dataIndex: 'city',
sortable: true,
flex: 0.8
}
]
});
实例：整体配置
实例：配置顶部工具栏
使用tbar配置项即可。
{
xtype: 'gridpanel', //grid面板
title: 'PandaTest',
width: 600,
height: 300,
forceFit: true, //自动拉伸填充空白
frame: true, //带边框
tbar: [ //配置工具栏
{ xtype: 'button', text: '增加', },
{ xtype: 'button', text: '减少', },
{ xtype: 'button', text: '修改', },
],
columns: [ //定义列
{ text: '姓名', dataIndex: 'name', },
{ text: '性别', dataIndex: 'sex', },
{ text: '年龄', dataIndex: 'age', },
],
store: { //定义数据仓库
data: [ //直接内联数据做测试使用
{name: 'Panda', sex: '男', age: 666 },
],
}
}
实例：配置选择模式
选择模式决定了鼠标选中的模式，默认情况下，Grid使用行模式。
使用selModel配置项
//使用字符串形式
selModel: 'rowmodel', //选择模式
selModel: 'cellmodel', //选择模式
selModel: 'checkboxmodel', //选择模式
//使用对象形式
selModel:{
selType: 'rowmodel', //选择模式
mode: 'SINGLE'
},
//使用选择模式的具体类型实例
selModel: SomeSelectModelInstance
后端测试使用的JSON
{"data":[{"id":666,"name":"0panda","price":88.88},{"id":888,"name":"9dog","price":99.99},{"id":999,"name":"8monkey","price":77.77},{"id":123,"name":"1monkey","price":77.77},{"id":133,"name":"2monkey","price":77.77},{"id":135,"name":"3monkey","price":77.77},{"id":162,"name":"4monkey","price":77.77},{"id":173,"name":"5monkey","price":77.77},{"id":173,"name":"6monkey","price":77.77},{"id":185,"name":"7monkey","price":77.77}],"total":10}
代码：
//定义商品model
Ext.define('PandaApp.model.Product', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string'},
{ name: 'price', type: 'number' }
]
});
//创建商品store实例
var dataStore = Ext.create('Ext.data.Store', {
model: 'PandaApp.model.Product',
proxy: {
url: '/resources/product.json', //请求的URL
type: 'ajax', //请求的类型
pageSize: 35, //分页的每页数据条数
reader: {
type: 'json', //读取器类型
rootProperty: 'data', //后端数据根节点名称
totalProperty: 'total', //后端数据总条数对应节点名称
}
}
});
//定义Grid
Ext.define('PandaApp.com.ProductGrid', {
extend: 'Ext.grid.Panel', //继承自Grid组件
title: '商品信息', //标题
closable: true, //可关闭
draggable: true, //可拖拽
plugins: 'gridfilters', //添加过滤插件
renderTo: Ext.getBody(), //渲染到body
width: 800, //设置宽度
height: 300,
store: dataStore, //关联Store
selModel: 'checkboxmodel', //选择模式~~~~~~~~~~
dockedItems: [ //添加停靠栏
{
xtype: 'pagingtoolbar', //添加分页组件
store: dataStore, //对应的Store
dock: 'bottom', //停靠在底部
displayInfo: true //显示提示信息
}
],
columns: [ //设置列
{
header: '商品编号', //设置列标题
dataIndex: 'id', //设置对应的Store数据列
flex: 0.5, //设置列的想对宽度
hidden: true, //设置列隐藏
},
{
header: '商品',
dataIndex: 'name',
flex: 1,
filter:'string', //开启过滤。设置过滤的类型
},
{
header: '商品',
dataIndex: 'name',
flex: 1,
filter: { //设置列具体过滤配置
type: 'string', //过滤的类型为string
itemDefaults: { //具体的过滤配置项
emptyText: '搜索内容' //提示文本
}
}
},
{
header: '价格',
dataIndex: 'price',
flex: 1,
renderer: function(value){ //自定义渲染
return Ext.String.format("￥{0}",value);
}
}
]
});
//创建Grid实例
Ext.create('PandaApp.com.ProductGrid');
实例：配置允许多选/单选
selModel配置项的值可以是字符串也可以是Ext.selection.Model类型的子类的实例。
通过设置Ext.selection.Model类型的Model配置项即可设置多选/单选。
后端测试使用的JSON
{"data":[{"id":666,"name":"0panda","price":88.88},{"id":888,"name":"9dog","price":99.99},{"id":999,"name":"8monkey","price":77.77},{"id":123,"name":"1monkey","price":77.77},{"id":133,"name":"2monkey","price":77.77},{"id":135,"name":"3monkey","price":77.77},{"id":162,"name":"4monkey","price":77.77},{"id":173,"name":"5monkey","price":77.77},{"id":173,"name":"6monkey","price":77.77},{"id":185,"name":"7monkey","price":77.77}],"total":10}
代码：
//定义商品model
Ext.define('PandaApp.model.Product', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string'},
{ name: 'price', type: 'number' }
]
});
//创建商品store实例
var dataStore = Ext.create('Ext.data.Store', {
model: 'PandaApp.model.Product',
proxy: {
url: '/resources/product.json', //请求的URL
type: 'ajax', //请求的类型
pageSize: 35, //分页的每页数据条数
reader: {
type: 'json', //读取器类型
rootProperty: 'data', //后端数据根节点名称
totalProperty: 'total', //后端数据总条数对应节点名称
}
}
});
//创建选择模式
//复选框选择模式
var selectType = Ext.create('Ext.selection.CheckboxModel', {
mode: 'SINGLE', //设置为单选
});
//定义Grid
Ext.define('PandaApp.com.ProductGrid', {
extend: 'Ext.grid.Panel', //继承自Grid组件
title: '商品信息', //标题
closable: true, //可关闭
draggable: true, //可拖拽
plugins: 'gridfilters', //添加过滤插件
renderTo: Ext.getBody(), //渲染到body
width: 800, //设置宽度
height: 300,
store: dataStore, //关联Store
selModel: selectType, //设置选择模式.使用自己创建的选择模式
dockedItems: [ //添加停靠栏
{
xtype: 'pagingtoolbar', //添加分页组件
store: dataStore, //对应的Store
dock: 'bottom', //停靠在底部
displayInfo: true //显示提示信息
}
],
columns: [ //设置列
{
header: '商品编号', //设置列标题
dataIndex: 'id', //设置对应的Store数据列
flex: 0.5, //设置列的想对宽度
hidden: true, //设置列隐藏
},
{
header: '商品',
dataIndex: 'name',
flex: 1,
filter:'string', //开启过滤。设置过滤的类型
},
{
header: '商品',
dataIndex: 'name',
flex: 1,
filter: { //设置列具体过滤配置
type: 'string', //过滤的类型为string
itemDefaults: { //具体的过滤配置项
emptyText: '搜索内容' //提示文本
}
}
},
{
header: '价格',
dataIndex: 'price',
flex: 1,
renderer: function(value){ //自定义渲染
return Ext.String.format("￥{0}",value);
}
}
]
});
//创建Grid实例
Ext.create('PandaApp.com.ProductGrid');
实例：整体实例
实例：静态数据，显示学生成绩
使用stripeRows属性设置表格条纹
使用enableColumnMove属性设置列可改变位置
使用enableColumnResize属性设置列可改变大小
// 定义Model
Ext.define('StudentDataModel', {
extend: 'Ext.data.Model',
fields: [ //定义字段
{name: 'name', mapping : 'name'},
{name: 'age', mapping : 'age'},
{name: 'marks', mapping : 'marks'}
]
});
// 定义数据
var myData = [
{ name : "Asha", age : "16", marks : "90" },
{ name : "Vinit", age : "18", marks : "95" },
{ name : "Anand", age : "20", marks : "76" },
{ name : "Niharika", age : "21", marks : "86" },
{ name : "Manali", age : "22", marks : "57" }
];
// 创建数据仓库
var gridStore = Ext.create('Ext.data.Store', {
model: 'StudentDataModel', //指定Model
data: myData //指定内联数据
});
// 创建Gird
Ext.create('Ext.grid.Panel', {
id: 'gridId', //定义组件Id
store: gridStore, //指定数据仓库
stripeRows: true, //定义条纹
closable: true, //可关闭
draggable: true, //可拖拽
collapsible: true, //定义可折叠
title: '学生成绩', //Grid的面板标题
width: 600, //定义宽带
renderTo: Ext.getBody(),//渲染到body
enableColumnMove: true, //开启列可移动
enableColumnResize:true,//开启列可调整大小
columns: [ //定义列Header行
{
header: "学生姓名", //定义列标题
dataIndex: 'name', //定义列对应的数据列名
id : 'name', //设置列Id
flex: 0.5, //定义列的宽度比例
sortable: true, //设置为可排序
hideable: true //设置为可隐藏
},
{
header: "年龄",
dataIndex: 'age',
flex: .5,
sortable: true,
hideable: false
},
{
header: "分数",
dataIndex: 'marks',
flex: .5,
sortable: true
},
{
header: "是否优秀",
dataIndex: 'marks',
flex: .5,
sortable: true,
//设置显示条件
//设置分数对应等级
//显示为优秀、良好、普通
renderer : function (value, metadata, record, rowIndex, colIndex, store) {
if (value > 85) {
return '优秀';
} else if(value > 75){
return '良好';
} else {
return '普通';
}
}
}
]
});
实例：静态数据，显示工号和姓名
使用singleSelect属性设置为单选模式
使用multiSelect属性设置为多选模式
//具体的数据
var testData = [
['666','Panda'],
['222','Dog'],
['888','Donkey'],
['999','Cat']
];
//创建数据仓库
var dataStore = Ext.create('Ext.data.ArrayStore',{
data: testData,
fields: [
'code',
'fullName'
]
});
//创建面板
var grid = Ext.create('Ext.grid.Panel',{
title: '员工信息', //设置标题
closable: true, //设置可关闭
draggable: true, //设置可拖拽
collapsible: true, //设置可折叠
autoHeight: true, //设置自动调整高度
store: dataStore, //设置数据仓库
selType: 'rowmodel', //设置选中类型
singleSelect: true, //设置选中模式，仅允许单选一行
renderTo: Ext.getBody(), //设置渲染到body
width: 400, //设置宽度
columns: [
{
header: '工号',
dataIndex: 'code',
sortable: true,
flex: 1
},
{
header: '姓名',
dataIndex: 'fullName',
sortable: true,
flex: 2
}
]
});
实例：动态加载后端数据
后端数据的格式：
{
"data": [{
"id": 666,
"fullName": "Panda",
"age": 666,
"joinDateTime": "2020-10-17",
"city": "ShangHai"
}, {
"id": 222,
"fullName": "Dog",
"age": 888,
"joinDateTime": "1997-10-17",
"city": "GuangZhou"
}],
"meta": {
"success": true,
"total": 2
}
}
前端代码：
//创建数据模型
Ext.define('Employee',{
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
{ name: 'fullName', type: 'string' },
{ name: 'age', type: 'int' },
{ name: 'joinDateTime', type: 'date', format: 'Y-m-d' },
{ name: 'city', type: 'string'}
]
});
//创建数据仓库
var baseURL = 'http://127.0.0.1:81/test.json'
var dataStore = Ext.create('Ext.data.Store', {
model: 'Employee', //设置对应的模型
pageSize: 50, //每页显示的数据条数
proxy: { //设置代理
type: 'ajax', //设置代理的类型
api: {
create: baseURL,
read: baseURL,
destory: baseURL,
update: baseURL,
},
reader: { //设置读取器
type: 'json', //读取器的类型
metaProperty: 'meta', //设置JSON辅助数据节点
rootProperty: 'data', //设置JSON根节点
idProperty: 'id', //设置数据的Id键
totalProperty: 'meta.total', //设置JSON数据的总条数对应字段
successProperty: 'meta.success' //设置JSON数据成功的对应字段
},
writer: { //设置写入器
type: 'json', //设置写入器的类型
encode: true, //设置是否编码
writeAllFields: true, //写入记录的所有字段
rootProperty: 'data', //设置JSON数据的根节点
allowSingle: true, //允许
}
}
});
//加载数据
dataStore.load();
//创建网格
var grid = Ext.create('Ext.grid.Panel', {
title: '员工信息', //设置Grid标题
id: 'employeeGrid1', //设置组件Id
closable: true, //设置可关闭
collapsible: true, //设置可折叠
loadMask: true, //加载时显示遮罩
draggable: true, //设置可拖拽
resizable: true, //设置允许设置大小
width: 700, //设置宽度
store: dataStore, //设置关联的数据仓库
renderTo: Ext.getBody(),
columns: [ //设置标题行
{
header: '编号',
dataIndex: 'id',
sortable: true,
flex: 0.5
},
{
header: '姓名',
dataIndex: 'fullName',
sortable: true,
flex: 1
},
{
header: '年龄',
dataIndex: 'age',
sortable: true,
flex: 0.5
},
{
header: '加入公司的日期',
dataIndex: 'joinDateTime',
sortable: true,
flex: 1
},
{
header: '所在城市',
dataIndex: 'city',
sortable: true,
flex: 0.8
}
]
});
实例：将Grid放入到容器中
//创建Store
var dataStore = Ext.create('Ext.data.Store', {
fields: [
{ name: 'id', type: 'int' },
{ name: 'fullName', type: 'string'}
],
data: [
{
id: 666,
fullName: 'Panda'
},
{
id: 888,
fullName: 'dog'
}
]
});
//创建Gird
var grid = Ext.create('Ext.grid.Panel', {
store: dataStore,
columns: [
{
header: '编号',
dataIndex: 'id',
sortable: true,
flex: 1
},
{
header: '姓名',
dataIndex: 'fullName',
flex: 1
}
]
});
//创建Window容器
var window = Ext.create('Ext.Window', {
width: 500,
heigth: 300,
shadow: true,
title: 'Window容器',
items: [
grid
]
});
//Windows显示
window.show();
实例：事件监听
实例：监听多个事件
代码：
// 创建数据仓库
var gridStore = Ext.create('Ext.data.Store', {
fields: [ //定义字段
{name: 'name', mapping : 'name'},
{name: 'age', mapping : 'age'},
{name: 'marks', mapping : 'marks'}
],
data: [ //指定内联数据
{ name : "Asha", age : "16", marks : "90" },
{ name : "Vinit", age : "18", marks : "95" },
{ name : "Anand", age : "20", marks : "76" },
{ name : "Niharika", age : "21", marks : "86" },
{ name : "Manali", age : "22", marks : "57" }
]
});
// 创建Gird
Ext.create('Ext.grid.Panel', {
id: 'gridId', //定义组件Id
store: gridStore, //指定数据仓库
stripeRows: true, //定义条纹
closable: true, //可关闭
draggable: true, //可拖拽
collapsible: true, //定义可折叠
title: '学生成绩', //Grid的面板标题
width: 600, //定义宽带
renderTo: Ext.getBody(),//渲染到body
enableColumnMove: true, //开启列可移动
enableColumnResize:true,//开启列可调整大小
columns: [ //定义列Header行
{
header: "学生姓名", //定义列标题
dataIndex: 'name', //定义列对应的数据列名
id : 'name', //设置列Id
flex: 0.5, //定义列的宽度比例
sortable: true, //设置为可排序
hideable: true //设置为可隐藏
},
{
header: "年龄",
dataIndex: 'age',
flex: .5,
sortable: true,
hideable: false
},
{
header: "分数",
dataIndex: 'marks',
flex: .5,
sortable: true
}
],
listeners: { //定义事件监听
render: { //监听渲染事件
fn:function(grid, eOpts){
console.log('Grid has render');
}
},
select: { //监听选择事件
fn:function(grid, record, index, eOpts){
console.log('Select Event');
console.log(record);
console.log(index);
}
},
itemclick:{ //监听点击事件
fn:function(grid, record, item, index, event, Opts){
console.log('item Click');
console.log(record);
console.log(item);
console.log(index);
console.log(event);
}
},
itemkeydown:{ //监听键盘按下事件
fn:function(grid, record, item, index, event, eOpts){
//获得用户按下按钮
var myKey = event.getKey();
//判断按钮
if ( myKey === event.DELETE ){
myNewMsg = "Delete Record";
} else if ( myKey == event.RETURN ){
myNewMsg = "Edit customer #" + record.data.id + "";
} else if (( myKey === event.N && event.shiftKey)|| myKey=== event.F8 ){
myNewMsg = "Add new record";
} else if (( myKey === event.D && event.shiftKey)){
myNewMsg = "view detail of customer #" +
record.data.id + "";
} else if ( myKey ===event.F9 ){
myNewMsg = "Other action...";
} else {
return;
}
console.log(myNewMsg);
}
}
}
});
实例：数据操作
实例：获得已选择的数据，设置需要选择的数据
使用Grid组件的getSelection()方法和setSelection()方法即可。
后端测试使用的JSON：
{"data":[{"id":666,"name":"0panda","price":88.88},{"id":888,"name":"9dog","price":99.99},{"id":999,"name":"8monkey","price":77.77},{"id":123,"name":"1monkey","price":77.77},{"id":133,"name":"2monkey","price":77.77},{"id":135,"name":"3monkey","price":77.77},{"id":162,"name":"4monkey","price":77.77},{"id":173,"name":"5monkey","price":77.77},{"id":173,"name":"6monkey","price":77.77},{"id":185,"name":"7monkey","price":77.77}],"total":10}
代码：
//定义商品model
Ext.define('PandaApp.model.Product', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string'},
{ name: 'price', type: 'number' }
]
});
//创建商品store实例
var dataStore = Ext.create('Ext.data.Store', {
model: 'PandaApp.model.Product',
proxy: {
url: '/resources/product.json', //请求的URL
type: 'ajax', //请求的类型
pageSize: 35, //分页的每页数据条数
reader: {
type: 'json', //读取器类型
rootProperty: 'data', //后端数据根节点名称
totalProperty: 'total', //后端数据总条数对应节点名称
}
}
});
//定义Grid
Ext.define('PandaApp.com.ProductGrid', {
extend: 'Ext.grid.Panel', //继承自Grid组件
id: 'gridTest', //设置Id用于测试使用
title: '商品信息', //标题
closable: true, //可关闭
draggable: true, //可拖拽
plugins: 'gridfilters', //添加过滤插件
renderTo: Ext.get('pandaTest'), //渲染到指定容器
width: 800, //设置宽度
height: 300,
store: dataStore, //关联Store
selModel: 'checkboxmodel', //设置选择模式
gridScope: this,
tbar: [ //重点在这里~~~~~~~~~~~~~~~~~
{
xtype: 'button',
text: '获得选择的数据',
handler: function () {
//获得gird
let grid = Ext.ComponentQuery.query('#gridTest')[0];
//获得选择的数据
let selectedData = grid.getSelection();
//使用选择的数据
console.log('Count: ' + selectedData.length)
console.log(selectedData[0].get('name'));
}
},
{
xtype: 'button',
text: '设置所选择的数据',
handler: function () {
//获得gird
let grid = Ext.ComponentQuery.query('#gridTest')[0];
//获得需要选中的数据
let needSelectedModel1 = dataStore.first();
let needSelectedModel2 = dataStore.last();
//设置需要选中的数据
grid.setSelection([needSelectedModel1,needSelectedModel2]);
}
}
],
dockedItems: [ //添加停靠栏
{
xtype: 'pagingtoolbar', //添加分页组件
store: dataStore, //对应的Store
dock: 'bottom', //停靠在底部
displayInfo: true //显示提示信息
}
],
columns: [ //设置列
{
header: '商品编号', //设置列标题
dataIndex: 'id', //设置对应的Store数据列
flex: 0.5, //设置列的想对宽度
hidden: true, //设置列隐藏
},
{
header: '商品',
dataIndex: 'name',
flex: 1,
filter:'string', //开启过滤。设置过滤的类型
},
{
header: '商品',
dataIndex: 'name',
flex: 1,
filter: { //设置列具体过滤配置
type: 'string', //过滤的类型为string
itemDefaults: { //具体的过滤配置项
emptyText: '搜索内容' //提示文本
}
}
},
{
header: '价格',
dataIndex: 'price',
flex: 1,
renderer: function(value){ //自定义渲染
return Ext.String.format("￥{0}",value);
}
}
]
});
//创建Grid实例
Ext.create('PandaApp.com.ProductGrid');
本文来自博客园，作者：重庆熊猫，转载请注明原文链接：https://www.cnblogs.com/cqpanda/p/16587500.html
