ExtJs之表格控件

一、 功能：排序、拖动、隐藏某一列、自动显示行号、单元格编辑等。

二、由类Ext.grid.GridPanel定义，继承自Panel，xtype为grid，列信息由类Ext.grid.ColumnModel定义，数据存储由Ext.data.Store定义。数据存储器根据解析的数据部同分为JsonStore、SimpleStore、GroupingStore等。

  一个简单的使用表格控件的例子：

 

function ShowUrl(value){
  alert(value);
};
Ext.onReady(function(){
  //定义一个数组
  var data = [
              [1,'标题1','内容1','详细内容1'],
              [2,'标题2','内容2','详细内容2'],
              [3,'标题3','内容3','详细内容3']
            ];

  //定义个数据存储器（必须）
  var store = new Ext.data.SimpleStore({
              data:data,
              fields:["id","title","content","url"]
            });

  //定义列信息（必须）
  var colM = new Ext.grid.ColumnModel(
             { header:"ID",dataIndex:"id",sortable:true },
             { header:"标题",dataIndex:"title",sortable:true },
             { header:"内容",dataIndex:"content",sortable:true },
             { header:"链接",dataIndex:"url",sortable:true,renderer:ShowUrl});

  //创建一个GridPanel  
  var grid = Ext.grid.GridPanel({
             title:"测试标题",
             height:150,
             width:600,
             cm:colM,
             store:store,
             autoExpandColumn:2,
             renderTo:"htmlId"  //渲染表格到ID为htmlId的容器中
  });
})

   header列头显示的文本、dataIndex列对应的记录集字段（上面的fields）、sortable列是否可排序、renderer列的渲染函数、ShowUrl为自定义函数

　　上面的例子虽然简单，但是创建一个表格应该需要哪些准备元素都一一标明出来。对于需求复杂的表格，只是针对Ext.data.Store 的设定。接下来我们将要讨论针对不同的需求对数据存储器的复杂应用。

 

转载于:https://www.cnblogs.com/mdorg/archive/2012/12/14/2817787.html