ExtJs系列之Grid

**
* 表格综合演绎(表格基本组成，渲染特殊类型，自定义渲染，选择模型，分页)
*/

/*
Ext.onReady(function(){

//自定义渲染器
var renderSex = function(value){
  return (value=="man")?"男":"女";
};

//复选模型(行选择模型的子类)
var sm = new Ext.grid.CheckboxSelectionModel({
  //取消选择单元格即选中此行，只让用户选中复选框才能选中此行
     handleMouseDown:new Ext.emptyFn()
});

//列模型
var cm = new Ext.grid.ColumnModel(
     //每一项定义一列
     [
       //行号
       new Ext.grid.RowNumberer(),
       //复选框
       sm,
      {header:"编号",dataIndex:"id",sortable:true},
      {header:"名称",dataIndex:"name"},
      //通过自定义渲染器渲染性别
      {header:"性别",dataIndex:"sex",renderer:renderSex},
      {header:"描述",dataIndex:"desc"},          
      //按指定日期格式渲染日期
      {header:"日期",dataIndex:"date",type:"date",renderer:new Ext.util.Format.dateRenderer("Y年m月d日"),sortable:true}
     ]
);

//数据
var data = [
     ["1","name1","man","desc1","1970-01-15T02:58:04"],
     ["2","name2","femail","desc2","1970-01-15T02:58:04"],
     ["3","name3","man","desc3","1970-01-15T02:58:04"],
     ["4","name4","femail","desc4","1970-01-15T02:58:04"],
     ["5","name5","man","desc5","1970-01-15T02:58:04"]
];

//仓库
var store = new Ext.data.Store({
  //数据来源
     proxy:new Ext.data.MemoryProxy(data),
     //解析方式
     reader:new Ext.data.ArrayReader({},[
         {name:"id"},
         {name:"name"},
         {name:"sex"},
         {name:"desc"},
         //按指定日期格式解析日期
         {name:"date",type:"date",dateFormat:"Y-m-dTH:i:s"}
     ])
});


//定义表格面板,指定列模型，仓库，选择模型(默认行选择模型)
    var grid = new Ext.grid.GridPanel({
     width:500,
     autoHeight:true,
     //列重新计算后自动填满[Ext.grid.GridView]
     viewConfig:{
         forceFit:true,
         columnsText:"显示的列",
         sortAscText:"升序",
         sortDescText:"降序"
     },
        store:store,
        cm:cm,
        sm:sm,
        bbar:new Ext.PagingToolbar({
            pageSize:5,
            //将分页工具条与Ext.data.Store关联，从而共享数据模型
            store:store,
            displayInfo:true,
            displayMsg:"显示第 {0} - {1}条记录,共 {2} 条记录",
            emptyMsg:"没有记录"
        }),
        renderTo:"grid"
    });
   
    store.load();
   
    Ext.get("removeButton").on("click",function(){
        store.remove(store.getAt(1));
        //删除后获取表格视图,刷新表格
        grid.view.refresh();
    });
   
    grid.on("click",function(){
        var selections = grid.getSelectionModel().getSelections();
        for(var i=0;i<selections.length;i++){
         var record = selections[i];
         Ext.Msg.alert("提示","您所选中的行的编号为"+record.get("id")+",名称为"+record.get("name"));
        }
    });
});
*/

/**
* 后台分页
*/


