EXTJS-1 表单和ajax数据交换

来源：互联网发布：erp软件图标素材编辑：程序博客网时间：2024/06/11 12:35

转载自我的ExtJS4.2学习汇总 http://bbs.51cto.com/thread-1106544-1.html

ExtJS 很适合做数据管理系统，如果是创业那种类型的网站推荐使用Bootstrap + Thinkphp + Mongdb框架，比较炫酷。POM管理也最好用maven， ant很老了就别玩罗，还很麻烦

关于数据交换和前台显示是一个非常重要的问题，这里采用Grid组件

原因：Ext中的表格功能非常强大，包括排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。表格由类Ext.grid.GridPanel定义，继承自Ext.Panel，其xtype为grid。在EXT中，表格控件必须包含列定义信息，并指定表格的数据存储器。表格数据最起码有列、数据、转换原始数据这3项。列信息由数组columns定义，表格的数据存储器由Ext.data.Store来定义。store负责把各种各样（如二维数组、JSON对象数组、XML文本等）的原始数据转换成Ext.data.Record类型的对象。通过Ext.data.ArrayStore我们可以把任何格式的数据转化成表格可以使用的形式，这样就不需要为每种数据格式写一个对应的实现了。

//表格数据最起码有列、数据、转换原始数据这3项  Ext.onReady(function(){      //定义列      var columns = [          {header:'编号',dataIndex:'id'}, //sortable:true 可设置是否为该列进行排序          {header:'名称',dataIndex:'name'},          {header:'描述',dataIndex:'descn'}        ];      //定义数据      var data =[          ['1','张三','描述01'],          ['2','李四','描述02'],          ['3','王五','描述03'],          ['4','束洋洋','思考者日记网'],          ['5','高飞','描述05']      ];      //转换原始数据为EXT可以显示的数据      var store = new Ext.data.ArrayStore({          data:data,          fields:[             {name:'id'}, //mapping:0 这样的可以指定列显示的位置，0代表第1列，可以随意设置列显示的位置             {name:'name'},             {name:'descn'}          ]      });      //加载数据      store.load();           //创建表格        var grid = new Ext.grid.GridPanel({            renderTo:'grid', //渲染位置            autoHeight:true,            store:store,            columns:columns, //显示列            stripeRows:true, //斑马线效果            //enableColumnMove: false, //禁止拖放列            //enableColumnResize: false, //禁止改变列宽度            loadMask:true, //显示遮罩和提示功能,即加载Loading……            //forceFit:true //自动填满表格            bbar:new Ext.PagingToolbar({                  pageSize:10, //每页显示几条数据                  store:store,                  displayInfo:true, //是否显示数据信息                  isplayMsg:'显示第 {0} 条到 {1} 条记录，一共 {2} 条', //只要当displayInfo为true时才有效，用来显示有数据时的提示信息，{0},{1},{2}会自动被替换成对应的数据;                  emptyMsg: "没有记录" //没有数据时显示信息             })      });

Grid重要属性笔记：

(1)render* 属性: 控制渲染（做炫酷的那种）具体做法就是renderer 这是表单的某一列，只要用个function就可以更改return 的东西，然后实现<span>标签啥的，很炫酷吧~

{header:'状态',dataIndex:'status',width:80,renderer:function(value){              if(value=='可用'){                  return "<span style='color:green;font-weight:bold';>可用</span><img src='images/right.gif' />";              } else {                  return "<span style='color:red;font-weight:bold';>禁用</span><img src='images/wrong.gif' />";              }          }}

(2)store 属性: 加载数据（注意这里的store 里面proxy如果是ajax 就是定位后台的一个类或action 从服务器端返回数据~默认是传回来json) 上面是前台自定义写死的数据

如果要从服务器端获得数据，代码如下：

//定义列  var columns = [         {header:'编号',dataIndex:'id',width:50}, //sortable:true 可设置是否为该列进行排序         {header:'名称',dataIndex:'name',width:80},         {header:'描述',dataIndex:'descn',width:112}    ];    //转换原始数据为EXT可以显示的数据  var store = new Ext.data.Store({      proxy:{          type:'ajax',          url:'这里填写你后台处理的地址，ssh框架就是action',          reader:{              type:'json',              totalProperty:'total',              root:'root',              idProperty:'id'          }      },      fields:[         {name:'id'}, //mapping:0 这样的可以指定列显示的位置，0代表第1列，可以随意设置列显示的位置         {name:'name'},         {name:'descn'},         {name:'status'}      ]  });      //创建表格  var grid = new Ext.grid.GridPanel({      renderTo:'grid', //渲染位置      autoHeight:true,      store:store,      width:550,      columns:columns, //显示列      bbar:new Ext.PagingToolbar({          pageSize:25, //每页显示几条数据          store:store,           displayInfo:true, //是否显示数据信息          displayMsg:'显示第 {0} 条到 {1} 条记录，一共  {2} 条', //只要当displayInfo为true时才有效，用来显示有数据时的提示信息，{0},{1},{2}会自动被替换成对应的数据          emptyMsg: "没有记录" //没有数据时显示信息      })  });    //加载数据  store.load({params:{start:0,limit:25}}); //传入的是属性和值，一般数重新设置，原来的就没有效了

注意columns的dataIndex 和store的field 定义的是一样的（以后会说到MVC开发模式下这个field一般是抽离出来作为model层）这样绑定后才会load过去

(3) bbar 属性: 控制每页显示的数据，进行分页显示，pagesize就是每页显示的数据个数。

0 0