//SiteVariableConfigValue类，创立一个模型类
Ext.define("SiteVariableConfigValue"
, {
extend: "Ext.data.Model"
,
fields: [
{ name: 'SVCValueId', type: 'int', sortable:
true },
{ name: 'SVCId', type: 'string', sortable:
true },
{ name: 'KeyInItem', type: 'string', sortable:
true },
{ name: 'ValueInItem', type: 'string', sortable:
true }
]
});
var storeSiteVariableConfigValue = Ext.create('Ext.data.Store'
, {
model: 'SiteVariableConfigValue',
//这个地方CarAccessoriesType不是一个对象，而是一个类
pageSize: limit,
//页容量20条数据
//是否在服务端排序 （true的话，在客户端就不能排序）
remoteSort:
false,
remoteFilter: true,
method: 'POST'
,
proxy: {//代理
type: 'ajax'
,
url: '/UI/HttpHandlerData/InformationManagement/InformationManagement.ashx?operation=SearchInfoCollection1'
,
extraParams: {
start: start,
limit: limit
},
reader: { //这里的reader为数据存储组织的地方，下面的配置是为json格式的数据，例如：[{"total":50,"rows":[{"a":"3","b":"4"}]}]//读取器
type: 'json',
//返回数据类型为json格式
root: 'Table',
//根节点
totalProperty: 'result'
//数据总条数
}
},
sorters: [{
//排序字段。
property: 'SVCValueId'
,
//排序类型，默认为 ASC
direction: 'desc'
}],
autoLoad: true //即时加载数据
});
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing'
, {
clicksToMoveEditor: 1
,
autoCancel: false
});
var gridSiteVariableConfigValue = Ext.create('Ext.grid.Panel'
, {
store: storeSiteVariableConfigValue,
autoWidth: true,
aotuHeight: true,
animCollapse: false,
enableColumnMove: false,
enableHdMenu: false,
loadMask: true,
loadMask: {
msg: '正在载入数据,请稍候...'
},
viewConfig: {
forceFit: true,
stripeRows: true
},
forceFit: true,
//列表宽度自适应
stripeRows:
true,
//斑马线
autoSizeColumns:
true,
//根据每一列内容的宽度自适应列的大小
trackMouseOver:
true,
//鼠标移动时高亮显示
selModel: { selType: 'checkboxmodel' },
//选择框
scroll:
true,
layout: 'column',
// Specifies that the items will now be arranged in columns
columnWidth: 0.60
,
plugins: [rowEditing],
columns: [
{ header: '序号', xtype: 'rownumberer', align: 'left', width: 50
},
{
header: '键', dataIndex: 'KeyInItem', width: 200
, editor: {
// xtype: 'textfield'
}
},
{
header: '值', dataIndex: 'ValueInItem', width: 200
, editor: {
// xtype: 'textfield'
}
},
],
bbar: [{
xtype: 'pagingtoolbar'
,
store: storeSiteVariableConfigValue,
displayMsg: '显示 {0} - {1} 条，共计 {2} 条'
,
emptyMsg: "没有数据"
,
beforePageText: "当前页"
,
afterPageText: "共{0}页"
,
displayInfo: true
}],
tbar: [{
text: '添加'
,
icon: '/Resources/Images/16x16_easyui/edit_add.png'
,
handler: function () {
rowEditing.cancelEdit();
var r = Ext.create('SiteVariableConfigValue'
, {
KeyInItem: '这里是键'
,
ValueInItem: '这里是值'
});
gridSiteVariableConfigValue.getStore().insert(0
, r);
rowEditing.startEdit(0, 0
);
}
}, {
text: '删除'
,
icon: '/Resources/Images/16x16_easyui/edit_remove.png'
,
handler: function () {
Ext.MessageBox.confirm('Confirm', '确定删除该记录?',
function (btn) {
if (btn != 'yes'
) {
return;
}
var sm =
gridSiteVariableConfigValue.getSelectionModel();
rowEditing.cancelEdit();
var store =
gridSiteVariableConfigValue.getStore();
store.remove(sm.getSelection());
if (store.getCount() > 0
) {
sm.select(0
);
}
});
},
disabled: true
}]
});
转载于:https://www.cnblogs.com/foreverfendou/p/4415024.html
相关资源：Extjs4下拉菜单ComboBox中用Grid显示通用控件
