用ext.form和ext.grid的思路实现查询?

Question

我在页面中放了一个FormPanel和一个GridPanel,想实现这个效果:根据FormPanel的查询条件刷新Grid中的数据,可是就下面的代码运行后并没重新加载新的数据,
JSProjectList.js
*********************************************************************************
/*
* Ext JS Library 2.0 RC 1
* Copyright(c) 2006-2007, Ext JS, LLC.
* [email protected]
* 
* http://extjs.com/license
*/Ext.onReady(function(){    Ext.QuickTips.init();
    
    var xg = Ext.grid;  // create the Data Store
      var ds = new Ext.data.GroupingStore
      ({
        
         proxy: new Ext.data.HttpProxy
         ({
             url: '../webpage/ProjectList.aspx'
         }),         // create reader that reads the project records
         //BookName,BookSeries,CharCount,Price,BookFormat,ForTeachingOrSocial,BelongToDepartment,Subject,BelongToEditRoom 
         reader: new Ext.data.JsonReader
         ({
             root: 'data',
             totalProperty: 'totalCount'
        
         }, [
             {name:'BookName', mapping: 'BookName',type:'string'},
             {name:'DutyEditor', mapping: 'DutyEditor',type:'string'},
             {name:'ArrivalDate', mapping: 'ArrivalDate', type:'string'},
             {name:'CheckOness', mapping: 'CheckOness',type:'string'},
             {name:'CheckTwoss', mapping: 'CheckTwoss',type:'string'},
             {name:'CheckThreess', mapping: 'CheckThreess',type:'string'},
             {name:'AuthorSampless', mapping: 'AuthorSampless',type:'string'},
             {name:'v1', mapping: 'v1',type:'string'},
             {name:'v2', mapping: 'v2',type:'string'},
             {name:'v3', mapping: 'v3',type:'string'},
             {name:'v4', mapping: 'v4',type:'string'},
             {name:'v5', mapping: 'v5',type:'string'},
             {name:'v6', mapping: 'v6',type:'string'}, 
             {name:'v7', mapping: 'v7',type:'string'},
             {name:'v8', mapping: 'v8',type:'string'}, 
             {name:'v9', mapping: 'v9',type:'string'},
             {name:'v10', mapping: 'v10',type:'string'}, 
             {name:'v11', mapping: 'v11',type:'string'}
             
         ]),
         sortInfo:{field: 'BookName', direction: "ASC"}
       //  groupField:'BookSeries'
       
     });
   var nm = new Ext.grid.RowNumberer();
  
     var cm = new Ext.grid.ColumnModel
     ([nm,            {header: "书名", width: 70, sortable: true, dataIndex: 'BookName'},
            {header: "责编", width: 20, sortable: true, dataIndex: 'DutyEditor'},
            {header: "到稿", width: 20, sortable: true, dataIndex: 'ArrivalDate'},
            {header: "一审", width: 20, sortable: true, dataIndex: 'CheckOness'},
            {header: "二审", width: 20, sortable: true, dataIndex: 'CheckTwoss'},
            {header: "三审", width: 20, sortable: true, dataIndex: 'CheckThreess'},
            {header: "设计", width: 20, sortable: true, dataIndex: 'AuthorSampless'},
            {header: "一校编", width: 20, sortable: true, dataIndex: 'v1'},
            {header: "一校设", width: 20, sortable: true, dataIndex: 'v2'},
            {header: "二校编", width: 20, sortable: true, dataIndex: 'v3'},
            {header: "二校设", width: 20, sortable: true, dataIndex: 'v4'},
            {header: "三校编", width: 20, sortable: true, dataIndex: 'v5'},
            {header: "三校设", width: 20, sortable: true, dataIndex: 'v6'},
            {header: "通读编", width: 20, sortable: true, dataIndex: 'v7'},
            {header: "通读设", width: 20, sortable: true, dataIndex: 'v8'},
            {header: "核红编", width: 20, sortable: true, dataIndex: 'v9'},
            {header: "核红设", width: 20, sortable: true, dataIndex: 'v10'},
            {header: "封面设计", width: 20, sortable: true, dataIndex: 'v11'}     ]);
    
     cm.defaultSortable = true;
     /*
     * ================  Simple form  =======================
     */
      var simple = new Ext.FormPanel({
        labelWidth: 75, // label settings here cascade unless overridden
        url:'save-form.php',
        frame:true,
        title: '查询条件',
        bodyStyle:'padding:5px 5px 0',
        width:1300,
        height:80,
         layout:'table',
        items: [  new Ext.form.Radio({   
                        labelSeparator:'',   
                        name:'radio',
                        inputValue:'r1', 
                        hiddenName:'book',  
                        checked:true,   //为true 被选中，false 不被选中   
                        boxLabel:'按书名：'  
                    }),
                     new   Ext.form.TextField({ 
                        width:175, 
                          name: 'Username',
                          allowBlank:true
               
                }),
                     new Ext.form.Radio({   
                        labelSeparator:'',   
                        name:'radio',
                        inputValue:'r2',
                        hiddenName:'editor',    
                        checked:false,   //为true 被选中，false 不被选中   
                        boxLabel:'按责编：'  
                    }),
                     new   Ext.form.TextField({ 
                        name:   'editors ', 
                        width:175, 
                        allowBlank:true  
                }), 
                    new Ext.form.Radio({   
                        labelSeparator:'',   
                        name:'radio',
                        inputValue:'r3',
                        hiddenName:'year',    
                        checked:false,   
                        boxLabel:'按年份：'  
                    }),
                      new   Ext.form.TextField({ 
                        fieldLabel:   'years ', 
                        name:   'first ', 
                        width:175, 
                        allowBlank:true 
                }),
                new Ext.Button({
                    id:'btnSave',
                    text:'查 询',
                    handler:doSave,
                   disabled:false
                })
        ]
    });    simple.render(document.body);
     /*
     * ================ grid  =======================
     */
    var grid = new xg.GridPanel({
        store:ds,
        view: new Ext.grid.GroupingView({
            forceFit:true,
            groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "项" : "项"]})'
        }),      
        frame:true,
        width: 1300,
        height:700,
        collapsible: true,
        animCollapse: false,
        title: '书籍基本信息',
        iconCls: 'icon-grid',
        renderTo: document.body,
        cm: cm,
          trackMouseOver:true,
        loadMask: {msg:'正在加载数据，请稍侯……'}
    });
     ds.load();
  function doSave()
  {
    simple.getForm().submit({
      url:'../webpage/ProjectList.aspx',    ---------处理查询的aspxa页面   
       method:'POST'
       });
       ds.load();    ------重新加载     
       Ext.MessageBox.hide();
       Ext.MessageBox.alert('提示', '成功！');
    }
});
请高手帮忙看看,是不是我那里的写法有问题,在线等,急!谢谢

Answer 1

******************************************************************
../webpage/ProjectList.aspx'后台处理数据using System;public partial class webpage_ProjectList : System.Web.UI.Page
{
    protected string strJsonSource = string.Empty;
    string wherekey = "";
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Request.Form["Username"] != null)
        {
            string select = Request.Form["radio"];
            if (select == "r1")
            {
                wherekey = "  bookname like '%" + Request.Form["Username"] + "%'";
            }
            if (select == "r2")
            {
                wherekey = "  DutyEditor like '%" + Request.Form["editors"] + "%'";
            } 
            if (select == "r3")
            {
                wherekey = "";
            }
          
        }
            GetJsonSouceString(wherekey);  
    }
    private void GetJsonSouceString(string wherestr)
    {
        publishData dbJson = new publishData();
        string JsonSource = dbJson.GetProject(wherestr);
        Response.Write(JsonSource);
        Response.End();    }
}