1. 查询(SELECT)
1.1 创建store
var _store = Ext.create('Ext.data.ArrayStore', {
model: 'User', // grid绑定的模型
pageSize: PAGESIZE, // 设置分页尺寸
remoteSort: true, // 设置允许远程(接口)排序
remoteFilter: true, // 设置允许远程(接口)搜索
noCache: true,
autoLoad: false,
proxy: {
type: 'ajax',
url: URL,
// 自定义参数名称(替换默认参数：start、limit、page)
startParam: 'start',
limitParam: 'number',
pageParam: 'page',
// 接口回调处理
reader: {
type: 'json', // 返回数据类型
root: 'data', // 返回数据：元数据
totalProperty: 'count' // 返回数据：总数据数
}
}
});
1.2 配置列
{
text: '编号', // 列名称
dataIndex: 'id', // 绑定的字段，和 Model 保持一致
flex: 1, // 列宽(百分比)
sortable: true, // 是否允许排序
align: 'center', // 对齐方式
// 渲染页面时，对数据进行预处理
renderer: function (value, p, td) {
return value % 2 == 0 ? value + " ==> even" : value + " ==> odd";
}
},
1.3 分页
// 分页功能
bbar: Ext.create('Ext.PagingToolbar', {
store: _store,
// 标识是否显示分页bar右下角的displayMsg信息
displayInfo: true,
// 有数据时：显示在分页bar右下角
displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
// 无数据时：显示在分页bar右下角
emptyMsg: "没有数据"
}
1.4 grid选中行
getSelectedRows = function() {
rows = grid.getSelectionModel().getSelection();
}
1.5 监听grid行点击事件(单击、双击)
注意：当同时监听单击和双击事件时，只会响应单击事件！
listeners: {
cellclick: function (v, p, n) {
console.log('单击');
var row = getSelectedRows();
var id = rows[0].get("id"); // 取出id列的值
},
celldblclick: function (v, p, n) {
console.log('双击');
var row = getSelectedRows();
var name = rows[0].get("name"); // 取出name列的值
}
}
1.6 grid中显示CheckBox(复选框)
selType: 'checkboxmodel'
1.7 排序
- 设置本地排序 | 远程(接口)排序
- e.g. remoteSort: true
- 每次只能根据单列排序
- e.g. sort:[{"property":"dept","direction":"ASC"}])
1.8 搜索
// 搜索
function search() {
var id = $("#txt_Id").val();
var name = $("#txt_Name").val();
_store.load({
params: {
start: 0,
limit: PAGESIZE,
// 这里要传入json字符串，否则传参异常
query:'{"id": id, "name": name}'
}
});
}