Ext表格控件

Ext.onReady
   ( 
    /*
    表格控件的数据存放在Store(数据存储器)中
    Record：各个字段的类型
    var r=new MyRecord(....)具体的数据

    Store:可以理解为数据表，包含多个Record。
    包含数据来源(DataProxy)，数据解析（DataReader）等

    相关信息,Store将数据源数据解析为数据集(Record)
    */
    /*//表格控件-最简单的表格--数据源是二维数组
    function()
    {
     var data=[
      [1,'mxh','web','kuailewangzi1212.com.cn'],
      [2,'mxh','web','kuailewangzi1212.com.cn'],
      [3,'mxh','web','kuailewangzi1212.com.cn'],
      [4,'mxh','web','kuailewangzi1212.com.cn'],
      [5,'mxh','web','kuailewangzi1212.com.cn'],
      [6,'mxh','web','kuailewangzi1212.com.cn'],
      [7,'zmm','cs','zhaomimi1212.com.cn']
     ];
     
     var store=new Ext.data.SimpleStore(
      {data:data,//数据源
       fields:['id','name','organization','hompage']//数据解析
      }
     );
     
     var grid=new Ext.grid.GridPanel(
      {
       renderTo:'paneldiv',
       title:'人员信息',
       height:150,
       width:600,
       columns:[
        {header:'项目名称',dataindex:'name'},
        {header:'开发团队',dataindex:'organization'},
        {header:'网址',dataindex:'homepage'}                
       ],
       store:store
       ,autoExpandColumn:1//指定地第二列为自动拉伸列
      }
     ); 
    }*/
    
    /*//表格控件-列排序及隐藏
    function()
    {
     var data=[
      [1,'mxh','web','kuailewangzi1212.com.cn'],
      [2,'mxh','web','kuailewangzi1212.com.cn'],
      [3,'mxh','web','kuailewangzi1212.com.cn'],
      [4,'mxh','web','kuailewangzi1212.com.cn'],
      [5,'mxh','web','kuailewangzi1212.com.cn'],
      [6,'mxh','web','kuailewangzi1212.com.cn'],
      [7,'zmm','cs','zhaomimi1212.com.cn']
     ];
     
     var store=new Ext.data.SimpleStore(
      {data:data,//数据源
       fields:['id','name','organization','hompage']//数据解析
      }
     );
     
     var colM=new Ext.grid.ColumnModel(
      [
       {header:'项目名称',dataIndex:'name',sortable:true},//可排序
       {header:'开发团队',dataIndex:'organization',sortable:true},
       {header:'网址',dataIndex:'homepage',sortable:false}//不可排序
      ]
     );
     
     var grid=new Ext.grid.GridPanel(
      {
       renderTo:'paneldiv',
       title:'人员信息',
       height:150,
       width:600,
       cm:colM,
       store:store
       ,autoExpandColumn:1//指定地第二列为自动拉伸列
      }
     ); 
    }*/
    /*//表格控件-自定义列的渲染
    function()
    {
     var data=[
      [1,'mxh','web','kuailewangzi1212.com.cn'],
      [2,'mxh','web','kuailewangzi1212.com.cn'],
      [3,'mxh','web','kuailewangzi1212.com.cn'],
      [4,'mxh','web','kuailewangzi1212.com.cn'],
      [5,'mxh','web','kuailewangzi1212.com.cn'],
      [6,'mxh','web','kuailewangzi1212.com.cn'],
      [7,'zmm','cs','zhaomimi1212.com.cn']
     ];
     
     var store=new Ext.data.SimpleStore(
      {data:data,//数据源
       fields:['id','name','organization','hompage']//数据解析
      }
     );
     
     var colM=new Ext.grid.ColumnModel(
      [
       {header:'项目名称',dataIndex:'name',sortable:true},//可排序
       {header:'开发团队',dataIndex:'organization',sortable:true},
       {header:'网址',dataIndex:'homepage',sortable:false,renderer:function(value){return value;}}//自定义列的渲染
      ]
     );
     
     var grid=new Ext.grid.GridPanel(
      {
       renderTo:'paneldiv',
       title:'人员信息',
       height:150,
       width:600,
       cm:colM,
       store:store
       ,autoExpandColumn:1//指定地第二列为自动拉伸列
      }
     ); 
    }*/
    /*//表格控件-数据源是Json--对象数组
    function()
    {
     var data=[
      {id:1,name:'mxh',organization:'web',pagehome:'kuailewangzi1212.com.cn'},
      {id:2,name:'mxh',organization:'web',pagehome:'kuailewangzi1212.com.cn'},
      {id:3,name:'mxh',organization:'web',pagehome:'kuailewangzi1212.com.cn'},
      {id:4,name:'mxh',organization:'web',pagehome:'kuailewangzi1212.com.cn'},
      {id:5,name:'mxh',organization:'web',pagehome:'kuailewangzi1212.com.cn'},
      {id:6,name:'mxh',organization:'web',pagehome:'kuailewangzi1212.com.cn'},
      {id:7,name:'zmm',organization:'web',pagehome:'kuailewangzi1212.com.cn'}
     ];//Json数据源
     
     var store=new Ext.data.JsonStore(
      {data:data,//数据源
       fields:['id','name','organization','hompage']//数据解析
      }
     );
     
     var colM=new Ext.grid.ColumnModel(
      [
       {header:'项目名称',dataIndex:'name',sortable:true},//可排序
       {header:'开发团队',dataIndex:'organization',sortable:true},
       {header:'网址',dataIndex:'homepage',sortable:false,renderer:function(value){return value;}}//自定义列的渲染
      ]
     );
     
     var grid=new Ext.grid.GridPanel(
      {
       renderTo:'paneldiv',
       title:'人员信息',
       height:150,
       width:600,
       cm:colM,
       store:store
       ,autoExpandColumn:1//指定地第二列为自动拉伸列
      }
     ); 
    }*/
    
    /*//表格控件-数据源是XML
    function()
    {
     var store=new Ext.data.Store(
      {url:'hello.xml',//数据源
       reader:new Ext.data.XmlReader({record:'row'},['id','name','organization','homepage'])//数据解析
      }
     );
     
     var colM=new Ext.grid.ColumnModel(
      [
       {header:'项目名称',dataIndex:'name',sortable:true},//可排序
       {header:'开发团队',dataIndex:'organization',sortable:true},
       {header:'网址',dataIndex:'homepage',sortable:false,renderer:function(value){return value;}}//自定义列的渲染
      ]
     );
     
     var grid=new Ext.grid.GridPanel(
      {
       renderTo:'paneldiv',
       title:'人员信息',
       height:150,
       width:600,
       collapsible:true,
       cm:colM,
       store:store
       ,autoExpandColumn:1//指定地第二列为自动拉伸列
      }
     );
     
     store.load(); 
    }*/
    
    //表格控件-可编辑的表格
    function()
    {
     var store=new Ext.data.Store(
      {url:'EditHello.xml',//数据源
       reader:new Ext.data.XmlReader({record:'row'},['id','name','sex',{name:'bornDate',type:'date',dateFormat:'Y-n-j'}])//数据解析
      }
     );
     
     var colM=new Ext.grid.ColumnModel(
      [
       {header:'姓名',dataIndex:'name',sortable:true,editor:new Ext.form.TextField()},//可排序、可编辑
       {header:'性别',dataIndex:'sex',sortable:true,editor:new Ext.form.ComboBox({transform:'sexList',triggerAction:'all',lazyRender:true})
       },
       {header:'出生日期',dataIndex:'bornDate',width:120,
        renderer:Ext.util.Format.dateRenderer('Y年m月d日'),
        editor:new Ext.form.DateField({format:'Y年m月d日'})//可编辑并且弹出日期工具
       }//自定义列的渲染
      ]
     );
     
     var grid=new Ext.grid.EditorGridPanel(
      {
       renderTo:'paneldiv',
       title:'人员信息',
       height:150,
       width:600,
       collapsible:true,
       cm:colM,
       store:store,
       autoExpandColumn:2,//指定地第二列为自动拉伸列
       clicksToEdit:1//单击一次变为可编辑，默认为二次
       
      }
     );
     
     store.load(); 
    }
   );