EXT-表格GridPanel

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

//cm是必须的 主要用来数据

function showUrl(value){
    return '<a href="http://www.qq.com">'+value+'</a>';
}
Ext.onReady(function(){ 
    var data=[
    [1,"周文英","李静静","邢笑笑"],
    [2,"王星","魏雪敏","杜江伟"],
    [3,"王晨畅","杨谦","张小超"]
    ];
    var fields=["id","name_1","name_2","name_3"];
    var store=new Ext.data.SimpleStore({
            data:data,
            fields:fields
    });
    var colM=new Ext.grid.ColumnModel([{header:"学号",dataIndex:"id",sortable:true},{header:"学员1",dataIndex:"name_1"},
            {header:"学员2",dataIndex:"name_2"},
                {header:"学员3",dataIndex:"name_3",renderer:showUrl}]);
    var gridPanel=new Ext.grid.GridPanel({
            renderTo:"hello",
            title:"2009届杨职院信息9班同学",
            height:200,
            width:400,
            cm:colM,
            store:store,
            autoExpandColumn:2
    });
 }); 

 

在cm中有些属性：sortable是添加可升序或倒序的。renderer是用来调用一个方法的，在这里主要是给文字加了超链接。

上面的数据如果要可编辑怎么办呢？

Ext.grid.EditorGridPanel:

var data=[
    [1,"周文英","女","1990-05-08"],
    [2,"王星","男","1990-06-04"],
    [3,"王晨畅","男","1990-08-17"]
    ];
    var fields=["id","name","gender","birthday"];
    var store=new Ext.data.SimpleStore({
            data:data,
            fields:fields
    });
    var colM=new Ext.grid.ColumnModel([
    {header:"学号",dataIndex:"id",sortable:true},
    {header:"姓名",dataIndex:"name"},
    {header:"性别",dataIndex:"gender",editor:new Ext.form.ComboBox({transform:"sl",triggerAction:"all",lazyRender:true})},
    {header:"生日",dataIndex:"birthday",width:120,editor:new Ext.form.DateField({format:'Y年m年d日'}),renderer:function(value){   
    if(value instanceof Date){   
        return new Date(value).format("Y年m月d日");   
    }else{   
        return value;   
    }  
}  }
    ]);
    var editorGridPanel=new Ext.grid.EditorGridPanel({
            renderTo:"hello",
            title:"2009届杨职院信息9班同学",
            height:200,
            width:400,
            cm:colM,
            store:store,
            autoExpandColumn:2
    });
 }); 

这里的性别和生日变成了可编辑的。

性别的下拉框衣服于一个<select>标签。

生日这个有点小问题，renderer方法：最开始调用的是Ext.Format.dateRenderer('Y年m月d日')。发现最开始的数据变成了NaN年-NaN月-NaN日。

最后baidu后发现说是源码里面Ext默认将所有的传进来的字符串都format了。所以出现了这个问题。因此方法自己写了。用instatceof来判断是否为Date类型。如果是再格式化。

在火狐浏览器下日期控件显示太宽不正常解决办法：

<style type="text/css">
        .x-date-middle {
        padding-top:2px;padding-bottom:2px;
        width:130px; /* FF3 */
}        
</style>

添加上就Ok了