Extd第一个gridPanel小程序

来源：互联网发布：上海黄金交易所交易软件编辑：程序博客网时间：2024/05/29 08:23

这个小程序中包含了很多的参数配置和一些细节问题：仔细看看方便以后浏览熟悉一下语法

mode.js

//User类Ext.define("user",{                   //基本上定义一个类用的是define，定义一个对象用create实现的extend:"Ext.data.Model",          //这个类基本上是都是继承Ext.data.Model的，含有一个fields,可以理解为数据库中的表fields:[{name:'name',type:'string',sortable:true},{name:'age',type:'int',sortable:true},{name:'email',type:'string',sortable:true}]});//User对象var user = Ext.create("user",{});                  //声明一个对象Ext.create("Ext.data.Store",{                      //这个对象是一个Ext.data.Store,实际上是用来存储数据的model:'user',                                  //一般情况下是一个代理，数据从后台取storeId:'s_user',proxy:{type:'ajax',url:'/extjs/extjs!getUserList.action',reader:{type:'json',root:'topics'},writer:{type:'json'}},autoLoad:true});

结合：01gridDemo.js

(function(){Ext.onReady(function(){Ext.QuickTips.init();//穿件表格时候要 用表格的面板var grid = Ext.create("Ext.grid.Panel",{title : 'Grid Demo',//标题frame : true,//面板渲染//forceFit : true,//自动填充panel空白处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_remove',handler:function(o){//var gird = o.findParentByType("gridpanel");var gird = o.ownerCt.ownerCt; //得到父级元素的父级元素【button的父级元素是toolbar，toolbar的父级元素师gridpanel】var data = gird.getSelectionModel().getSelection();if(data.length == 0){Ext.Msg.alert("提示","您最少要选择一条数据");}else{//1.先得到所有ID的数据(name)var st = gird.getStore();var ids = [];Ext.Array.each(data,function(record){ids.push(record.get('name'));})//2.后台操作(delet)Ext.Ajax.request({url:'/extjs/extjs!deleteData.action',params:{ids:ids.join(",")},//利用ajax将id传递到后台，                           //这里的join()函数也要注意，将Array变成字符串串起来method:'POST',timeout:2000,success:function(response,opts){Ext.Array.each(data,function(record){st.remove(record);     //Ext.data.Store里面有个remove()方法，删除数据})}})//3.前端操作DOM进行删除(ExtJs)}}  },{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}],plugins:[                           //以插件的形式实现一些功能Ext.create("Ext.grid.plugin.CellEditing",{         //可编辑的插件clicksToEdit : 1            //单击多少下才能可编辑})],selType:'checkboxmodel',//设定选择模式 默认的是单选multiSelect:true,//运行多选renderTo :'gridDemo',store : Ext.data.StoreManager.lookup('s_user')});});})();

分析帮助理解一下：

首先看看User.js

1）有一个User类，它是一个Model，有一个fields参数：实际上市数据库中表的意思。

2）有一个User对象，它是一个Store，用来存储数据的，但是这个store数据时从哪里来的呢？store必须基于proxy，然后type:ajax url:'/extjs/extjs!getUserList.action',,在后台通过JSON格式取出数据，Reader，将取出来的数据写到Model中；最后通过writer以JSON的格式格式响应到前台。

注意：这里指定了 model:'user', 指定是基于哪个：Model，

storeId:'s_user',让前台可以通过：01gridDemo.js中的store : Ext.data.StoreManager.lookup('s_user')绑定这个数据。

关于01gridDemo.js中的参数，代码中写得非常清楚了，仔细研读。

0 0