java - 如何在EXTJS网格中插入数据?

标签 java javascript servlets extjs

我有一个带有搜索文本框、搜索按钮和网格控件的 EXTJS 表单。一旦在搜索按钮单击事件上生成表单,我就会向 servlet 发送 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");    
});

最佳答案

Discalimer:我在那之后就使用了 EXTJS 2.x 版本。

根据您已经编写的内容,解决方案可能类似于

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

但是据我所知这不是正确的方法
无需使用原始 XMLHTTPrequest,因为 Ext 提供了 ajax 的包装器。对于从远程源加载数据的存储,您可以使用基于代理的存储

关于java - 如何在EXTJS网格中插入数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16930907/

相关文章:

java - 从 C++ 方法调用 Java 函数

java - 从 valueUnbound(HttpSessionBindingEvent event) 方法修改 ServletContext 的属性

javascript - 在线测验,onbeforeunload

javascript - 用于解析对象数组的 promise 的 typescript

java - Spring MVC 从应用程序 war 文件中分离 Assets

java - servlet 到 JSP 以及 JSP 到 servlet 上的变量

java - 在 C#/Unity 中启动外部 Android 应用程序

java - 无法获取使用 jQuery Popconfirm 插件单击的按钮的名称

java - 填写空白字符串

javascript - Angular 数据绑定(bind)不适用于 Jade