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'})
  2. 将reader换为JsonReader:
  reader:new Ext.data.JsonReader({
     totalProperty:'totalProperty',
     root:'root'},
     [
     {name:'id'},
     {name:'name'},
     {name:'detail}
  ]
  })
  3. 初始化时，通过参数去获取希望得到的那部分数据
  store.load({params:{start:0,limimt:10}});
  4. 在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());  
                        });