Ext-JS 4边框布局内部卡布局

时间:2012-09-23 20:27:43

标签: extjs extjs4

我正在使用Ext-JS 4创建一个应用程序。

牌:

1。)登录卡

2。)申请卡

应用卡具有边框布局。

当我单独展示它们时,它们可以正常工作,但当我将它们放在一个视口中时,它们就无法工作。

这是我的视口

Ext.define('MyApp.view.Viewport', {
    extend: 'Ext.container.Viewport',
    layout: 'card',

    items: [
        {
            xtype: 'loginform',
        },
        {
            xtype: 'mainapp'
        }
    ]
});

以下是登录卡的一部分:

Ext.define('Sabrina.view.login.Form' ,{
    extend: 'Ext.form.FormPanel',
    alias : 'widget.loginform',

    name: 'loginform',
    frame: true,
    title: 'Login',
    bodyPadding: '5px 5px 0',
    width: 350,
    ...

以下是申请卡的一部分:

Ext.define('Sabrina.view.Main', {
    extend: 'Ext.panel.Panel',
    alias: ['widget.mainapp'],
    layout: 'border',
        items: [
          //here I have 'west' and 'center' regions
        ]

我已经在不同的应用程序单独中创建了相同的组件,但它们可以正常工作,但这里没有。如果我想在布局中设置边框布局,我是否需要添加更多内容?

我得到了这个:

Uncaught TypeError: Cannot call method 'substring' of undefined

谢谢。 :)

2 个答案:

答案 0 :(得分:3)

viewport只能处理一个元素,而cardlayout只管理一个活动元素。将视口的唯一元素设置为具有cardlayout的容器,并为视口提供fitlayout,这应该有效。

您的错误听起来更像是未知的xtypes。无论如何,尝试描述的布局,也许错误消失了。

答案 1 :(得分:1)

为什么不将登录窗口显示为模态?使用卡片布局进行登录,然后在我看来实际的应用程序是过度的。