如何在 ExtJs 中用新的 ajax 结果替换 div 的内容？

Question

我是 ExtJs 的新手，我想用新的 Ajax 请求结果覆盖 Div id "infraTab" 的 html 内容。

将不胜感激。 提前致谢。 以下是我目前所做的代码。

Ext.define('testview', {
    layout  :   {
                    type: 'border',
                    padding: 5
                },
    extend  :   'Ext.Panel',
    alias   :   'widget.infraTab',
    id      :   'infraTab',
    margin  :   '10 10 10 10',
    border  :   true,   
    items   :   Ext.create('Ext.view.View', {
                    store: store,
                    tpl:resultTemplate,
                    itemSelector: 'div.list-item',
                    listeners: {
                        itemclick: function(view, record, item, index, e, eOpts) {
                            getsublevels("abc");
                        }
                    }
            })
});

上面的代码是显示数据，新的ajax调用函数是

var getsublevels = function(value){

                        var sublvlStore = Ext.create('Ext.data.Store', {
                                                model : 'LevelModel',
                                                 autoLoad : true,
                                                    proxy : {
                                                          type : 'ajax',
                                                           url : 'Url',
                                                        method :'GET',
                                                        extraParams: {
                                                            test: test
                                                        },
                                                        reader : {
                                                                     type : 'json',
                                                                     root : 'data',
                                                            totalProperty : 'total',
                                                            successProperty: 'success'
                                                        }
                                                    } 
                                            });
                        sublvlStore.load();
                        Ext.define('testview', {
                            layout  :   {
                                            type: 'border',
                                            padding: 5
                                        },
                            extend  :   'Ext.Panel',
                            alias   :   'widget.infraTab',
                            id      :   'infraTab',
                            margin  :   '10 10 10 10',
                            border  :   true,
                            renderTo: "infraTab",
                            items   :   Ext.create('Ext.view.View', {
                                            store: sublvlStore,
                                            tpl:resultTemplate,
                                            itemSelector: 'div.list-item',
                                            listeners: {
                                                itemclick: function(view, record, item, index, e, eOpts) {
                                                    getsublevels(record.get('value'));
                                                }
                                            }
                                    })
                        });
};

我尝试了 renderTo 但没有成功。

Answer 1

您不需要为此替换页面的全部内容，您拥有的列表类型视图已绑定到商店中的数据。您可以更新/更改/重新加载或完全替换商店中的数据，结果将反映在屏幕上。

在你的顶级代码块中尝试这样的事情

items   :   Ext.create('Ext.view.View', {
     store: store,
     tpl:resultTemplate,
     itemSelector: 'div.list-item',
     listeners: {
         itemclick: function(view, record, item, index, e, eOpts) {
             store.reload({
                 params: {
                     parentValue: record.get('value')
                 },
                 url: '/new_url.php'
             });
         }
     }
})

在上面的示例中，当您单击列表中的一个项目时，它会向服务器发送一个 ajax 请求，其中包含一个包含父列表项值的参数，您的后端服务应响应该值与第一个请求不同的数据。