深入浅出ExtJS 第三章 表格控件

 

3.1 表格的特性简介
>.Ext中的表格功能:包括排序/缓存/拖动/隐藏某一列/自动显示行号/列汇总/单元格编辑等实用功能;
>.表格由类Ext.grid.GridPanel定义,继承自Ext.Panel,其xtype为grid;
>.表格控件必须包含列(columns)定义信息,并指定表格的数据存储器(Ext.data.Store);

 

3.2 制作一个简单的表格
  >1.列的定义是一个JSON数组,它是整个表格的列模型,应该首先创建;
  var columns = [
    {header:'编号',dataIndex:'id'},
    //每一行数据元素描述表格的一列信息;  包含首部显示文本(header),列对应的记录集字段(dataIndex);
    {header:'名称',dataIndex:'name'},
    {header:'描述',dataIndex:'descn'}
  ];

  >2.定义表格中要显示的数据;
  var data = [
    ['1','name1','descn1'],
    ['2','name2','descn2'],
    ['3','name3','descn3']
  ]

  >3.创建一个数据存储对象;表格必须配置的属性;负责把各种各样的原始数据(如二维数组,JSON,XML等)转换成Ext.data.Record类型的对象;
  var store = new Ext.data.ArrayStore({
    data:data,
    fields:[
    //这里定义的3个名称与columns的dataIndex相对应;将data数据与columns列模型链接;
      {name:'id'},
      //{name:'id',mapping:1},    //可以设置mapping来设置列的排序;
      {name:'name'},
      {name:'descn'}
    ]
  });
  store.load();   //初始化数据;
  //store对应两个部分:proxy(指获取数据的方式)和render(指如何解析这一堆数据);

  >4.创建表格
  var grid = new Ext.grid.GridPanel({
    autoHeight:true,
    renderTo:'grid',    //指示Ext将表格渲染到什么地方;
    store:store,
    columns:columns
  })

 

3.3 表格常用功能
3.3.1 部分属性功能
  >1.enableColumnMove       拖放移动列;
  >2.enableColumnResize     改变列宽;
  >3.stripeRows             斑马线效果;
  >4.loadMask               显示"Loading..."

3.3.2 自主决定每列的宽度
//每列默认是100px;
  >1.自定义列宽
  var columns = [
    {header:'编号',dataIndex:'id',width:200}
  ]
  >2.forceFit
  var grid = new Ext.grid.GiidPanel({
    renderTo:'grid',
    forceFit:true         //让每列自适应填满表格;
  });

3.3.3 sortable表格列排序
  var columns = new Ext.grid.ColumnModel([
    {header:'编号',dataIndex:'id',sortable:true}
  ])
  //Ascending:正序; Descending:倒序;

3.3.4 中文排序

3.3.5 显示日期类型数据
//Ext可以从后台取得日期类型的数据,交给表格进行格式化;
  var columns = [{header:'日期',dataIndex:'date',renderer:Ext.util.Format.dateRenderer('Y-m-d')}];
  //renderer的属性值就是Ext提供的日期格式化方法;
  var data = [['1','name1','descn1','1970-01-15T02:58:04']]
  var store = new Ext.data.ArrayStore({
    data:data,
    fields:[{name:'date',type:'date',dateFormat:'Y-m-dTH:i:s'}]
    //type属性告诉ExtJS解析数据时按日期类型处理;
    //dateFormat:将数据中的字符串格式转换成日期格式;
  });

 

3.4 表格渲染
  >1.修改文字颜色样式和添加图片;
  function renderSex(value){
    if(value == 'male'){
      return "<span style='color:red; font-weight:bold'>红男</span><img src="user_male.png" />";
    }else{
      return "<span style='color:green, font-weight:bold'>绿女</span><img src="user_female.png" />";
    };
    //在返回value之前,拼装上相应的HTML和CSS即可;
  };
  var columns = [{header:'性别',dataIndex:'sex',renderer:renderSex}];
  //renderer的值是一个自定义函数;
  >2.其他可用参数
  function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store){
    var str = value+cellmeta+record+rowIndex+columnIndex+store;
    return str;
  }
  //value:将要显示到单元格的值;
  //cellmeta:单元格的属性,主要有id和CSS;
  //record:所在行的数据对象;
  //rowIndex:所在行行号;
  //columnIndex:所在列列号;
  //store:构造表格传递的ds;

 

