Ext表格-基本表格和表格增删修

  研究Ext有一段时间了，对Ext表格的学习心得写出来和大家一起分享。

 1.表格的建立

     建立表格基本上分3步骤：

     (1)数据获取

     (2)定义表头，即就是定义表格的列名，宽度，是否可以排序等

     (3)绑定数据和表头

     表格的一些其他特征也是在这些步骤当中实现的，我们以一个列子来说明表格的建立哈

  var com_id;
  var com_table_field = new Ext.data.Record.create([{//定义数据的字段
             name:"com_id"
             },{
             name:"com_num"
             },{
                   name:"com_name"
             },{
                      name:"com_pren"
             },{
             name:"com_tel"
             },{
             name:"com_memo"
             }]);
  var com_table_store = new Ext.data.Store({//从后台获取数据
             proxy:new Ext.data.HttpProxy({
                  url:"companytableAction.do"
                  })
             ,reader:new Ext.data.JsonReader({
                     totalProperty:"totalProperty"
                     ,root:"root"
                     }
                     ,com_table_field
                     )
             });

  
   var com_table_cm = new Ext.grid.ColumnModel([//建立表头，即列的属性
               new Ext.grid.RowNumberer()//编号
               ,new Ext.grid.CheckboxSelectionModel()//可选择框
               ,{
                header:"主键"//列名
                ,dataIndex:"com_id"//和com_table_field定义的相对应 
                ,width:50//定义了列宽
                ,disabled:false//不能编辑
                ,hideable:false //隐藏列下拉框中选择项里面该项的内容
                ,hidden:true//隐藏列
               },{
                header:"编号"
                ,dataIndex:"com_num"
                ,width:50
                ,sortable:true
               },{
                header:"公司名称"
                ,dataIndex:"com_name"
                ,width:150
                ,sortable:true//排序
               },{
                header:"系统负责人"
                ,dataIndex:"com_pren"
                ,width:100              
               },{
                header:"联系电话"
                ,dataIndex:"com_tel"
                ,width:100              
               },{
                header:"备注"
                ,dataIndex:"com_memo"
                ,width:150              
               }
               ]);
  var com_grid = new Ext.grid.GridPanel({//数据绑定
            ds:com_table_store//数据
            ,cm:com_table_cm//表头
            ,width:600//表格的宽度
            ,height:300//表格的高度
            ,enableHdMenu:true//列表头的下拉框,true为显示,falsh为不显示
            ,loadMask:{
             msg:"正在加载数据，请稍候..."
             }//数据加载时候显示
            ,trackMouseOver:true//鼠标滑过时的高亮效果
            ,tbar: new Ext.Toolbar({//表格上方的按钮
                     items:[{
                        text:"添加"
                      },{
                        text:"修改"
                      },{
                        text:"删除所选"
                     ,handler:function(e){
                      var com_rows = com_grid.getSelectionModel().getSelections();//获取你选择的行
                      if(com_rows.length==0){
                       Ext.MessageBox.alert("警告","请选择要删除数据！");
                      }else{
                       Ext.MessageBox.confirm("警告","确定删除以选数据？",function(ret){
                       if(ret=="yes"){
                         var com_id_del = new Array(com_rows.length);
                         for(var i=0;i<com_rows.length;i++){
                        com_id_del[i]=com_rows[i].get("com_id");
                         }
                         Ext.get(document.body).mask("请稍候，请求提交中....","x-plain");
                         var com_id_str = com_id_del;
                                                                      Ext.Ajax.request({
                           //Ext.getBody.mask("请稍候，数据提交中....","x-mask-loading");
                           url:"dcomAction.do?p_com_id="+com_id_str+""//提交要删除数据的主键
                           ,success:function(response, options){
                            var obj = Ext.util.JSON.decode(response.responseText);
                            Ext.MessageBox.alert("警告",obj.Mag);
                            for(var i=0;i<obj.result;i++){
                             com_table_store.remove(com_rows[i]);
                            }
                            Ext.get(document.body).unmask();
                           }
                           ,failure:function(){
                            Ext.get(document.body).unmask();
                            Ext.MessageBox.alert("警告","删除失败");
                            }
                           })                       
                       }
                                   })
                      }
                     }
                      }]
                   })
            ,bbar: new Ext.PagingToolbar({
                      pageSize:10
                   ,store:com_table_store
                   ,displayInfo:true
                   ,displayMsg:"显示第 {0} 条到 {1} 条记录，一共 {2} 条"
                   ,emptyMsg:"没有数据"
                    })
           
          });