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上设置宽度和高度? 如果我不这样做,它将不会显示。 我认为每次为这样的组件设置宽度和高度都不是一个好习惯,对吗?
由于
答案 0 :(得分:0)
当我在Sencha Touch中定位元素时(也可以在Ext.js中工作),我总是尝试使用flex属性。相对定位并不总是一种选择,但在大多数情况下它会做得很好