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

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

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

一：首先定义grid的数据源

 //初始化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}}); 

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

//--------------------------------------------------列选择模式
    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

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
		        },

四：定义工具栏

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展开
                    
                    }
                }, '-'
		        ]

五：设置分页

//分页
		        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}页"
                  	})
            });

六：设置右键菜单

 //为右键菜单添加事件监听器
       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();
                        }
                    }
                    
                ]
            }
        );

 

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/goldlqch/archive/2009/05/25/4214178.aspx