extJS 表格的使用

１、表格GridPanel概述

　　ExtJS中的表格功能非常强大，包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。

　　表格由类Ext.grid.GridPanel定义，继承自Panel，其xtype为grid。ExtJS中，表格Grid必须包含列定义信息，并指定表格的数据存储器Store。表格的列信息由类Ext.grid.Column(以前是由Ext.grid.ColumnModel定义)、而表格的数据存储器由Ext.data.Store定义，数据存储器根据解析的数据不同分为JsonStore、SimpleStroe、GroupingStore等。

２、表格应用示例

　　我们首先来看最简单的使用表格的代码：

 

Ext.onReady(function(){
  var data=[ [1, 'EasyJWeb', 'EasyJF',''],
           [2, 'jfox', 'huihoo',''],
           [3, 'jdon', 'jdon',''],
           [4, 'springside', 'springside',''] ];
  var store=new  Ext.data.SimpleStore({
           data:data,fields: ["id","name","organization","homepage"]
  });
  var grid = new Ext.grid.GridPanel({
    renderTo:"hello",
    title:"中国Java开源产品及团队",
    height:150,
    width:600,
    columns:[{header:"项目名称",dataIndex:"name"},
           {header:"开发团队",dataIndex:"organization"},
           {header:"网址",dataIndex:"homepage"}],
           store:store,
           autoExpandColumn:2
  });
});

３、定制表格显示内容

　　调整column中的renderer，显示丰富多彩的内容。

４、EditorGridPanel

　　可编辑的表格，用于实现在线编辑表格；在column中，通过指定一个editor，也就是Field的实例来实现表格编辑功能。

５、PropertyGrid

　　属性编辑表格，只有固定的两列，一列表示属性名称，另外一列表示属性值。示例：

var grid = new Ext.grid.PropertyGrid({
    title: 'Properties Grid',
    autoHeight: true,
    width: 300,
    renderTo: 'grid-ct',
    source: {
        "(name)": "My Object",
        "Created": new Date(Date.parse('10/15/2006')),
        "Available": false,
        "Version": .01,
        "Description": "A test object"
    }
});

完整代码：

//图通表格示例 grid
function createGrid(){
    var data=[ [1, 'EasyJWeb', 'EasyJF',''],
                   [2, 'jfox', 'huihoo',''],
                   [3, 'jdon', 'jdon',''],
                   [4, 'springside', 'springside',''] ];

        var store=new  Ext.data.SimpleStore({data:data,fields:["id","name","organization","homepage"]});
        var grid = new Ext.grid.GridPanel({
            renderTo:"hello",
            title:"中国Java开源产品及团队",
            height:150,
            width:600,
            columns:[{header:"ID",dataIndex:"id", sortable:true},
                     {header:"项目名称",dataIndex:"name", sortable:true},
                     {header:"开发团队",dataIndex:"organization",sortable:true},
                     {header:"网址",
                         dataIndex:"homepage",
                         sortable:true,
                         renderer:function(v){
                             return v.link(v)
                             //return ""+v+"";
                         }
                     }
                    ],
            store:store,
            autoExpandColumn:2
        });
}

//可编辑表格EditorGrid
function createEditorGrid(){
    var data=[ [1, 'EasyJWeb', 'EasyJF','',new Date()],
                   [2, 'jfox', 'huihoo','',new Date()],
                   [3, 'jdon', 'jdon','',new Date()],
                   [4, 'springside', 'springside','',new Date()]
             ];

        var store=new  Ext.data.SimpleStore({data:data,fields:["id","name","organization","homepage","vdate"]});
        var grid = new Ext.grid.EditorGridPanel({
            renderTo:"hello",
            title:"中国Java开源产品及团队",
            height:150,
            width:600,
            columns:[{header:"ID",dataIndex:"id", sortable:true},
                     {header:"项目名称",dataIndex:"name", sortable:true},
                     {header:"开发团队",dataIndex:"organization",sortable:true,editor: new Ext.form.TextField()},
                     {header:"网址",
                         dataIndex:"homepage",
                         sortable:true,
                         editor: new Ext.form.TextField(), //表格字段可编辑
                         renderer:function(v){
                             return v.link(v)
                             //return ""+v+"";
                         }
                     },
                     {header:"日期",dataIndex:"vdate",sortable:true,editor: new Ext.form.DateField(),
                         renderer:function(v){
                         //Ext对日期类型做了扩展，用format()
                         return v.format("Y-m-d");
                         }
                     }
                    ],
            store:store,
            autoExpandColumn:2
        });
}

//属性编辑表格
function createPropertyGrid(){
        var grid = new Ext.grid.PropertyGrid({
            renderTo:"hello",
            title:"中国Java开源产品及团队",
            //source这个名称不能改
            source:{
                name:"abc",
                ***:"男",
                age:40,
                bornDate: new Date()
            }
        });
        new Ext.Viewport({layout:"fit", items:grid});
}

Ext.onReady(function(){
        //createGrid();
    //createEditorGrid();
    createPropertyGrid();
     });

sdfsf