Extjs2.3相关学习贴士-Grid相关

项目空闲，顺便找了资料研究了一下example里的几个典型应用用于学习，做了一点相关记录，分享之。愿对您有所脾益。

Grid相关

BODY { FONT-FAMILY:Tahoma; FONT-SIZE:10pt } P { FONT-FAMILY:Tahoma; FONT-SIZE:10pt } DIV { FONT-FAMILY:Tahoma; FONT-SIZE:10pt } TD { FONT-FAMILY:Tahoma; FONT-SIZE:10pt }

• 关于firefox中无法显示表格内容

可能个是Grid中的height属性没有设置

关于Ext.data.Store与Ext.data.SimpleStore

SimpleStore为Store的子类具体用法：

                var store=new Ext.data.Store({
                        proxy:new Ext.data.MemoryProxy(mydata),
                        reader:new Ext.data.ArrayReader({},[
                              {name: 'id'},
                                                  {name: 'name'},
                                                  {name: 'detail'}
                        
                        ])
                        
                });

 

                     var store = new Ext.data.SimpleStore({
                                        fields: [
                                           {name: 'id'},
                                           {name: 'name'},
                                           {name: 'detail'}
                                        ],
                                        sortInfo:{field:"id",direction:'ASC'}
                                    });

 

• 在store中删除或添加新的数据后会导致grid中的编号不连续

在store.remove()和add()动作之后使用grid.view.refresh()

获取表格所选取内容

funciton showSelected(){

   var selections = grid.getSelectionModel().getSelections();

   for ( var i = 0;i <selections.length;i++){

         var record= selections[i];

         Ext.Msg.alert('提示',record.get("id"));

   }  

}

为表格中的数据使用默认排序

在Store中设置配置项：

                         sortInfo:{field:"id",direction:'ASC'}

• 为表格添加分页工具条

bbar:new Ext.PagingToolbar({

    pageSize:10,

    store:store,

    displayInfo:true,

    displayMsg:'显示第{0}条到{1}条记录,一共{2}条记录',

    emptyMsg:'没有记录'

})

将JSON作为数据传输格式：

1. 将Proxy通过HTTP获取数据：

proxy:new Ext.data.HttpProxy({url:'xxx,jsp'})

将reader换为JsonReader:

reader:new Ext.data.JsonReader({

   totalProperty:'totalProperty',

   root:'root'},

   [

   {name:'id'},

   {name:'name'},

   {name:'detail}

]

})

初始化时，通过参数去获取希望得到的那部分数据

store.load({params:{start:0,limimt:10}});

在store.load()无法在grid.render()前准备好数据，所以需要设置自动高度(autoHeight:true) 分页工具栏的布局

上方工具栏为tbar,下方工具栏为bbar

Grid的右键事件

1. contextmenu:(Ext.EventObject e)  全局性的右键事件；
2. cellconextmenu:(Grid this,Number rowIndex,Number cellIndex,Ext.EventObject e) 单元格上的右键事件；
3. rowcontextmmenu:(Grid this,Number rowIndex,Ext.EventObject e) 行上的右键事件；
4. headercontextmenu:(Grid this,Number columnIndex,Ext.EventObject e) 表头的右键事件。

为Grid添加右键菜单

                                  var contextmenu = new Ext.menu.Menu({
                        id:'the ContextMenu',
                        items:[{
                                text:'查看详情',
                                handler:function(){}
                                
                                }]
                        });
                        grid.on('rowcontextmenu',function (grid,rowIndex,e){
                                e.preventDefault();
                                grid.getSelectionModel().selectRow(rowIndex);
                                contextmenu.showAt(e.getXY());  
                        });