0

検索テキスト ボックス、検索ボタン、グリッド コントロールを備えた EXTJS フォームがあります。検索ボタンのクリック イベントでフォームが生成されたら、AJAX 要求をサーブレットにポストして、JSON データを取得し、それをグリッドに配置する必要があります。フォームがレンダリングされた後にデータをグリッドに配置するにはどうすればよいですか? 私はこのプログラミングのことは初めてです。サンプルコードは大歓迎です。

Ext.onReady(function(){

    Ext.QuickTips.init();

    var xmlhttp = new getXMLObject();
    var result = null; 


    //Search 
    var searchNum = function(){         
      if(xmlhttp) {  
          var srItem = Ext.getCmp("srItem").getValue();

          xmlhttp.open("POST","searchServlet", true);
          xmlhttp.onreadystatechange = 
              function(){
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {  
                        result = JSON.parse(xmlhttp.responseText);  
                        // returns data in JSON Fromat[{column1:11, column2:11, column3:11}];                       
                    }
             };  

            //handleServerResponse;
            xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xmlhttp.send("srItem=" + srItem.trim()); 
       }    
    };



    // MODEL    
    Ext.define('SearchGrid', {
        extend: 'Ext.data.Model',
        fields: [
           {name:'column1'},
           {name: 'column2'},
           {name: 'column3'}
        ]
    });



    // create the data store
    var store = Ext.create('Ext.data.JsonStore', {
        model: 'SearchGrid',
        data: result
    });


    /*===========================================
     * Generate a Form
     *===========================================
     */
    var search = Ext.create('Ext.form.Panel', {
        frame:true,
        title: 'Form',
        bodyStyle:'padding:5px 5px 0',
        width: 400,
        fieldDefaults: {
            msgTarget: 'side',
            labelWidth: 100
        },
        defaultType: 'textfield',
        defaults: {
            anchor: '80%'
        },

        items: [{
            fieldLabel: 'Search Number',
            name: 'srItem',
            id: 'srItem',
            allowBlank:false
        },
        {
            xtype: 'gridpanel',
            store: store,
            stateful: true,
            title: 'My Grid Panel',
            height: 200,
            width: 400,
            columns: [
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'column1',
                    text: 'Column 1'
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'column2',
                    text: 'Column 2'                        
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'column3',
                    text: 'Column 3'
                }
            ],
            viewConfig: {
                stripeRows: true,
                enableTextSelection: true
            }
        }

        ],

        buttons: [{
            text: 'Search',
            handler: function(){
                if(search.getForm().isValid()){
                    search();
                }
            }
        }]
    });


    search.render("searchForm");    
});
4

2 に答える 2

1

免責事項：その後はEXTJS 2.xバージョンを使用していませんでした。

あなたがすでに書いたことで、解決策は次のようになります

result = JSON.parse(xmlhttp.responseText);
for (var i = 0; i < result.length; i++){
    store.add(result[i]);
}

しかし、私の知る限り、これはこれを行う適切な方法ではありません Extはajaxのラッパーを提供し、ストアにはプロキシベースのストアを使用できるリモートソースからデータをロードするため
、生のXMLHTTPrequestを使用する必要はありません

于 2013-06-05T03:20:41.323 に答える