GridPanel数据在重新启动后加载时未呈现 [英] GridPanel data not rendered when loaded after initalization

问题描述

我非常新的ExtJS，所以这可能是愚蠢的问题。

我有一个自定义面板，扩展Ext的Panel类，它做一个AJAX调用，应该创建并使用获取的数据填充一个内部的GridPanel（列是动态的，所以我不能更早地准备网格）。 webService 的第一个参数是使用数据调用的回调函数，当AJAX调用封装在 webService 对象成功时。

现在，我试图用硬编码的数据填充我的 TablePortlet ，当 renderCallback 方法直接从构造函数调用，但如果在AJAX请求后调用，则不起作用。我可以在Firebug中跟踪，在这种情况下，该方法仍然被调用，上下文有效， store 填充数据，但没有任何内容。

如何正确填充数据？是否可能有任何 render 方法，我错过了？

  TablePortlet = Ext.extend（Ext.Panel，{
 
构造函数：function（portletTitle，sourceId，webService）
 {
 var context = this; 
 
 TablePortlet.superclass.constructor.call（this，{
 title：portletTitle，
 anchor：'100％'，
 frame：true，
 collapsible：true，
 draggable：true 
}）; 
 
 var grid = null; 
 
函数renderCallback（data）
 {
 if（grid！ null）
 context.remove（grid）; 
 
 var store = new Ext.data.ArrayStore（{
 autoDestroy：true，
 fields：[{name： a}，{name：b}，{name：c}，{name：'d'}]​​，
}）; 
 store.loadData（[['1' ，'2'，'1'，'2']，['3'，'4'，'3'，'4']]）; 
 
 grid = new Ext.grid.GridPanel（{
 store：store，
 colModel：new Ext.grid.ColumnModel（[
 {header：'A' dataIndex：'a'}，
 {header：'B'，dataIndex：'b'}，
 {header：'C'，dataIndex：'c'}，
 {header： 'D'，dataIndex：'d'}，
]），
 width：'100％'，
 autoHeight：true，
 view：new Ext.grid.GridView ），
 viewConfig：{
 forceFit：true 
}，
 layout：'fit'
}）; 
 
 context.add（grid）; 
} 
 
 this.on（'render'，function（）
 {
 webService.GetTable（renderCallback，sourceId）; 
}）; 
} 
}）; 
  

解决方案

解决方案是：

  context.doLayout（）; 
  

感谢这个并行问题：如何在加载数据后刷新面板？

I am quite new to ExtJS so this may be silly question.

I have a custom Panel, extending Ext's Panel class, which does an AJAX call and should create and populate an inner GridPanel with data obtained (columns are dynamic, so I can't prepare the grid earlier). webService's first parameter is a callback function called with data when AJAX call encapsulated in webService object succeeds.

By now, I'm trying to populate my TablePortlet with hardcoded data and it works well when renderCallback method is called directly from constructor, but doesn't work at all if called after AJAX request. I can trace in Firebug that in this case the method is still called, context is valid, store is filled with data, but nothing is rendered.

How should I populate the data properly? Is there maybe any render method that I'm missing?

TablePortlet = Ext.extend(Ext.Panel, {

    constructor: function(portletTitle, sourceId, webService)
    {
        var context = this;

        TablePortlet.superclass.constructor.call(this, {
            title: portletTitle,
            anchor: '100%',
            frame:  true,
            collapsible:    true,
            draggable:  true
        });

        var grid = null;

        function renderCallback(data)
        {
            if (grid != null)
                context.remove(grid);

            var store = new Ext.data.ArrayStore({
                autoDestroy: true,
                fields:[{name:"a"}, {name:"b"}, {name:"c"}, {name:'d'}],
            });
            store.loadData([['1','2','1','2'],['3','4','3','4']]);

            grid = new Ext.grid.GridPanel({
                store: store,
                colModel: new Ext.grid.ColumnModel([
                    {header: 'A', dataIndex:'a'},
                    {header: 'B', dataIndex:'b'},
                    {header: 'C', dataIndex: 'c'},
                    {header: 'D', dataIndex: 'd'},
                ]),
                width: '100%',
                autoHeight: true,
                view: new Ext.grid.GridView(),
                viewConfig: {
                    forceFit: true
                },
                layout: 'fit'
            });

            context.add(grid);
        }

        this.on('render', function() 
        {
            webService.GetTable(renderCallback, sourceId);
        });
    }
});

解决方案

And the solution is:

context.doLayout();

Thanks to this parallel question: How to refresh a panel after data is loaded?

这篇关于GridPanel数据在重新启动后加载时未呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！