标签：控件 cm header Grid dataIndex var new EXTJS store
1、定义列
var cm = new ExtgridColumnModel([
{header:编号,dataIndex:id},
{header:名称,dataIndex:name},
{header:描述,dataIndex:descn}
]);
2、数据源
var data = [
[1,name1,descn1],
[2,name2,descn2],
[3,name3,descn3],
[4,name4,descn4],
[5,name5,descn5]
];
3、数据store,用来获得与解析数据
var store = new ExtdataStore({
proxy: new ExtdataMemoryProxy(data),
reader: new ExtdataArrayReader({}, [
{name: id},
{name: name},
{name: descn}
])
});
storeload();
4、展示GridPanel
var grid = new ExtgridGridPanel({
autoHeight: true,
renderTo: grid,
store: store,
cm: cm
});
5、自动列宽
var grid = new ExtgridGridPanel({
autoHeight: true,
renderTo: grid,
store: store,
cm: cm,
autoExpandColumn: descn //将要自动列宽的列设置即可
});
6、设置按照字母拼音来进行排序（重载方法applySort）
ExtdataStoreprototypeapplySort = function () {
if (thissortInfo && !thisremoteSort) {
var s = thissortInfo, f = sfield;
var st = thisfieldsget(f)sortType;
var fn = function (r1, r2) {
var v1 = st(r1data[f]), v2 = st(r2data[f]);
if (typeof (v1) == string) {
return v1localeCompare(v2);
}
return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
};
thisdatasort(sdirection, fn);
if (thissnapshot && thissnapshot != thisdata) {
thissnapshotsort(sdirection, fn);
}
}
};
7、用renderer显示指定格式日期
var cm = new ExtgridColumnModel([
{header:编号,dataIndex:id},
{header:名称,dataIndex:name},
{header:描述,dataIndex:descn},
{header:日期,dataIndex:date, renderer: ExtutilFormatdateRenderer(Y-m-d)}
]);
8、用renderer来显示指定要求的复杂的列
function renderSex(value) {
if (value == male) {
return <span style=color:red;font-weight:bold;>红男</span><img src=user_malepng />;
} else {
return <span style=color:green;font-weight:bold;>绿女</span><img src=user_femalepng />;
}
}
function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store) {
var str = <input type=button value=查看详细信息 οnclick=alert(\ +
这个单元格的值是： + value + \\n +
这个单元格的配置是：{cellId: + cellmetacellId + ,id: + cellmetaid + ,css: + cellmetacss + }\\n +
这个单元格对应行的record是： + record + ，一行的数据都在里边\\n +
这是第 + rowIndex + 行\\n +
这是第 + columnIndex + 列\\n +
这个表格对应的ExtdataStore在这里： + store + ，随便用吧。 +
\)>;
return str;
}
var cm = new ExtgridColumnModel([
{header:编号,dataIndex:id},
{header:性别,dataIndex:sex,renderer:renderSex},
{header:名称,dataIndex:name},
{header:描述,dataIndex:descn,renderer:renderDescn}
]);
9、根据grid列表中的数据值来指定行的样式（设置行的颜色）
样式：
<style type=text/css>
white-row{ background-color: white; }
red-row{ background-color: #F5C0C0 !important; }
yellow-row{ background-color: #FBF8BF !important; }
green-row{ background-color: #99CC99 !important; }
</style>
Grid中的viewConfig项：
viewConfig: {
forceFit: true,
enableRowBody: true,
getRowClass: function (record, rowIndex, p, ds) {
var cls = white-row;
switch (recorddatacolor) {
case #FBF8BF:
cls = yellow-row
break;
case #99CC99:
cls = green-row
break;
case #F5C0C0:
cls = red-row
break;
}
return cls;
}
}
10、根据数据设置列中的颜色
处理函数
function renderMotif(data, cell, record, rowIndex, columnIndex, store){
var value = recordget(color)
cellattr = style=background-color: + value;
return data;
}
绑定处理函数到列上
var cm = new ExtgridColumnModel([
{header: name, dataIndex: name},
{header: sex, dataInex: sex},
{header: color, dataIndex: color, renderer: renderMotif}
]);
11、自动产生序号列
var cm = new ExtgridColumnModel([
new ExtgridRowNumberer(),
{ header: 编号, dataIndex: id },
{ header: 性别, dataIndex: sex },
{ header: 名称, dataIndex: name },
{ header: 描述, dataIndex: descn }
]);
14、在每行前生成选择框
var sm = new ExtgridCheckboxSelectionModel();
var cm = new ExtgridColumnModel([
new ExtgridRowNumberer(),
sm,
{ header: 编号, dataIndex: id },
{ header: 性别, dataIndex: sex },
{ header: 名称, dataIndex: name },
{ header: 描述, dataIndex: descn }
]);
15、单选模式
var grid = new ExtgridGridPanel({
autoHeight: true,
renderTo: grid,
store: store,
cm: cm,
sm: new ExtgridRowSelectionModel({ singleSelect: true })
});
16、列表的单击事件获取
gridon(click, function () {
var selections = gridgetSelectionModel()getSelections();
for (var i = 0; i < selectionslength; i++) {
var record = selections[i];
ExtMsgalert(提示, recordget(id) + , + recordget(name) + , + recordget(descn));
}
});
17、 列表的分页导航控件
var grid = new ExtgridGridPanel({
renderTo: grid,
autoHeight: true,
store: store,
cm: cm,
bbar: new ExtPagingToolbar({
pageSize: 10,
store: store,
displayInfo: true,
displayMsg: 显示第 {0} 条到 {1} 条记录，一共 {2} 条,
emptyMsg: 没有记录
})
});
storeload();
18、后台实现分页导航功能
var grid = new ExtgridGridPanel({
renderTo: grid,
autoHeight: true,
store: store,
cm: cm,
bbar: new ExtPagingToolbar({
pageSize: 10,
store: store,
displayInfo: true,
displayMsg: 显示第 {0} 条到 {1} 条记录，一共 {2} 条,
emptyMsg: 没有记录
})
});
storeload({params:{start:0,limit:10}});
19、双击可进行编辑的列
先定义可编辑的列：
var cm = new ExtgridColumnModel([{
header: 编号,
dataIndex: id,
editor: new ExtgridGridEditor(
new ExtformTextField({allowBlank: false}))
}, {
header: 名称,
dataIndex: name,
editor: new ExtgridGridEditor(new ExtformTextField({allowBlank: false}))
}, {
header: 描述,
dataIndex: descn,
editor: new ExtgridGridEditor(new ExtformTextField({allowBlank: false}))
}]);
再定义可编辑的Grid控件
var grid = new ExtgridEditorGridPanel({
autoHeight: true,
renderTo: grid,
store: store,
cm: cm
});
20、为Grid添加toolbar，并且有添加与删除功能
var grid = new ExtgridEditorGridPanel({
autoHeight: true,
renderTo: grid,
store: store,
cm: cm,
tbar: new ExtToolbar([-, {
text: 添加一行,
handler: function () {
var p = new Record({
id: ,
name: ,
descn:
});
gridstopEditing();
storeinsert(0, p);
gridstartEditing(0, 0);
}
}, -, {
text: 删除一行,
handler: function () {
ExtMsgconfirm(信息, 确定要删除？, function (btn) {
if (btn == yes) {
var sm = gridgetSelectionModel();
var cell = smgetSelectedCell();
var record = storegetAt(cell[0]);
storeremove(record);
}
});
}
}, -])
});
21、将实时添加的数据保存到数据库中
{
text: 保存,
handler: function () {
var m = storemodifiedslice(0);
for (var i = 0; i < mlength; i++) {
var record = m[i];
var fields = recordfieldskeys;
for (var j = 0; j < fieldslength; j++) {
var name = fields[j];
var value = recorddata[name];
var colIndex = cmfindColumnIndex(name);
var rowIndex = storeindexOfId(recordid);
var editor = cmgetCellEditor(colIndex)field;
if (!editorvalidateValue(value)) {
ExtMsgalert(提示, 请确保输入的数据正确。, function () {
gridstartEditing(rowIndex, colIndex);
});
return;
}
}
}
// 进行到这里，说明数据都是有效的
var jsonArray = [];
Exteach(m, function (item) {
jsonArraypush(itemdata);
});
ExtlibAjaxrequest(
POST,
grid2jsp,
{ success: function (response) {
ExtMsgalert(信息, responseresponseText, function () {
storereload();
});
}, failure: function () {
ExtMsgalert(错误, 与后台联系的时候出现了问题);
}
},
data= + encodeURIComponent(Extencode(jsonArray))
);
}
}
22、属性表格，并且设置成不可编辑
var grid = new ExtgridPropertyGrid({
title: 属性表格,
autoHeight: true,
width: 300,
renderTo: grid,
source: {
名字: 不告诉你,
创建时间: new Date(Dateparse(12/15/2007)),
是否有效: false,
版本号: 01,
描述: 嗯，估计没啥可说的
}
});
gridon(beforeedit, function (e) {
ecancel = true;
return false;
});
23、分组的列表
var store = new ExtdataGroupingStore({
reader: reader,
data: data,
groupField: sex,
sortInfo: { field: id, direction: ASC }
});
var grid = new ExtgridGridPanel({
autoHeight: true,
store: store,
columns: columns,
view: new ExtgridGroupingView(),
renderTo: grid
});
24、列表中的右键事件
var contextmenu = new ExtmenuMenu({
id: theContextMenu,
items: [{
text: 查看详情,
handler: function () {
}
}]
});
gridon(rowcontextmenu, function (grid, rowIndex, e) {
epreventDefault();
gridgetSelectionModel()selectRow(rowIndex);
contextmenushowAt(egetXY());
});
标签：控件,
cm,
header,
Grid,
dataIndex,
var,
new,
EXTJS,
store
From： https://blog.51cto.com/u_15870687/5837389