3.5 给表格的行和列设置颜色
  <style>.yellow-row{ background-color: #FBF8BF !important; }</style>
  Ext.onReady(function(){

    var data = [['boy',0,'#fbf8bf']];     //表格数据;

    var store = new Ext.data.ArraySotre({ //数据存储对象;
      data:data,                          //引入表格数据; 并将数据转换成Ext.data.Record类型的对象;
      fields:[                            //与columns参数对应;    
        {name:'name',type:'string'},    
        {name:'sex',type:'int'},
        {name:'color',type:'string'}
      ]
    });
    store.load();                         //初始化数据;

    var grid = new Ext.grid.GridPanel({
      store:store,                        //引入record数据对象;
      columns:[                           //创建列模型;
        {header:'name',dataIndex:'name'},
        {header:'sex',dataIndex:'sex'}
      ],
      renderTo:'grid',
      viewConfig:{
        enableRowBody:true,
        getRowClass:function(record,rowIndex,p,ds){
          var cls = 'white-row';          //默认是白色;
          switch(record.data.color){      //先查找record对象即store,再查找data属性,再查找到color在data里对应的值;
            case '#fbf8bf':               //匹配值,设置class名;
              cls = "yellow-row"
              break;
          }
          return cls;
        }
      }
    });
  });

 

3.6 自动显示行号和复选框
3.6.1 自动显示行号
  var columns = [
    new Ext.grid.RowNmuberer(),
    //在列模型中加入RowNumberer对象,
    {header:'姓名',dataIndex:'name'}
  ]
  >.删除行/刷新表格
  Ext.get('remove').on('click',function(){
    store.remove(store.getAt(0));         //删除第一条数据;
    grid.view.refresh();                  //刷新视图重新加载store，并重新渲染模板的数据;
  })

3.6.2 复选框
  var sm = new Ext.selection.CheckboxModel({checkOnly:true});
  //CheckboxModel会在每行数据前添加一个复选框;
  //checkOnly属性表示是否可以通过选中行进行选取,还是必须选中复选框选取;
  var grid = new Ext.grid.GridPanel({
    ...,
    selModel:sm
    //selModel在总体上控制用户对表格的选择功能;
  })

 

3.7 选择模型
>1.RowModel(行选择模型)
//在定义Ext.grid.GridPanel时,默认使用RowModel--行选择模型;
  var grid = new Ext.grid.GridPanel({
    ...,
    sm:new Ext.grid.RowModel({singleSelect:true})     //设置只能选中一行;
  })
>2.CellModel(单元格选择模型)
//在EditorGrid里默认使用CellModel;
>3.选中行信息显示
  grid.on('itemclick',function(){
    //表格绑定单机事件;
    var selected = grid.getSelectionModel().selected; //gSM():返回正在使用的选择模型   selected:所有当前已选择的记录的混合集合
    for(var i=0; i<selected.getCount(); i++){
      var record = selected.get(i);
      Ext.Msg.alert('提示',record.get("id")+","+record.get("name")+","+record.get("descn"));
    }
  })

 

3.8 表格视图--Ext.grid.GridView
//表格控件都遵循MVC模型
//Ext.data.Store:可看做模型(Model);
//Ext.grid.GridPanel:设置的各种监听器可看做控制器(Controller);
//Ext.grid.GridView:对应的就是视图(View);
//通常情况下不需要自行创建Ext.grid.GridView的实例,Ext.grid.GridPanel会自动生成对应的实例,使用默认的样式将表格显示到页面上;
//若希望操作Ext.grid.GridView的属性时,可以通过Ext.grid.GridPanel的getView()函数来获取当前表格使用的视图实例;
//与GridView相关的操作都集中在视图的显示功能部分;grid.getView()必须在创建Ext.grid.GridPanel之后调用,它只能获得Ext.grid.GridPanel中创建好的GridView实例;
//可以使用Ext.grid.GridPanel的viewConfig参数,在创建GridView时设置一些初始参数;
  var grid = new Ext.grid.GridPanel({   //控制器Controller;
    store:new Ext.data.ArrayStore({     //模型Model;
      data:data,
      fields:meta,
      autoLoad:true
    }),
    columns:meta,
    renderTo:'grid',                    //GridPanel自动创建对应的实例,即视图View;
    width:450,
    height:80,
    viewConfig:{                        //为创建的GridView设置初始参数;
      columnsText:'显示的列',           //中文显示;
      scrollOffset:30,                  //滚动条的宽度,默认是20px;
      sortAscText:'升序',
      sortDescText:'降序',
      forceFit:true                     //自适应列宽;
    }
  });

 

3.9 表格分页
3.9.1 为表格添加分页工具条
  var grid = new Ext.grid.GridPanel({
    renderTo:'grid',
    autoHeight:true,
    store:store,
    columns:columns,
    bbar:new Ext.PagingToolvar({
      pageSize:10,                      //每页显示几条数据;
      store:store,
      displayInfo:true,                 //是否显示数据信息;
      displayMsg:'显示第{0}条到{1}条记录,一共{2}条',
      //用来显示有数据时的提示信息;
      emptyMsg:'没有记录'               //没有记录时显示的信息;
    })
  });
  store.load();                         //必须在构造表格以后执行,否则分页工具条将不起作用;
  //将分页工具条和store相关联,从而实现与表格共享数据模型;

3.9.2 通过后台脚本获得分页数据
  var columns = [{header:'编号',dataIndex:'id'}]

  var store = new Ext.data.Store({
    //Store:仓库/存储;它封装了一个客户端缓存,用于存储Model对象;Store通过一个代理Proxy来加载数据,并提供函数来排序/过滤以及查询内部所包含的model实例;
    //而Ext.data.ArrayStore是一个小巧的帮助类,更方便的从一个数组的数据来创建Ext.data.Store;
    proxy:{                           //换掉proxy,不再到内存中查找,而是通过HTTP获得想要的数据;
      type:'ajax',                    //表示使用Ajax向后台请求数据;
      url:'xxx.jsp',                  //请求地址;
      reader:{                        //不再是解析简单的数组,而是后台传过来的JsonReader,
        type:'json',                  //所以reader设置type为json;
        totalProperty:'totalProperty',//对应JSP中的代码,数据的总数;
        root:'root',                  //JSP中的数据数组;
        idProperty:'id'
      }
    },
    fields:[
      {name:'id'},
      {name:'name'},
      {name:'descn'}
    ]
  });

  var grid = new Ext.grid.GridPanel({...(分页代码)});
  store.load({params:{start:0,limit:10}});  //在初始化时通过传递对应的分页参数去获取希望得到的数据;

3.9.3 分页工具条在表格顶部
  var grid = new Ext.grid.GridPanel({
    ...
    tbar:new Ext.PagingToolvar({...})       //tbar:顶部工具条;bbar:底部工具条;
  });

3.9.4 Ext前台分页
//需要引用PagingMemoryProxy.js,从本地数组读取数据,实现内存分页;

 

3.10 后台排序
//把排序信息提交到后台,由后台排序信息组装到SQL里;然后再由后台将处理好的数据返回给前台;
  var store = new Ext.data.Store({
    proxy:{...},
    fields:[...],
    remoteSort:true                 //是否允许远程排序,默认值是false;
    //向后台提交两个参数:sort(要排序的字段)和dir(升序或降序);
  });

 

3.11 多重排序
//对"Rating"和"Salary"两列进行排序;
  store.sort([{
    property:'rating',
    direction:'DESC'
  },{
    property:'salary',
    direction:'ASC'
  }]);

 

3.12 可编辑表格控件--EditorGrid
3.12.1 制作一个EditorGrid;
  var columns = [{header:'编号',dataIndex:'id',
  editor:{allowBlank:false}}]      //表格不能为空; 
  //为每列添加了TextField插件;
  
  var grid = new Ext.grid.GridPanel({
    columns:columns,
    store:store,
    selType:'cellmodel',          //设置选择模型为单元格模型;默认是:rowmodel;行模型;    
    plugins:[
      Ext.create('Ext.grid.plugin.CellEditing',{    //启用CellEditing插件;
        clidksToEdit:1            //设置单击激活编辑器; 默认双击;
      })
    ]
  });

3.12.2 添加一行数据
  var grid = new Ext.grid.GridPanel({
    autoHeight:true,
    renderTo:'grid',
    store:store,
    columns:columns,
    selType:'cellmodel',
    plugins:[
      Ext.create('Ext.grid.plugin.CellEditing',{
        clicksToEdit:1
      })
    ],
    tbar:['-',{                 //创建顶部工具条; '-':在页面显示'|';
      text:'添加一行',          //按钮显示值;
      handler:function(){       //定义按钮按下时执行的函数;
        var p = {
          id:'',name:'',descn:''//新添加的行对应的列属性;
        };
        store.insert(0,p);      //在第一行的上面添加一个新行;
      }
    },'-',{
      text:'删除一行',
      handler:function(){
        Ext.Msg.confirm('信息','确定要删除?',function(btn){
          //弹出确认窗口;
          if(btn == 'yes'){     //用户选中"yes";
            var sm = grid.getSelectionModel();  //定位选中单元格对象;
            var record = sm.getSelection()[0];  //单元格对应的行模型;
            store.remove(record);               //删除对应行;
          }
        })
      };
    },'-']
  });

3.12.3 保存修改结果
  接上..,'=',{
    text:'保存',                //添加保存按钮;
    handler:function(){
      var m = store.getModifiedRecrods().slice(0);
      //从Store(数据存储对象)获得所有record(表格行对象);
      var jsonArray = [];
      Ext.each(m,function(item){
        //遍历m数组,并对其中每个元素调用fn函数;
        jsonArray.push(item.data);
      });

      Ext.Ajax.request({
        method:'POST',
        url:'xxx.jsp',
        success:function(response){
          Ext.Msg.alert("信息",response.responseText,function(){
            store.reload();
          })
        },
        failure:function(){
          Ext.Msg.alert("错误","与后台连接出现问题");
        },
        params:'data='+encodeURIComponent(Ext.encode(jsonArray))
      });
    }
  }

3.12.4 限制输入数据的类型
  var comboData = [
    [0,'新版ext教程'],
    [1,'ext在线支持'],
    [2,'ext扩展']
  ];
  //数据部分单独抽离出来,为了在editor和renderer里保持数据同步;
  var columns = [{
    header:'数字列',
    dataIndex:'number',
    editor:new Ext.form.NumberField({
      allowBlank:false,         //不为空;
      allowNegative:false,      //不为负数;
      maxValue:10               //最长10位;
    })
  },{
    header:'选择列',
    dataIndex:'combo',
    editor:new Ext.form.ComboBox({
      //传统的<input>和<select>域的综合;用户可以自由的在域中键入;
      store:new Ext.data.SimpleStore({
        fields:['value','text'], //绑定模型的字段;
        data:comboData           //读写数据comboData;
      }),
      emptyText:'请选择',
      mode:'local',
      triggerAction:'all',       //触发器被点击时的操作;
      valueField:'value',        //相关的数据值绑定到ComboBox;    
      displayField:'text',  
      editable:false             //只读模式;
    }),
    renderer:function(value){    //渲染函数;
      return comboData[value][1];//返回comboData数组里的text值;
    }
  },{
    header:'日期列',
    dataIndex:'data',
    editor:new Ext.form.DateField({
      //提供一个带有日期选择器(picker)下拉框并会自动进行日期验证的日期输入表单项;
      format:'Y-m-d',            //日期格式;
      minValue:'2007-12-14',     //日期最小值;
      disabledDays:[0,6],        //禁止选择的日期;
      disabledDaysText:'只能选择工作日'
    }),
    renderer:function(value){
      return Ext.Date.format(value,'Y-m-d');
      //返回格式化的日期字符串;
    }
  },{
    header:'判断列',
    dataIndex:'check',
    editor:new Ext.form.Checkbox({
      allowBlank:false
    }),
    renderer:function(value){
      return value ? '是' : '否';
    }
  }];

 

3.13 表格属性控件--PropertyGrid
3.13.1 简介
//PropertyGrid(属性表格)扩展自EditGrid,可以直接编辑右边的内容;
  var grid = new Ext.grid.PropertyGrid({
    title:'属性表格',   //表格标题;
    autoHeight:true,    //自适应高度;
    width:300,
    renderTo:'grid',
    viewConfig:{        //初始化设置表格属性;
      forceFit:true     //表格列自适应;
    },
    source:{            //JSON数据,指定了表格里的key和value;
      "名字":"不说",    //string对应TextField编辑器;
      "创建时间":new Date(Date.parse('12/15/2014')),  //date对应DateField编辑器;
      "是否有效":false, //bool对应ComboBox编辑器(下拉列表);
      "版本号":.02,     //number对应NumberField编辑器;
    }
  });

3.13.2 只读表格
//PropertyGrid没有直接关闭编辑功能的属性;可以通过Ext的事件监听器实现;
  grid.on("beforeedit",function(e){
    e.cancel = true;
    return false;
  });

 

3.14 分组表格控件--GroupingGrid
  var meta = [
    {header:'index',dataIndex:'id',name:'id'}
    {header:'sex',dataIndex:'sex',name:'sex'}
    {header:'name',dataIndex:'name',name:'name'}
    {header:'descn',dataIndex:'descn',name:'descn'}
  ]
  var data = [
    ['1','male','name1','descn1']
    ['2','female','neme2','descn2']
  ]
  var grid = new Ext.grid.GridPanel({
    store:new Ext.data.ArrayStore({ //数据存储器;
      fields:meta,
      data:data,
      groupField:'sex',             //需要分组的域;分组行;
      sortInfo:{field:'id',direction:'ASC'} //排序列;
    }),
    columns:meat,
    features:[{ftype:'grouping'}],  //分组设置;!!!
    renderTo:'grid',
    autoHeight:true
  });

  Ext.get('expand').on('click',function(){
    grid.view.features[0].expandAll();  //展开所有分组;
  });
  Ext.get('collapse').on('click',function(){
    grid.view.features[0].collapseAll();//折叠所有分组;
  });
  Ext.get('one').on('click',function(){ //先判断再操作;
    var feature = grid.view.features[0];//获得feature的实例;
    if(feature.isExpanded('female')){
      feature.expand('female');
      feature.collapse('female');
    }else{
      feature.collapse('female');
      feature.expand('female');
    }
  });

 

3.15 可拖拽的表格
3.15.1 拖放改变表格的大小
  var rz = new Ext.Resizable(grid.getE1(),{ //放在render之后;
    wrap:true,        //在构造Resizable()函数时,自动在指定id的外边包裹一层div
    minHeight:100,
    pinned:true,      //可拖拽提示,一直显示在表格下边;
    handles:'s'       //下边可拖拽;
  });
  rz.on('resize',function(resizer,width,height,event){
    grid.setHeight(height);
    //在拖拽完成之后,调用setHeight()方法修改自己的大小;
  })

3.15.2 在同一个表格里拖放
  var grid = new Ext.grid.GridPanel({
    renderTo:'grid',store:store,coluns:columns,
    viewConfig:{
      plugins:{       //提供了插件的注册表,通过ptype助记码来编入索引;
        ptype:'gridviewdragdrop'
      }
    }
  });

3.15.3 表格之间的拖放
//两个表格都设置了gridviewdragdrop插件,即可互相拖放;
  var grid1 = new Ext.grid.GridPanel({
    ..
    viewConfig:{
      plugins:{ptype:'gridviewdragdrop'}
    }
  });
  var grid2 = new Ext.grid.GridPanel({
    ..
    viewConfig:{
      plugins:{ptype:'gridviewdragdrop'}
    }
  });

 

3.16 表格与右键菜单
  var contextmenu = new Ext.menu.Menu({
    id:'theContextMenu',
    items:[{
      text:'查看详情',
      handler:function(){..}//右键函数;
    }]
  });
  grid.on('itemcontextmeun',function(view,record,item,index,e){
    e.preventDefault();     //e:事件对象; 禁止浏览器默认右键菜单;
    contextmenu.showAt(e.getXY());  //显示自定义右键菜单;
  });

 

3.17 基于表格的扩展插件
3.17.1 行编辑器
  columns:[{
    header:'Email',
    dataIndex:'email',
    width:160,
    editor:{
      xtype:'textfield',  //替代全类型创建对象;
      allowBlank:false,
      vtype:'email'
    }
  }]
  plugins:[rowEditing],   //行编辑器控件;

3.17.2 进度条分页组件
3.17.3 缓冲式表格视图
3.17.4 分组表头
  var grid = Ext.create('Ext.grid.Panel',{
    columnLines:true,
    columns:[{
      text:'Company',
      flex:1,
      sortable:false,
      dataIndex:'company'
    },{
      text:'Stock Price',
      columns:[{
        text:'Price',
        renderer:'usMoney',
        dataIndex:'price'
      },{
        text:'Change',
        renderer:change,
        dataIndex:'change'
      }]
    }]
  });
3.17.5 锁定列