Ext.GridPanel 用法总结（一）—— Grid基本用法

GridPanel类是基于基础列表接口具代表性的主要实现类。也是最常用的Ext组件之一。

一：首先定义grid的数据源

view plaincopy to clipboardprint?

//初始化Ext状态管理器，在Cookie中记录用户的操作状态，如果不启用，象刷新时就不会保存当前的状态，而是重新加载

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

Ext.QuickTips.init(); //显示提示信息

var pageSize=10;//定义每页显示的行数

//定义数据字段

var fields = ["journal_id","journal_name","journal_organizer","journal_level","is_core"];

//定义数据源

journal_store = new Ext.data.Store({

// 获取数据

proxy:new Ext.data.HttpProxy(

{

url:"Data/SystemManage/Journal/JournalsInfo.aspx",//获取数据的后台地址

method:"POST"

}),

//解析json

reader:new Ext.data.JsonReader(

{

fields:fields,

root:"data",

id:"roleId",

totalProperty:"totalCount" //总的数据条数

})

});

//根据参数加载数据

journal_store.load({params:{journal_name:journal_name,journal_organizer:journal_organizer,journal_level:journal_level,is_core:is_core,start:0,limit:pageSize}});

//初始化Ext状态管理器，在Cookie中记录用户的操作状态，如果不启用，象刷新时就不会保存当前的状态，而是重新加载

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

Ext.QuickTips.init(); //显示提示信息

var pageSize=10;//定义每页显示的行数

//定义数据字段

var fields = ["journal_id","journal_name","journal_organizer","journal_level","is_core"];

//定义数据源

journal_store = new Ext.data.Store({

// 获取数据

proxy:new Ext.data.HttpProxy(

{

url:"Data/SystemManage/Journal/JournalsInfo.aspx",//获取数据的后台地址

method:"POST"

}),

//解析json

reader:new Ext.data.JsonReader(

{

fields:fields,

root:"data",

id:"roleId",

totalProperty:"totalCount" //总的数据条数

})

});

//根据参数加载数据

journal_store.load({params:{journal_name:journal_name,journal_organizer:journal_organizer,journal_level:journal_level,is_core:is_core,start:0,limit:pageSize}});

二：定义其选择列、行号、列等

view plaincopy to clipboardprint?

//--------------------------------------------------列选择模式

var sm = new Ext.grid.CheckboxSelectionModel({

dataIndex:"roleId"

});

var index= new Ext.grid.RowNumberer();//行号

//--------------------------------------------------列头

var colModel = new Ext.grid.ColumnModel

(

[

index,

sm,

{header:"序号",width:100,dataIndex:'journal_id',sortable:true},

{header:"期刊名称",width:80,dataIndex:'journal_name',sortable:true},

{header:"主办单位",width:110,dataIndex:'journal_organizer',sortable:true},

{header:"期刊级别",width:100,dataIndex:'journal_level',sortable:true},

{header:"是否核心",width:110,dataIndex:'is_core',sortable:true},

{header:"操作",width:100,dataIndex:'journal_id',sortable:true,renderer:delfun}

]

);

//--------------------------------------------------列选择模式

var sm = new Ext.grid.CheckboxSelectionModel({

dataIndex:"roleId"

});

var index= new Ext.grid.RowNumberer();//行号

//--------------------------------------------------列头

var colModel = new Ext.grid.ColumnModel

(

[

index,

sm,

{header:"序号",width:100,dataIndex:'journal_id',sortable:true},

{header:"期刊名称",width:80,dataIndex:'journal_name',sortable:true},

{header:"主办单位",width:110,dataIndex:'journal_organizer',sortable:true},

{header:"期刊级别",width:100,dataIndex:'journal_level',sortable:true},

{header:"是否核心",width:110,dataIndex:'is_core',sortable:true},

{header:"操作",width:100,dataIndex:'journal_id',sortable:true,renderer:delfun}

]

);

三：定义表格grid

view plaincopy to clipboardprint?

journal_grid = new Ext.grid.GridPanel

