extjs2.2记2

框架好后，其它需要的是GridPanel\Form\EditorGrid

先用用GridPanel(数据由数据库中读出，直接填入grid)

1.在vs2008中新建一个类库bussiness（用来从中读出数据）

<1>去下载一个文件：JSONHelper.cs(用来把DataSet数据变成Json时用),此文件可加入bussiness库。

<2>从web.config中读出数据库连接字段System.Configuration.ConfigurationManager.AppSettings["key"].ToString()

vs2008找不到了吧，可以在bussiness的引用中加入System.web的几项就行了。

<3>得到DataSet:

　　public DataSet getYgzd()

　　{

　　　　string strSql = "select YGID,YGXM,BMDM from YGZD";
        　　return this.createDs(strSql);

　　}

<4>新建url/test1.aspx,后台调用

　　　 string starts = Request.Form["start"];
            string limits = Request.Form["limit"];

            string par = this.Request.Form["parm"];

            int start = int.Parse(starts);
            int limit = int.Parse(limits);

 

            JSONHelper json = new JSONHelper();

            bussiness.Cygzd moudle = new bussiness.Cygzd();
            DataSet ds = moudle.getYgzd();
            DataRow dr;

            for (int i = start; i < start + limit; i++)
            {
                if (i < ds.Tables[0].Rows.Count)
                {
                    dr = ds.Tables[0].Rows[i];
                    json.AddItem("ygid", dr["YGID"].ToString().Trim());
                    json.AddItem("ygxm", dr["YGXM"].ToString().Trim());
                     json.AddItem("bmdm", dr["BMDM"].ToString().Trim());
                    json.ItemOk();
                }
            }
            json.totlalCount = ds.Tables[0].Rows.Count;

            string jsons = json.ToString();

　　　 this.Response.Write(jsons);
            this.Response.End();

注：1.strart,limit,par为从前台传来的参数。

       2.看见JSONHelper json，这是前面下载文件中的对象。

　　3.最后要加上this.Response.End();否则把整个页面都回传了。

　　4.参数par单独提出，可以根据此参数把多个grid的处理都放在此页面。

2.前台test1.js文件

<1>顺序生成:

//勾选框

var sm = new Ext.grid.CheckboxSelectionModel();

//列头

var cm = new Ext.grid.ColumnModel([
         sm,        
         {header:'员工代码',dataIndex:'ygid',width:50},
         {header:'员工姓名',dataIndex:'ygxm'},
         {header:'部门代码',dataIndex:'bmdm'}
    ]);

//数据

var ds = new Ext.data.Store({
         baseParams: {parm:" yggl"},
         proxy: new Ext.data.HttpProxy({url:'test1.aspx',method:'POST'}),
         reader: new Ext.data.JsonReader({totalProperty:'totalCount',root:'data'},[
             {name: 'ygid'},
             {name: 'sex'},
             {name: 'ygxm'},
             {name: 'bmdm'}
         ])
    });
    ds.load({params:{start:0,limit:12}});

//生成grid

var grid = new Ext.grid.GridPanel({
         id:"yggl",
         store: ds,//数据
         cm: cm,//列头
         sm: sm,
         height:200,
         title:'员工表',
         viewConfig:{forceFit:true},//重新计算各列宽度,填满表格
         
         bbar: new Ext.PagingToolbar({
            pageSize: 12,
            store: ds,
            displayInfo: true,
            displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
            emptyMsg: "没有记录"
         })

　　  tbar: new Ext.Toolbar({
            items:[
                    {
                        id:'buttonA' ,text:"增加"
                    },'-' ,{
                        id:'buttonB' ,text:"修改" ,handler: editYgzd
                    },'-', {
                        id:'buttonc',text:"删除",handler : ygzdDel                          
                    }
             ]
          })

    });

注：1.看见不同的两种传入参数方法：baseParams: {parm:" yggl"}, 　　ds.load({params:{start:0,limit:12}});

　　2.url中的地址（是相对于调用此js 文件的aspx文件的地址）

　　3.排序不支持中文的，而且为当前页数据的排序，可以查找中文的来定义上。

　　4.可以ds取出所有的数据，而列头只取部分列名.

 

<2>数据删除(将ygid传给后台的文件slManage.aspx处理)

a.新建文件ygzdManage.aspx,后台部分代码：

　　　 string strYgid = this.Request.Form["ygid"];

　　     string strMethod = this.Request.Form["method"];
            if (strMethod == "ygzdDel")
            {
                Cygzd moudle = new Cygzd();
                if (moudle.delYgzdById(strYgid))//从数据库中删除一条数据              
                {
                    this.Response.Write( "success:true");
                    this.Response.End();
                }

　　　 }              

b.前台加入删除函数：

function ygzdDel()
    {
        var ygid="";
        var method = "ygzdDel";
        var row=Ext.getCmp("yggl").getSelectionModel().getSelections();
        if (row.length==1) ygid = row[0].data.ygid;           
        Ext.Ajax.request(
        {
            url:"url/sjManage.aspx",
            method:"POST",
            params:{
                   ygid:ygid,method:method
            },
            success:function(response)
            {

　　　　　if(response.responseText="true")

                   Ext.Msg.alert("恭喜您","删除成功了!");                
                   ds.reload();
            },
            failure:function()
            {
                   Ext.Msg.alert("提 示","删除失败了!");
            }
        });        
    };

注：1.这里是另一种从后台取数运算的方法,可以向后台传入不同的参数使一个表所有操作在一个后台文件中。

　　2.var row=Ext.getCmp("yggl").getSelectionModel().getSelections();
        if (row.length==1) ygid = row[0].data.ygid; 展示了如何取得单击的行和行内的数据，若选择的为多行，用row(n)表示。

　　3.response.responseText得到后台返回值