Question

我对ExtJS很陌生，所以这可能是个愚蠢的问题。

我有一个自定义Panel，扩展了Ext的Panel类，它执行AJAX调用，并且应该使用获得的数据创建并填充内部GridPanel（列是动态的，所以我不能提前准备网格）。 webService的第一个参数是在webService对象中封装的AJAX调用成功时用数据调用的回调函数。

到目前为止，我正在尝试使用硬编码数据填充TablePortlet，并且直接从renderCallback调用constructor方法时效果很好，但如果在AJAX请求之后调用。我可以在Firebug中跟踪，在这种情况下仍然会调用该方法，context有效，store填充数据，但不会呈现任何内容。

我应该如何正确填充数据？是否有任何我遗漏的render方法？

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);
        });
    }
});

Answer 1

解决方案是：

context.doLayout();

感谢这个平行问题：How to refresh a panel after data is loaded?

初始化后加载时，Grid Panel数据不会呈现

1 个答案: