Extjs的Grid

1.data store 类型:
• Simple (Array)(数组)
• XML
• JSON

a.客户端的数据
定义数组
var store = new Ext.data.Store({ 
  data: [      [        1, 
      "Office Space", 
     
"Mike Judge", 
     
"1999‐02‐19", 
     
1, 
     
"Work Sucks", 
     
"19.95", 
     
1 
    ],[ 
     
3, 
     
"Super Troopers", 
     
"Jay Chandrasekhar", 
     
"2002‐02‐15", 
     
1, 
     
"Altered State Police", 
     
"14.95", 
     
1 
    ] 
    //...more rows of data removed for readability...// 
  ],    reader: new Ext.data.ArrayReader({id:'id'}, [ 
    'id', 
    'title', 
    'director', 
    {name: 'released', type: 'date', dateFormat: 'Y‐m‐d'}, 
    'genre', 
    'tagline', 
    'price', 
    'available' 
 
] 
}); 
b.服务端的数据-xml
var store = new Ext.data.Store({ 
  url: 'movies.xml', //xml的路径
  reader: new Ext.data.XmlReader({ 
    record:'row', 
    id:'id' 
  }, [      'id', 
    'coverthumb', 
    'title', 
    'director', 
    {name: 'released', type: 'date', dateFormat: 'Y‐m‐d'}, 
    'genre', 
    'tagline', 
    {name: 'price', type: 'float'}, 
    {name: 'available', type: 'bool'} 
  ])  
}); 
store.load(); //加载到内存
c.josn
var store = new Ext.data.Store({ 
    url: 'movies.json', 
    reader: new Ext.data.JsonReader({ 
      root:'rows', 
      id:'id' 
     }, [ 'id', 
          'coverthumb', 
          'title', 
          'director', 
           {name: 'released', type: 'date', dateFormat: 'Y‐m‐d'}, 
          'genre', 
          'tagline', 
           {name: 'price', type: 'float'}, 
           {name: 'available', type: 'bool'} 
     ])  
}); 
store.load();


显示
Ext.onReady(function(){ 
  // add your data store here 
  var grid = new Ext.grid.GridPanel({ 
    renderTo: document.body, 
    frame:true, 
    title: 'Movie Database', 
    height:200, 
    width:500, 
    store: store, 
    columns: [ 
      {header: "Title", dataIndex: 'title'}, 
      {header: "Director", dataIndex: 'director'}, 
      {header: "Released", dataIndex: 'released', 
      renderer: Ext.util.Format.dateRenderer('m/d/Y')}, 
      {header: "Genre", dataIndex: 'genre'}, 
      {header: "Tagline", dataIndex: 'tagline'} 
    ]    });  
});

2.特殊字段的设置
a.日期
renderer: Ext.util.Format.dateRenderer('m/d/Y')
b.隐藏列
第一种
{header: 'Tagline', dataIndex: 'tagline', hidden: true}
第二种
Var colmodel = grid.getColumnModel();
colmodel.setHidden(colmodel.getIndexById('tagline'),true);
c.合并

{header: 'Title', dataIndex: 'title', renderer: title_tagline} 
function title_tagline(val, x, store){ 
    return '<b>'+val+'</b><br>'+store.data.tagline; 
}

d.引入图片

{header: 'Cover', dataIndex: 'coverthumb', renderer: cover_image} 
function cover_image(val){ 
   return '<img src=images/'+val+'>'; 
}

f.客户端排序
第一种
{header: 'Tagline', dataIndex: 'tagline', sortable: true}
第二种
var colmodel = grid.getColumnModel();
colmodel.getColumnById('tagline').sortable = true;
g.列的托拽
不可移动:enableColumnMove: false
h.selection model
• CellSelectionModel:让用户只能选择单一的单元格;
• RowSelectionModel:让用户选择完整的行;
• ColumnSelectionModel:让用户选择完整的列;
• CheckBoxSelectionModel:让用户使用 checkbox(复选框)来做行的选择;
例

sm: new Ext.grid.RowSelectionModel({ 
  singleSelect: true, 
  listeners: {      
               rowselect: { 
                     fn: function(sm,index,record) { 
                        .Msg.alert('You Selected',record.data.title); 
      } 
    }    }  
})

k.根据列名获得列的序列号
var cm = grid.getColumnModel(); //grid表格的名称
var pi = cm.getIndexById('price'); //price列的名称
l.分页
bbar: new Ext.PagingToolbar({
pageSize: 3, //每页最多显示3条
store: store //数据的来源
})
n.分组

var store = new Ext.data.GroupingStore({ 
  url: 'movies.json', 
  sortInfo: { 
      field: 'genre', 
      direction: "ASC" 
  }, 
  groupField: 'genre', 
  reader: new Ext.data.JsonReader({ 
       root:'rows', 
       id:'id' 
  }, // reader column model here //) 
}); 
在grid定义中最后加上
view: new Ext.grid.GroupingView()

猜你喜欢