为什么我必须在Sencha上设置尺寸?

时间:2014-02-28 09:31:13

标签: extjs

Ext.define('CCApp.view.LoginFormPanel', {
extend: 'Ext.form.Panel',
alias: 'widget.loginformpanel',
config: {
    title: 'Login',
    layout: {
        type: 'vbox',
        pack: 'center',
        align: 'center'
    },      
    items: [
        {
            xtype: 'image',
            src: '/CCApp/img/lock.png',
            width: 100,
            height: 100
        },                  
        {
            xtype: 'fieldset',
            height: 100,
            width: 800,
            items: [
                {
                    xtype: 'textfield',
                    label: 'Username',
                    placeHolder: 'Username',
                    itemId: 'userNameTextField',
                    name: 'userNameTextField',
                    required: true                          
                },
                {
                    xtype: 'passwordfield',
                    label: 'Password',
                    xtype: 'passwordfield',
                    placeHolder: 'Password',
                    itemId: 'passwordTextField',
                    name: 'passwordTextField',
                    required: true       
                }
            ]
        },                         
        {
            xtype: 'button',
            itemId: 'loginButton',
            width: 100,
            text: 'Login'
        }          

    ],
    listeners: [
        {
            fn: 'onMybuttonTap',
            event: 'tap',
            delegate: '#loginButton'
        }
    ]
},

onMybuttonTap: function(button, e, eOpts) {
    //button.up().up().animateActiveItem(1, { type: 'flip' });

    var mainTabPanel = Ext.ComponentQuery.query("toppanel")[0];
    mainTabPanel.animateActiveItem(1, { type: 'flip' });

}

});

为什么我需要在Image和Fieldset上设置宽度和高度? 如果我不这样做,它将不会显示。 我认为每次为这样的组件设置宽度和高度都不是一个好习惯,对吗?

由于

1 个答案:

答案 0 :(得分:0)

当我在Sencha Touch中定位元素时(也可以在Ext.js中工作),我总是尝试使用flex属性。相对定位并不总是一种选择,但在大多数情况下它会做得很好

http://www.sencha.com/forum/showthread.php?121422-what-is-quot-flex-quot-config&s=ef8101ffe375ce6ccd07343760461bb4