два оконных объекта в extjs

Question

У меня есть эти два окна, определенные как показано ниже. Функциональность, которую я желаю, состоит в том, что изначально окно сетки должно быть скрыто, и окно входа в систему должно быть показано. После того, как пользователь войдет в систему, окно входа в систему должно быть скрыто, и должно быть показано окно сетки.

var store = new Ext.data.Store({
    url: 'sheldon.xml',
    reader: new Ext.data.XmlReader({
        record: 'Item',
        fields: [
            {name: 'Title'},
            {name: 'Author'},
            {name: 'Manufacturer'},
            {name: 'ProductGroup'}
        ]
    })
});
LoginWindow = {};
gridWindow = {};
gridWindow.grid = new Ext.grid.GridPanel({
    store: store,
    columns: [
        {header: "Title", width: 120, dataIndex: 'Title', sortable:true},
        {header: "Author", width: 180, dataIndex: 'Author', sortable: true},
    ],
    height:200,
    viewConfig: {
        forceFit:true
    }
});

gridWindow = {
    xtype: 'window',
    id: 'grid',
    title: 'Grid',
    anchor: '30% 25%',
    items:[gridWindow.grid],
    frame:true,
    layout:'card',
};
LoginWindow.loginForm = {
    xtype:'form',
    // url:'check.php',
    frame: true,
    labelAlign:'right',
    labelWidth: 70,
    items:[
        {
            xtype:'textfield',
            fieldLabel:'Username',
            anchor: '100%'
        },
        {
            xtype:'textfield',
            fieldLabel:'Password',
            inputType:'password',
            anchor: '100%',
        }
    ],
    buttons:[
        {
            text:'Login',
            handler:
                // Dummy function
                function(btn, objc) {
                    Ext.getCmp('loginwindow').hide();
                    Ext.getCmp('grid').show();
                    store.load();
                },
        },
        {
            text:'Cancel',
            handler:function(btn, objc) {
                btn.findParentByType('form').getForm().reset();
            }
        }
    ]
};
LoginWindow = {
    xtype: 'window',
    id: 'loginwindow',
    title: 'Please Log In',
    anchor: '30% 25%',
    activeItem: 0,
    items:[LoginWindow.loginForm],
    frame:true,
    layout:'card',
    bodyStyle:{}
};
Ext.onReady(function() {
    var viewport = new Ext.Viewport({
        layout: 'anchor',
        items:[
            LoginWindow
        ]
    });
    Ext.getCmp('loginwindow').show();
    Ext.getCmp('grid').hide();
});

Когда я загружаю страницу, я получаю сообщение об ошибке Ext.getcmp('grid') не определено в Firefox. Может ли кто-нибудь помочь мне здесь ...

Answer 1

Ваш gridWindow существует только как литерал объекта (он же объект конфигурации xtype) и никогда не создается (создается). Поэтому Ext.getCmp не может найти его, потому что он еще не существует и не был зарегистрирован в Ext.ComponentManager.

Вы можете добавить его в область просмотра и добавить hidden:true в его определение конфигурации, чтобы он не отображался.

gridWindow = {
    xtype: 'window',
    id: 'grid',
    title: 'Grid',
    anchor: '30% 25%',
    items:[gridWindow.grid],
    frame:true,
    layout:'card',
};

Ext.onReady(function() {
    var viewport = new Ext.Viewport({
        layout: 'anchor',
        items:[
            LoginWindow, gridWindow
        ]
    });
    // no need
    //Ext.getCmp('loginwindow').show();
    //Ext.getCmp('grid').hide();
});

Примечание: вам также может понадобиться вызвать doLayout () в вашем окне просмотра в вашем обработчике входа в систему после отображения / скрытия компонентов.

Answer 2

Похоже, вы сначала определяете LoginWindow.loginForm, но затем переопределяете LoginWindow с новым объектом.

LoginWindow.loginForm = {
    xtype:'form',
    // url:'check.php',

LoginWindow теперь устанавливается для литерала объекта с одним свойством loginForm.

{
    loginForm: [object]    
}

Вслед за

LoginWindow = {
    xtype: 'window',
    id: 'loginwindow',

Это создаст совершенно новый объект и присвоит его LoginWindow. Свойство loginForm больше нигде не видно;)