EXTJS-1 表单和ajax数据交换

转载自我的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就是每页显示的数据个数。