ExtJs之gridPanel初探

  function ready()
       {
         
           //创建grid列header  行的成员
          var cm=new Ext.grid.ColumnModel([
          
             new Ext.grid.RowNumberer({header:"序号"}),
             {header:"",dataIndex:"Id"},
             {header:"用户名",dataIndex:"UserName",width:40},
             {header:"密码",dataIndex:"Pwd"},
             {header:"年龄",dataIndex:"Age",renderer:function(value){if(value>18)return "已成年";else return "未成年"}}
         
          ]);

   //看这里的Age 还可以进行条件判，还可以进行时间格式化（renderer:Ext.util.Format.dateRenderer('Y年m月d日')）等。
          

          //数据存储器Store 提供给GridPanel，EditorGridPanel的数据源
         
          //其主要的4个配置属性data,proxy,reader,url
         
          //方法load
         
          // 1、如果配置了data，则proxy和url无效，且不需要调用load方法来生成Record集合

          //2、如果没有配置data,则必须设置proxy或url,或两者都设置。此时，如果没有将autoLoad设置为true，那么需要手动进行load方法的调用。就是为了得到数组、Json或Xml格式的数据。
 
          //3、reader是必须的，用以指定数据解析器，需要根据获得的数据格式指定相应类型的解析器。

          //4、如果没有指定proxy，但指定了url，则会默认用HttpProxy作为数据源，并将url作为HttpProxy实例化时的参数
         
          //数据解析器 ArrayReader({...}),JsonReader({...}),XmlReader({...})

           cm.defaultSortable = true;
               var fields =
            [
                {name:"Id",mapping:'Id'},
                {name:"UserName",mapping:'UserName'},
                {name:"Pwd",mapping:"Pwd"},
                {name:"Age",mapping:"Age"}
           ];

            var store=new Ext.data.Store({
             url:"gridData.aspx"
             reader: new Ext.data.JsonReader({
             totalProperty:"totalProperty",
             root:"root",
             fields:['Id','UserName','Pwd','Age']
             })

          });
         
         
           store.load({params:{start:0,limit:2}});//start索引  limit每页显示记录数
      
          

//    var data = [
            {Id:1,UserName:'ss',Pwd:'123',Age:0},
            {Id:1,UserName:'ss2',Pwd:'153',Age:11}
        ];  

//      var store1 = new Ext.data.Store({
//            proxy: new Ext.data.MemoryProxy(data),
//            reader: new Ext.data.JsonReader({fields:['Id','UserName','Pwd','Age']})
//        });
//        store1.load();
//        alert(store1.getCount());
//        alert(store1.getAt(1).get("Id"));
//        alert(store1.getAt(1).get("Age"));

//store有很多方法。。。。
        

 

//分页控件  其实分页还是要后台控制的 
           var pagingBar = new Ext.PagingToolbar
          ({
            displayInfo:true,emptyMsg:"没有数据显示",displayMsg:"显示从{0}条数据到{1}条数据，共{2}条数据",
            store:store,
            pageSize:2
          });
//          
        
         var grid = new Ext.grid.GridPanel
        ({
            id:"MenuGridPanel",
            renderTo:document.body,
            layout:"fit",
            frame:true,
            border:true,
            width:500,
            height:450,
            autoScroll:true, 
            store:store,
            cm:cm,
            viewConfig:{forceFit: true},
            title:'用户列表',
            bbar:pagingBar
        });
          
       }
      
       Ext.onReady(ready);

 

 

=====================gridData.aspx后台===================================

//我没有真正实现分页功能  一切只是模仿  方便点

    protected void Page_Load(object sender, EventArgs e)
    {

       // 数据模仿
     
        List<UserInfo>userList=new List<UserInfo>();//User我就不贴了  就id,userName,pwd,age四个属性
        string json="";

        if (Request["start"]=="0")//第一页
        {
          pageSize=  Convert.ToInt32(Request["limit"]);
          pageIndex = Convert.ToInt32(Request["start"]);
          userList.Add(new UserInfo(1,"zhang","123",10));
          userList.Add(new UserInfo(2,"wang","345",20));

      
        }
        else
        {//第二页
          userList.Add(new UserInfo(3,"qian","789",30));
          userList.Add(new UserInfo(4,"sun","134",40));

        }

      
        //这里用到了Newtonsoft.Json.dll   json双向转换很方便
          //将json格式构建成目标对象
            //JavaScriptConvert.DeserializeObject(string value)
  

        //将目标对象序列化成json数据格式
          json=JavaScriptConvert.SerializeObject(userList);

          Response.Write("{totalProperty:4,root:" + json+ "}");
    
        Response.End();
    }