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

当我加载页面时，我在firefox中得到错误Ext.getcmp('grid')未定义。有人可以帮帮我吗...

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属性无处可见;）

extjs中的两个窗口对象

2 个答案: