ExtJS实现完美Grid(1) 

 这篇文章要实现一个简单的grid，主要功能包括展示、分页、添加、修改、删除、单选、复选和功能列等。
1、首先我们要在页面嵌入一个div标签和引入我们的grid.js文件如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>grid.htm</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="../css/ext-patch.css" />
   <script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../ext/ext-all.js"></script>
    <script type="text/javascript" src="../ext/build/locale/ext-lang-zh_CN.js"></script>    
    <script type="text/javascript" src="../js/grid.js" defer="defer"></script>  
</head>
<body style="margin: 0;overflow:hidden">
<div id="grid" style="width:100%;height:100%"></div>
</body>
</html>

2、然后写js,首先初始化提示信息，在grid.js最上边加上

Ext.QuickTips.init();// 浮动信息提示

3、定义后台服务地址和分页变量

//定义分面参数
var gridUrl='../server/gridserver.jsp'; //取数据的服务页
var start=0;//读取的起始行
var limit=10;//每次读取的行数

4、在onReady事件中加入我们的功能实现，首先定义一个数据对象，相当于C++中的结构体，如下

//定义数据对象
var Person=Ext.data.Record.create([
   {name:'name',type:'string'},
   {name:'sex',type:'string'},
   {name:'birthday',type:'date',dateFormat:'Y-m-d'},
   {name:'office',type:'string'},
   {name:'salary',type:'string'},
   {name:'tel',type:'string'},
   {name:'QQ',type:'string'},
   {name:'email',type:'string'},
   {name:'address',type:'string'},
   {name:'action',type:'string'}
]);

注意type不要写错

5、定义列的选择属性，再定义一个控制选择模式的按扭

var sm = new Ext.grid.CheckboxSelectionModel({singleSelect:true});//可设置选择模式
//控制单选或复选
var DSButton=new Ext.Toolbar.Button({
   text:'可复选'
})

6、定义列、列的格式化显示及设置编辑时的控件，包括文本、下拉框、时间选择框，数字控制等

// 下拉框组件
var sexdata=[['0','男'],['1','女']];
var sexSelect=new Ext.form.ComboBox({
   store:new Ext.data.SimpleStore({
    fields:['value','text'],
    data:sexdata
   }),
   emptyText:'请选择',
   mode:'local',
   triggerAction:'all',
   valueFiled:'value',
   displayField:'text',
   readyOnly:true
});
//定义列   
var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), sm, {
   header : '姓名',
   align:'center',
   dataIndex : 'name',
   width : 80,
   editor:new Ext.grid.GridEditor(new Ext.form.TextField({
    allowBlank:false,
    emptyText:'不能为空!',
    regex:/^[\u4E00-\u9FA5]+$/, //正则表达式验证，只能输入汉字
    regexText:'请输入汉字!',
    bodyStyle:'height:100%'
   
   }))
}, {
   header : '性别',
   align:'center',
   dataIndex : 'sex',
   width : 50,
   editor:new Ext.grid.GridEditor(sexSelect)
}, {
   header : '出生日期',
   align:'center',
   dataIndex : 'birthday',
   width : 100,
   editor:new Ext.grid.GridEditor(new Ext.form.DateField({
    format:'Y-m-d'
   }
   )),
   renderer:function(value){
    return Ext.util.Format.date(value,'Y-m-d');
   }
}, {
   header : '职位',
   align:'center',
   dataIndex : 'office',
   width : 100,
   editor:new Ext.grid.GridEditor(new Ext.form.TextField({
    allowBlank:false,
    emptyText:'不能为空!'
   }))
}, {
   header : '薪水',
   align:'center',
   dataIndex : 'salary',
   width : 80,
   renderer:changeTwoDecimal,
   editor:new Ext.grid.GridEditor(new Ext.form.NumberField({
    allowBlank:false,
    emptyText:'不能为空!',
    decimalPrecision:2 //设置小数位的精度
   }))
}, {
   header : '电话',
   align:'center',
   dataIndex : 'tel',
   width : 100
}, {
   header : 'QQ',
   align:'center',
   dataIndex : 'QQ',
   width : 100
}, {
   header : '邮箱',
   align:'center',
   dataIndex : 'email',
   width : 150
}, {
   header : '地址',
   align:'center',
   dataIndex : 'address',
   width : 150
},{
   id:'action',
   header : '操作',
   align:'center',
   dataIndex : 'action'
}
]);
//显示两位小数
function changeTwoDecimal(x)
{
    x=Number(x);
    return x.toFixed(2);
}
//默认排序
cm.defaultSortable = true;

7、写义record对象的存储容器store
// 表格数据
var store = new Ext.data.Store({
         proxy: new Ext.data.HttpProxy({
         url:gridUrl,
         method:'post'
         }),
         reader:new Ext.data.JsonReader({
             root:'root',totalProperty:'totalCount'   //指定分页控件属性用
         },Person)
});

8、创建gridPanel对象，我觉得叫组装更合适一些，因为前边我们都把一些“零部件”都造好了

// 表格组装
var grid = new Ext.grid.EditorGridPanel({
   el : 'grid',
   store : store,
   cm : cm,
   sm : sm,
   region:'center',
     bodyStyle:'width:100%;height:100%',
     autoScroll:true,
     autoExpandColumn:'action',
     tbar : [{
    pressed : true,
    text : '添加',
    handler : function() {   
     var p=new Person({
      name:'',
      sex:'',
      office:'',
      birthday:'',
      salary:'',
      action:'<a href="#">操作</a>'
     });
     grid.stopEditing();
     store.insert(0,p);
     grid.startEditing(0,2);
    }
   }, {
    xtype:'tbseparator'
   },{
    pressed : true,
    text : '删除',
    handler : function() {
     var sels=grid.getSelectionModel().getSelections();
     for(var i=0;i<sels.length;i++){
      var record=sels[i];
      store.remove(record);
     }
    }
   },{
    xtype:'tbseparator'
   },DSButton
   ],
   bbar:new Ext.PagingToolbar({
    pageSize : limit,
    store : store,
    displayInfo : true,
    displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
    emptyMsg : "没有记录"
   })
});
grid.render(); //渲染

9、加单选和复选控制

DSButton.on('click', function (e){
   if(sm.singleSelect){
    sm.singleSelect=false;
    DSButton.setText('可复选');  
   }else{
    sm.singleSelect=true;
    DSButton.setText('可单选');
   }
   if(sm.singleSelect)
    grid.getSelectionModel().selectRecords(grid.getSelectionModel().getSelections(),false);
});

10、加载数据

store.load({params:{start:start, limit:limit}});

到此前台功能写好了

11、接下来写后台json数据，组织数据到list里面

//初始化示例数据
    List list=new ArrayList();
    list.add("{name:'李连杰',sex:'男',birthday:'1980-10-20',office:'总经理',salary:20000.342323,tel:'010888888',QQ:'666666666',email:'99999@yahoo.com',address:'中国',action:'<a href=\"http://www.baidu.com\" target=\"blank\">操作</a>'}");

……………………

输入json数据

if(startStr!=null&&limitStr!=null){
        int start=Integer.parseInt(startStr);
        int limit=Integer.parseInt(limitStr);
        //根据分页参数以JSON格式组织数据发送到客户端
        StringBuffer gridData=new StringBuffer("{'totalCount':'"+list.size()+"','root':[");
         for(int i=start;i<(start+limit)&&i<list.size();i++){
            gridData.append((String)list.get(i)+",");
         }
         gridData.deleteCharAt(gridData.length()-1);//去掉最后一个‘，’
         gridData.append("]}");
         out.println(gridData.toString());
         out.flush();
        }else{          
        //如果没有分页参数转过来把所有数据以JSON格式组织数据发送到客户端
        StringBuffer gridData=new StringBuffer("{'totalCount':'"+list.size()+"','root':[");
         for(int i=0;i<list.size();i++){
            gridData.append((String)list.get(i)+",");
         }
         gridData.deleteCharAt(gridData.length()-1);//去掉最后一个‘，’
         gridData.append("]}");
         out.println(gridData.toString());         
        }

这样后台就完成，发布一下，看看效果吧

 

posted @ 2013-09-11 12:48  helloworld173  阅读(562)  评论(0)    收藏  举报