//换掉proxy,不再到内存中查找，而是通过HTTP获得
//解析器换成JsonReader
Ext.onReady(function(){

//自定义渲染器
var renderSex = function(value){
  return (value=="man")?"男":"女";
};

//列模型
var cm = new Ext.grid.ColumnModel(
     //每一项定义一列
     [
       //行号
       new Ext.grid.RowNumberer(),
       //复选框
      {header:"编号",dataIndex:"id",sortable:true},
      {header:"名称",dataIndex:"name"},
      //通过自定义渲染器渲染性别
      {header:"性别",dataIndex:"sex",renderer:renderSex},
      {header:"描述",dataIndex:"desc"},          
      //按指定日期格式渲染日期
      {header:"日期",dataIndex:"date",type:"date",renderer:new Ext.util.Format.dateRenderer("Y年m月d日"),sortable:true}
     ]
);

//仓库
var store = new Ext.data.Store({
  //数据来源
     proxy:new Ext.data.HttpProxy({url:"http://localhost:8000/ExtJs/grid/data.jsp"}),
     //解析方式
     reader:new Ext.data.JsonReader({
         totalProperty:"totalProperty",
         root:"root"
     },[
         {name:"id"},
         {name:"name"},
         {name:"sex"},
         {name:"desc"},
         //按指定日期格式解析日期
         {name:"date",type:"date",dateFormat:"Y-m-dTH:i:s"}
     ])
});


//简化仓库 JsonStore = Store + HttpProxy + JsonReader
/*
var fields = [
         {name:"id"},
         {name:"name"},
         {name:"sex"},
         {name:"desc"},
         //按指定日期格式解析日期
         {name:"date",type:"date",dateFormat:"Y-m-dTH:i:s"}
     ];

var store = new Ext.data.JsonStore({
     url:"http://localhost:8000/ExtJs/grid/data.jsp",
     totalProperty:"totalProperty",
     root:"root",
     fields:fields
});
*/

//定义表格面板,指定列模型，仓库，选择模型(默认行选择模型)
    var grid = new Ext.grid.GridPanel({
     width:500,
     autoHeight:true,
     //列重新计算后自动填满[Ext.grid.GridView]
     viewConfig:{
         forceFit:true,
         columnsText:"显示的列",
         sortAscText:"升序",
         sortDescText:"降序"
     },
        store:store,
        cm:cm,
        bbar:new Ext.PagingToolbar({
            pageSize:5,
            //将分页工具条与Ext.data.Store关联，从而共享数据模型
            store:store,
            displayInfo:true,
            firstText:"首页",
            lastText:"尾页",
            prevText:"上一页",
            nextText:"下一页",
            displayMsg:"显示第 {0} - {1}条记录,共 {2} 条记录",
            emptyMsg:"没有记录"
        }),
        renderTo:"grid"
    });
   
    store.load({params:{start:0,limit:5}});
   
});


/**
* 数据校验
*/
/*
for(var i=0;i<records.length;i++){
  var record = records[i];
  var fields = record.fields.keys;
  for(var j=0;j<fields.length;j++){
   var name = fields[j];
   var value = record.data[name];
   var colIndex = cm.findColumnIndex(name);
   var rowIndex = store.indexOfId(record.id);
   var editor = cm.getCellEditor(colIndex).field;
  
   if(!editor.validateValue(value)){
    Ext.Msg.alert("提示","请确保输入的数据正确",function(){
        grid.startEditing(rowIndex.colIndex);
    });
    return;
   }
  }
}
*/
/**
  * 限制输入的数据类型
  */
/*
//放到grid里显示的原始数据
var data = [
    [1.1,1,new Date(),true],
    [2.2,2,new Date(),false],
    [3.3,0,new Date(),true],
    [4.4,1,new Date(),false],
    [5.5,2,new Date(),true]
];

//现在分别对这5列设置各自的编辑器

var comboData = [
    ["0","新版Ext教程"],
    ["1","Ext在线支持"],
    ["2","Ext扩展"]
];

var cm = new Ext.grid.ColumnModel([{
    header:"数字列",
    dataIndex:"number",
    editor:new Ext.grid.GridEditor(new Ext.form.NumberField({
        allowBlank:false,
        allowNegative:false,
        maxValue:10
    }))
},{
    header:"选择列",
    dataIndex:"combo",
    editor:new Ext.grid.GridEditor(new Ext.form.ComboBox({
        store:new Ext.data.SimpleStore({
            fields:["value","text"],
            data:comboData
        }),
        emptyText:"请选择",
        mode:"local",
        triggerAction:"all",
        valueField:"value",
        displayField:"text",
        reanOnly:true
    })),
    renderer:function(value){
     return comboData[value][1];
    }
},{
    header:"日期列",
    dataIndex:"data",
    editor:new Ext.grid.GridEditor(new Ext.form.DateField({
        format:"Y-m-d",
        minValue:"2007-12-14"
    })),
    renderer:function(value){
     return value.format("Y-m-d");
    }
},{
    header:"判断列",
    dataIndex:"check",
    editor:new Ext.grid.GridEditor(new Ext.form.Checkbox({
        allowBlank:false
    })),
    renderer:function(value){
     return value?"是":"否";
    }
}
]);
*/