(

{

id:'id_journal_grid', //grid的id

autoHeight:true,

autoWidth:true,

sm:sm,

cm:colModel, //行列

loadMask:true,

store:journal_store, //数据源

trackMouseOver:true, //鼠标特效

autoScroll:true,

stripeRows:true,

viewConfig:{

columnsText:"显示/隐藏列",

sortAscText:"正序排列",

sortDescText:"倒序排列",

forceFit:true

},

journal_grid = new Ext.grid.GridPanel

(

{

id:'id_journal_grid', //grid的id

autoHeight:true,

autoWidth:true,

sm:sm,

cm:colModel, //行列

loadMask:true,

store:journal_store, //数据源

trackMouseOver:true, //鼠标特效

autoScroll:true,

stripeRows:true,

viewConfig:{

columnsText:"显示/隐藏列",

sortAscText:"正序排列",

sortDescText:"倒序排列",

forceFit:true

},

四：定义工具栏

view plaincopy to clipboardprint?

tbar: //工具条

[

{

text: '刷新',

cls: 'x-btn-text-icon details',

handler: function(btn, pressed)

{//重置查询条件

Ext.getCmp("QueryForm").findById('journalName').reset();

Ext.getCmp("QueryForm").findById('journalOrganizer').reset();

Ext.getCmp("QueryForm").findById('journalLevel').reset();

Ext.getCmp("QueryForm").findById('JournalIsCore').reset();

journal_store.load({params:{start:0,limit:pageSize}});

//数据源从新加载

}

},

'-',

{

text: '添加',

handler: function(btn, pressed)

{

AddJournalInfo(); //添加新的角色信息

}

}, '-',

{

text: '编辑',

handler: function(btn, pressed)

{

var row=Ext.getCmp("id_journal_grid").getSelectionModel().getSelections();//选择行的个数

if(row.length==0)

{

Ext.Msg.alert("提示信息","请您至少选择一个!");

}

else if(row.length>1){

Ext.Msg.alert("提示信息","对不起只能选择一个!");

}else if(row.length==1)

{

EditJournalInfo(row[0]);//传行一行记录直接加载 编辑角色信息

}

}

}, '-',

{

text: '删除',

handler: function(btn, pressed)

{

var row=Ext.getCmp("id_journal_grid").getSelectionModel().getSelections(); //获取选中的行

if(row.length==0)

{

Ext.Msg.alert("提示信息","请您至少选择一个!");

}

else{

Ext.Msg.confirm("提 示!","您确定要删除吗?",function(btn){

if(btn=="yes")

{

DeleteJournalInfo(row);//删除角色信息

}

else

{

}

})

}

}

},'-',

{

text: '综合查询',

handler: function(btn, pressed)

{

Ext.getCmp("QueryForm").toggleCollapse(true);//将formset展开

}

}, '-'

]

tbar: //工具条

[

{

text: '刷新',

cls: 'x-btn-text-icon details',

handler: function(btn, pressed)

{//重置查询条件

Ext.getCmp("QueryForm").findById('journalName').reset();

Ext.getCmp("QueryForm").findById('journalOrganizer').reset();

Ext.getCmp("QueryForm").findById('journalLevel').reset();

Ext.getCmp("QueryForm").findById('JournalIsCore').reset();

journal_store.load({params:{start:0,limit:pageSize}});

//数据源从新加载

}

},

'-',

{

text: '添加',

handler: function(btn, pressed)

{

AddJournalInfo(); //添加新的角色信息

}

}, '-',

{

text: '编辑',

handler: function(btn, pressed)

{

var row=Ext.getCmp("id_journal_grid").getSelectionModel().getSelections();//选择行的个数

if(row.length==0)

{

Ext.Msg.alert("提示信息","请您至少选择一个!");

}

else if(row.length>1){

Ext.Msg.alert("提示信息","对不起只能选择一个!");

}else if(row.length==1)

{

EditJournalInfo(row[0]);//传行一行记录直接加载 编辑角色信息

}

}

}, '-',

{

text: '删除',

handler: function(btn, pressed)

{

var row=Ext.getCmp("id_journal_grid").getSelectionModel().getSelections(); //获取选中的行

if(row.length==0)

{

Ext.Msg.alert("提示信息","请您至少选择一个!");

}

else{

Ext.Msg.confirm("提 示!","您确定要删除吗?",function(btn){

if(btn=="yes")

{

DeleteJournalInfo(row);//删除角色信息

}

else

{

}

})

}

}

},'-',

{

text: '综合查询',

handler: function(btn, pressed)

{

Ext.getCmp("QueryForm").toggleCollapse(true);//将formset展开

}

}, '-'

]

五：设置分页

view plaincopy to clipboardprint?

//分页

bbar:new Ext.PagingToolbar({

store:journal_store, //数据源

pageSize:pageSize,

//显示右下角信息

displayInfo:true,

displayMsg:'当前记录 {0} -- {1} 条 共 {2} 条记录',

emptyMsg:"No results to display",

prevText:"上一页",

nextText:"下一页",

refreshText:"刷新",

lastText:"最后页",

firstText:"第一页",

beforePageText:"当前页",

afterPageText:"共{0}页"

})

});

//分页

bbar:new Ext.PagingToolbar({

store:journal_store, //数据源

pageSize:pageSize,

//显示右下角信息

displayInfo:true,

displayMsg:'当前记录 {0} -- {1} 条 共 {2} 条记录',

emptyMsg:"No results to display",

prevText:"上一页",

nextText:"下一页",

refreshText:"刷新",

lastText:"最后页",

firstText:"第一页",

beforePageText:"当前页",

afterPageText:"共{0}页"

})

});

六：设置右键菜单

view plaincopy to clipboardprint?

//为右键菜单添加事件监听器

journal_grid.addListener('rowcontextmenu',rightClickFn);

var rightClick = new Ext.menu.Menu

(

{

items:

[

{

id: 'rMenu1',

handler:AddJournalInfo,//点击后触发的事件

text: '增加角色'

},

{

id:'rMenu2',

text:'编辑角色',

handler:function()

{

JournalEdit();

}

},

{

id:'rMenu3',

text:'删除角色',

handler: function()

{

JournalDelete();

}

}

]

}

);