extjs 4 学习小结5
一 GRID组件

   1 普通的ext.grid.panel
       Ext.onReady(function(){
//创建表格数据
var datas = [
[100,'张三',24],
[200,'李四',30],
[300,'王五',29]
];
//创建Grid表格组件
Ext.create('Ext.grid.Panel',{
title : '简单Grid表格示例',
renderTo: Ext.getBody(),
width:200,
height:130,
frame:true,
viewConfig: {
forceFit : true,
            stripeRows: true//在表格中显示斑马线
        },
store: {//配置数据源
        fields: ['id','name','age'],//定义字段
        proxy: {
            type: 'memory',//Ext.data.proxy.Memory内存代理
            data : datas,//读取内嵌数据
            reader : 'array'//Ext.data.reader.Array解析器
        },
        autoLoad: true//自动加载
    },
columns: [//配置表格列
{header: "id", width: 30, dataIndex: 'id', sortable: true},
{header: "姓名", width: 80, dataIndex: 'name', sortable: true},
{header: "年龄", width: 80, dataIndex: 'age', sortable: true}
]
});
});

    2 分别有boolean,number,data,action等动作列
          columns: [//配置表格列
{header: "姓名", width: 50, dataIndex: 'name'},
{header: "组长", width: 50, dataIndex: 'leader',
xtype: 'booleancolumn',//Ext.grid.column.Boolean布尔列
trueText: '是',
falseText: '否'
},
{header: "生日", width: 100, dataIndex: 'birthday',
xtype : 'datecolumn',//Ext.grid.column.Date日期列
format : 'Y年m月d日'//日期格式化字符串
},
{header: "薪资", width: 50, dataIndex: 'salary',
xtype: 'numbercolumn',//Ext.grid.column.Number数字列
format:'0,000'//数字格式化字符串
}
]

   3 ACTION动作列，比如CRUD的按钮及相应的事件
      {header: "操作", width: 70,
xtype: 'actioncolumn',//Ext.grid.column.Action动作列
            items: [{
                icon: 'images/edit.gif',//指定编辑图标资源的URL
                handler: function(grid, rowIndex, colIndex) {
                //获取被操作的数据记录
                    var rec = grid.getStore().getAt(rowIndex);
                    alert("编辑 " + rec.get('name'));
                }
            },{
                icon: 'images/del.gif',//指定编辑图标资源的URL
                handler: function(grid, rowIndex, colIndex) {
                    var rec = grid.getStore().getAt(rowIndex);
                    alert("删