grid组件的详解

       概述：表格面板类Ext.grid.Panel 两个别名xtype:(gridpanel,grid)

      

       重要的配置参数

              columns:Array列模式(Ext.grid.column.Columnxtype:gridcolumn)

                     重要配置参数：

                            text：String 列的标题 默认是""

                            dataIndex:String 和Model的列一一对应

                            sortable：true 可以整理，可以进行分类的

                            field：可编辑字段配置

                     重要方法：

                            getStore  得到这个store的集合

                     重要属性

                            ownerCt  获取父类的组件对象

              title:String表格的标题

              renderTo：Mixed 把表格渲染到什么地方

              width：Nunber 宽

              height：Number 高

              frame：Boolean 是否填充渲染这个Panel

              forceFit：true 设定表格的列是否自动填充

              store：stroe 数据集合

              tbar：[] 头部工具栏

              dockedItems：'checkboxmodel' Object/Array 表格停靠在上下左右的工具条

              multiSelect：true 允许多选

              plugins插件

       代码实现：

       首先需要定一个Model类和stroe数据集，用的是内存代理机制，也可以使用Ajax请求后台。

              //定义个User类

              Ext.define("user",{

                     extend:"Ext.data.Model",

                     fields:[

                            {name:"name",type:"string",srotable:true},

                            {name:"age",type:"int",srotable:true},

                            {name:"email",type:"string",srotable:true}

                     ]

              });

              //使用内存代理机制，定义数据数组

              varuserData=[

                     {name:"张帅鹏",age:21,email:"marico_zhang@163.com"},

                     {name:"王",age:21,email:"marico@163.com"},

                     {name:"宋",age:21,email:"zhang@163.com"},

                     {name:"李",age:21,email:"marico_zhang@163.com"},

                     {name:"陈",age:21,email:"zhang@163.com"},

                     {name:"乔",age:21,email:"marico_zhang@163.com"}

              ];

              //创建一个数据集stroe

              Ext.create("Ext.data.Store",{

                     model:"user",

                     storeId:"s_user",//可以用StroeManager进行管理

                     proxy:{

                            type:"memory",

                            data:userData

                     },

                     autoLoad:true

              });

       然后创建gird组件来实现功能

       实现了数据显示、记录多选、工具按钮事件、前台可编辑等功能，

(function(){

       Ext.onReady(function(){

              //初始化Ext组件

              Ext.QuickTips.init();

              //创建表格时候要用 表格的面板

              vargrid=Ext.create("Ext.grid.Panel",{

                     title:"GridDemo", //标题

                     frame:true,  //面板渲染

                     //forceFit:true,//设置是否自动填充

                     width:600,

                     height:280,

                     columns:[  //列模式  并设置前台编辑

                            {text:"Name",dataIndex:"name",width:100},

                            {text:"Age",dataIndex:"age",width:100},

                            {text:"Email",dataIndex:"email",width:350,

                            field:{

                                   xtype:"textfield",

                                   allowBlank:false

                            }

                            }                         

                            ],

                     tbar:[   //上方工具栏

                            {xtype:"button",text:"添加",iconCls:"table_add"},

                            {xtype:"button",text:"删除",iconCls:"table_delete",

                                   handler:function(o){  //参数为button这个组件对象

                                          //得到这个grid表格对象 

                                          //vargrid=o.findParentByType("gridpanel"); //使用方法得到

                                          vargrid=o.ownerCt.ownerCt;//使用属性得到

                                          //Ext.Msg.alert("数据统计：","共"+grid.getStore().getCount()+"条数据信息");

                                          //得到选中的数据集合

                                          vardata=grid.getSelectionModel().getSelection();

                                          if(data.length==0){

                                                 Ext.Msg.alert("提示","你最少要选择一条数据");

                                          }else{

                                                 //1.先得到ID的数据(name) 也就是DB中的主键

                                                 varst=grid.getStore();

                                                 varids=[];

                                                 Ext.Array.each(data,function(record){

                                                        ids.push(record.get("name"));

                                                 });

                                                 //2.后台操作(delete)

//                                               Ext.Ajax.request({

//                                                      url:"",

//                                                      params:{ids:ids.join(",")},

//                                                      method:"POST",

//                                                      timeout:2000,

//                                                      success:function(response,opts){

//                                                             //请求成功，再删除前台数据

//                                                             Ext.Array.each(data,function(record){

//                                                             ids.push(record.get("name"));

//                                               });

//                                                      }

//                                               });

                                                 //3.前端操作DOM进行删除(ExtJs) 也就是同步一下信息

                                                 Ext.Array.each(data,function(record){

                                                        st.remove(record);

                                                 });

                                          }

                                   }},

                            {xtype:"button",text:"修改",iconCls:"table_edit"},

                            {xtype:"button",text:"查看",iconCls:"table_comm"}

                            ],

                     dockedItems:[{

                            xtype:"pagingtoolbar",

                            store:Ext.data.StoreManager.lookup("s_user"),

                            dock:"bottom",//指定在那个位置

                            displayInfo:true  //设置显示

                           

                     }],

                     selType:"checkboxmodel",  //设置选择模式，设置成多选框的模式

                     multiSelect:true,   //设置成多选

                     renderTo:"griddemo",//渲染到div中

                     store:Ext.data.StoreManager.lookup("s_user"),//指定数据集

                     //设置前台编辑，首先在列模式中指定，然后使用插件机制来添加插件

                     plugins:[

                            Ext.create("Ext.grid.plugin.CellEditing",{

                            clicksToEdit:1

                            })

                     ]

              });

       });

})();