Question

我们正在构建的应用程序建立在Sencha提供的admin dashboard template之上。加载特定页面时，我们希望能够在呈现页面之前动态更改内容。 实现这一目标的最佳方式是什么？

到目前为止，我们已经添加了一个控制器，允许我们在页面加载时运行函数，但是我们无法找到使用它来操作页面组件的方法。

页面示例：

Ext.define('Admin.view.home.Page', {
    extend: 'Ext.container.Container',
    xtype: 'page',

    requires: [
        'Ext.container.Container',
        'Ext.grid.Panel',
        'Ext.window.*',
        'Ext.ux.GMapPanel'
    ],

    controller: 'pagecontroller',

    anchor: '100% -1',
    layout: 'fit',
    items : [
        {
            xtype: 'panel',
            id: 'pagepanel',
            title: 'test'
        }
    ]
});

控制器示例：

Ext.define('Admin.view.home.PageController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.pagecontroller',

    init: function () {                                 //Run function on panelload();
    }
});

function panelload(){
var panelX = Ext.create('Ext.panel.Panel', {
    autoShow: true,
    layout: 'fit',
    title: 'test',
    closeAction: 'hide',
    width: 450,
    height: 450,
    html: '<p>foobar</p>'
};
    Ext.getCmp('pagepanel').add(panelX);
}

我当前的代码不会产生任何错误，也不会做任何事情。

Answer 1

我在fiddle中尝试了您的代码。我将panelload函数移动到viewcontroller中并在init函数中调用它。该面板按预期添加到测试面板中

Ext.define('Admin.view.home.PageController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.pagecontroller',

    init: function () {
        this.panelload(); // executes the function after view is ready
    },

    panelload: function () {
        var panelX = Ext.create('Ext.panel.Panel', {
            autoShow: true,
            layout: 'fit',
            title: 'test',
            closeAction: 'hide',
            width: 450,
            height: 450,
            html: '<p>foobar</p>'
        });
        Ext.getCmp('pagepanel').add(panelX);
    }
});

遵循完整的代码。

Ext.define('Admin.view.home.PageController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.pagecontroller',

    init: function () {
        this.panelload();
    },

    panelload: function () {
        var panelX = Ext.create('Ext.panel.Panel', {
            autoShow: true,
            layout: 'fit',
            title: 'test',
            closeAction: 'hide',
            width: 450,
            height: 450,
            html: '<p>foobar</p>'
        });
        Ext.getCmp('pagepanel').add(panelX);
    }
});

Ext.create({
    xclass: 'Ext.container.Container',
    controller: 'pagecontroller',

    anchor: '100% -1',
    layout: 'fit',
    items: [{
        xtype: 'panel',
        id: 'pagepanel',
        title: 'test'
    }],
    renderTo: Ext.getBody()
});

使用管理仪表板模板向面板添加内容

1 个答案: