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

一脸伟人痣

 关注

阅读 69

2023-04-26


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(); 

 } 

 } 


 ] 

 } 

 );

相关推荐

grid基本用法，看完就会

残北 72 0 0

docker基本用法总结

祈澈菇凉 91 0 0

BeautifulSoup基本用法总结

全栈顾问 110 0 0

Mysql查询语句基本用法总结

眸晓 77 0 0

awk命令基本用法（一）

码农K 74 0 0

BeautifulSoup基本用法

GG_lyf 84 0 0

argparse基本用法

点亮自己的那盏灯 113 0 0

promise基本用法

楚木巽 80 0 0

Valgrind 基本用法

三次方 200 0 0

postgres 　基本用法

古月无语 121 0 0

精彩评论（0）

0 0 举报