EXTJS学习笔记：grid之分组实现groupingview
使用extjs开发时常会用到 grid来显示数据等操作，Extjs中Grid主要分为以下二类:
一、gridview
二、groupingview
gridview在前面已说过，在这里我来说说groupingview的使用方法， 在EXTJS里，实现很简单，只需要简单设置下就可以实现。具体可以参照EXTJS学习笔记：grid之gridview。
在这里要注意使用的是GroupingStore而不是Store，其中重点是要设置groupField的值 ，该字段表示默认的分组字段。由于与GridView类似，所在不详细说明，先把截图先贴出来，让大家看下有多酷。
在这里实现了按父菜单分组，当然也可以实现任意一列的分组，方法是选某列，在出现的下拉列表（如下图所示）中，
选择“根据本列分组”
下面我把源代码放出来，
源代码：
/*
* 菜单管理
* MenuInfoManage.js
* author:☆会飞的鱼☆
* date 2009-10-15
*/
var MenuInfoStore;
MenuInfoManage = function(node) {
var pmenufields = Ext.data.Record.create([
{ name: 'menucode', mapping: 'menucode' }, { name: 'menuname', mapping: 'menuname' }
]);
var pmenustore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'UI/MenuInfo/GetAllPMenuInfo.aspx'
}),
reader: new Ext.data.JsonReader({
root: 'data',
id: 'menucode'
},
pmenufields
)
});
pmenustore.load();
var fields = ["menuid", "menucode", "menuname", "pmenucode","pmenuname", "menuurl", "state", "remark"];
MenuInfoStore = new Ext.data.GroupingStore({
proxy: new Ext.data.HttpProxy({
url: "UI/MenuInfo/MenuInfoManager.aspx",
method: "POST"
}),
reader: new Ext.data.JsonReader({
fields: fields,
root: "data",
dataIndex: "menuid",
totalProperty: "totalCount"
}),
groupField: 'pmenuname',//默认的分组字段
sortInfo: { field: 'menucode', direction: "ASC" }
});
MenuInfoStore.load({ params: { limit: pageSize, start: 0} });
var sm = new Ext.grid.CheckboxSelectionModel({
dataIndex: "menuid"
});
var cm = new Ext.grid.ColumnModel([sm,
{
header: "菜单名称",
dataIndex: "menuname",
tooltip: "菜单名称",
sortable: true
}, {
header: "父菜单",
dataIndex: "pmenucode",
tooltip: "父菜单",
hidden: true,
hideable:false
}, {
header: "父菜单",
dataIndex: "pmenuname",
tooltip: "父菜单",
sortable: true
}, {
header: "菜单URL",
dataIndex: "menuurl",
tooltip: "菜单URL",
sortable: true
}, {
header: "状态",
dataIndex: "state",
tooltip: "状态",
width: 40,
sortable: true,
renderer: function(value) {
if (value == 0) {
return "<b><font color=red>无效</font></b>";
} else if (value == 1) {
return "有效";
}
},
editor: new Ext.form.ComboBox({
store: new Ext.data.SimpleStore({
data: [["无效", "0"], ["有效", "1"]],
fields: ["text", "value"]
}),
tpl: '<tpl for="."><div ext:qtip="设置菜单状态为--{text}" class="x-combo-list-item">{text}</div></tpl>',
displayField: "text",
mode: "local",
valueField: "value",
triggerAction: "all"
})
}, {
header: "备注",
dataIndex: "remark",
tooltip: "备注",
sortable: true
}]);
var MenuGrid = new Ext.grid.GridPanel(
{
id: "MenuGrid",
store: MenuInfoStore,
sm: sm, //CheckboxSelectionModel
cm: cm, //ColumnModel
loadMask: true,
autoScroll: true, //超过长度带自动滚动条
border: false,
view: new Ext.grid.GroupingView({
forceFit: true, //自动填充
sortAscText: '正序排列',
sortDescText: '倒序排列',
columnsText: '列显示/隐藏',
groupByText: '根据本列分组',
showGroupsText: '是否采用分组显示',
groupTextTpl: '{text}(<b><font color=red>{[values.rs.length]}</font></b> {[values.rs.length > 0 ? "个子菜单" : "暂无子菜单信息"]})'
/*groupTextTpl: '{group}(<b><font color=red>{[values.rs.length]}</font></b> {[values.rs.length > 0 ? "个子菜单" : "暂无子菜单信息"]})' -------text=header+":"+group
*/
}),
//分页
bbar: new Ext.PagingToolbar({
store: MenuInfoStore,
pageSize: pageSize,
//显示右下角信息
displayInfo: true,
displayMsg: '当前记录 {0} -- {1} 条 共 {2} 条记录',
emptyMsg: "No results to display",
prevText: "上一页",
nextText: "下一页",
refreshText: "刷新",
lastText: "最后页",
firstText: "第一页",
beforePageText: "当前页",
afterPageText: "共{0}页"
}),
tbar: [
new Ext.Toolbar.Fill()
, "", "-", "", {
text: "新增根菜单",
tooltip: "新增根菜单信息",
iconCls: "addicon",
handler: AddPMenuInfoFn
}, "", "-", "", {
text: "新增",
tooltip: "新增菜单信息",
iconCls: "addicon",
handler: AddMenuInfoFn
}, "", "-", "", {
text: "编辑",
tooltip: "编辑菜单信息",
iconCls: "editicon",
handler: EditMenuInfoFn
}, "", "-", "", {
text: "删除",
tooltip: "删除菜单信息",
iconCls: "deleteicon",
handler: DelMenuInfoFn
}, "-"],
listeners: {
'contextmenu': function(e) {
e.stopEvent();
}
}
});
GridMain(node, MenuGrid, "menuicon");
}
function AddPMenuInfoFn() {
AddPMenuInfo();
}
function AddMenuInfoFn() {
AddMenuInfo();
}
function EditMenuInfoFn() {
var row = Ext.getCmp("MenuGrid").getSelectionModel().getSelections();
if (row.length == 0) {
Ext.Msg.alert("提示信息", "您没有选中任何行！");
}
else if (row.length == 1) {
if (row[0].data.pmenucode == "1") {
EditPMenuInfo(row[0]);
}
else {
EditMenuInfo(row[0]);
}
}
else {
Ext.Msg.alert("提示信息", "对不起只能选择一个！");
}
}
function DelMenuInfoFn() {
var row = Ext.getCmp("MenuGrid").getSelectionModel().getSelections();
if (row.length == 0) {
Ext.Msg.alert("提示信息", "您没有选中任何行！");
}
else {
Ext.Msg.confirm("提示信息", "您确定要删除选中的 " + row.length + " 条常用语吗", function(btn) {
if (btn == "yes") {
DelMenuInfo(row);
}
})
}
}
一、gridview
二、groupingview
gridview在前面已说过，在这里我来说说groupingview的使用方法， 在EXTJS里，实现很简单，只需要简单设置下就可以实现。具体可以参照EXTJS学习笔记：grid之gridview。
在这里要注意使用的是GroupingStore而不是Store，其中重点是要设置groupField的值 ，该字段表示默认的分组字段。由于与GridView类似，所在不详细说明，先把截图先贴出来，让大家看下有多酷。
在这里实现了按父菜单分组，当然也可以实现任意一列的分组，方法是选某列，在出现的下拉列表（如下图所示）中，
选择“根据本列分组”
下面我把源代码放出来，
源代码：
/*
* 菜单管理
* MenuInfoManage.js
* author:☆会飞的鱼☆
* date 2009-10-15
*/
var MenuInfoStore;
MenuInfoManage = function(node) {
var pmenufields = Ext.data.Record.create([
{ name: 'menucode', mapping: 'menucode' }, { name: 'menuname', mapping: 'menuname' }
]);
var pmenustore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'UI/MenuInfo/GetAllPMenuInfo.aspx'
}),
reader: new Ext.data.JsonReader({
root: 'data',
id: 'menucode'
},
pmenufields
)
});
pmenustore.load();
var fields = ["menuid", "menucode", "menuname", "pmenucode","pmenuname", "menuurl", "state", "remark"];
MenuInfoStore = new Ext.data.GroupingStore({
proxy: new Ext.data.HttpProxy({
url: "UI/MenuInfo/MenuInfoManager.aspx",
method: "POST"
}),
reader: new Ext.data.JsonReader({
fields: fields,
root: "data",
dataIndex: "menuid",
totalProperty: "totalCount"
}),
groupField: 'pmenuname',//默认的分组字段
sortInfo: { field: 'menucode', direction: "ASC" }
});
MenuInfoStore.load({ params: { limit: pageSize, start: 0} });
var sm = new Ext.grid.CheckboxSelectionModel({
dataIndex: "menuid"
});
var cm = new Ext.grid.ColumnModel([sm,
{
header: "菜单名称",
dataIndex: "menuname",
tooltip: "菜单名称",
sortable: true
}, {
header: "父菜单",
dataIndex: "pmenucode",
tooltip: "父菜单",
hidden: true,
hideable:false
}, {
header: "父菜单",
dataIndex: "pmenuname",
tooltip: "父菜单",
sortable: true
}, {
header: "菜单URL",
dataIndex: "menuurl",
tooltip: "菜单URL",
sortable: true
}, {
header: "状态",
dataIndex: "state",
tooltip: "状态",
width: 40,
sortable: true,
renderer: function(value) {
if (value == 0) {
return "<b><font color=red>无效</font></b>";
} else if (value == 1) {
return "有效";
}
},
editor: new Ext.form.ComboBox({
store: new Ext.data.SimpleStore({
data: [["无效", "0"], ["有效", "1"]],
fields: ["text", "value"]
}),
tpl: '<tpl for="."><div ext:qtip="设置菜单状态为--{text}" class="x-combo-list-item">{text}</div></tpl>',
displayField: "text",
mode: "local",
valueField: "value",
triggerAction: "all"
})
}, {
header: "备注",
dataIndex: "remark",
tooltip: "备注",
sortable: true
}]);
var MenuGrid = new Ext.grid.GridPanel(
{
id: "MenuGrid",
store: MenuInfoStore,
sm: sm, //CheckboxSelectionModel
cm: cm, //ColumnModel
loadMask: true,
autoScroll: true, //超过长度带自动滚动条
border: false,
view: new Ext.grid.GroupingView({
forceFit: true, //自动填充
sortAscText: '正序排列',
sortDescText: '倒序排列',
columnsText: '列显示/隐藏',
groupByText: '根据本列分组',
showGroupsText: '是否采用分组显示',
groupTextTpl: '{text}(<b><font color=red>{[values.rs.length]}</font></b> {[values.rs.length > 0 ? "个子菜单" : "暂无子菜单信息"]})'
/*groupTextTpl: '{group}(<b><font color=red>{[values.rs.length]}</font></b> {[values.rs.length > 0 ? "个子菜单" : "暂无子菜单信息"]})' -------text=header+":"+group
*/
}),
//分页
bbar: new Ext.PagingToolbar({
store: MenuInfoStore,
pageSize: pageSize,
//显示右下角信息
displayInfo: true,
displayMsg: '当前记录 {0} -- {1} 条 共 {2} 条记录',
emptyMsg: "No results to display",
prevText: "上一页",
nextText: "下一页",
refreshText: "刷新",
lastText: "最后页",
firstText: "第一页",
beforePageText: "当前页",
afterPageText: "共{0}页"
}),
tbar: [
new Ext.Toolbar.Fill()
, "", "-", "", {
text: "新增根菜单",
tooltip: "新增根菜单信息",
iconCls: "addicon",
handler: AddPMenuInfoFn
}, "", "-", "", {
text: "新增",
tooltip: "新增菜单信息",
iconCls: "addicon",
handler: AddMenuInfoFn
}, "", "-", "", {
text: "编辑",
tooltip: "编辑菜单信息",
iconCls: "editicon",
handler: EditMenuInfoFn
}, "", "-", "", {
text: "删除",
tooltip: "删除菜单信息",
iconCls: "deleteicon",
handler: DelMenuInfoFn
}, "-"],
listeners: {
'contextmenu': function(e) {
e.stopEvent();
}
}
});
GridMain(node, MenuGrid, "menuicon");
}
function AddPMenuInfoFn() {
AddPMenuInfo();
}
function AddMenuInfoFn() {
AddMenuInfo();
}
function EditMenuInfoFn() {
var row = Ext.getCmp("MenuGrid").getSelectionModel().getSelections();
if (row.length == 0) {
Ext.Msg.alert("提示信息", "您没有选中任何行！");
}
else if (row.length == 1) {
if (row[0].data.pmenucode == "1") {
EditPMenuInfo(row[0]);
}
else {
EditMenuInfo(row[0]);
}
}
else {
Ext.Msg.alert("提示信息", "对不起只能选择一个！");
}
}
function DelMenuInfoFn() {
var row = Ext.getCmp("MenuGrid").getSelectionModel().getSelections();
if (row.length == 0) {
Ext.Msg.alert("提示信息", "您没有选中任何行！");
}
else {
Ext.Msg.confirm("提示信息", "您确定要删除选中的 " + row.length + " 条常用语吗", function(btn) {
if (btn == "yes") {
DelMenuInfo(row);
}
})
}
}
