Sencha Architect - 使用表单创建屏幕

Posted

技术标签:

【中文标题】Sencha Architect - 使用表单创建屏幕【英文标题】:Sencha Architect - creating a screen with a form 【发布时间】:2012-07-12 04:49:00 【问题描述】:

刚开始看煎茶触摸

谁能解释一下你会在哪里使用“FieldSet、FormPanel 和容器”

例如:带有标题、文本字段和提交按钮的表单?

登录屏幕 ...

Title: Login
TextField: username
PasswordField: password
Button: submit  

1) 此登录屏幕是否会位于容器、字段集和/或表单面板中?

2) 没有标题的表格怎么办?只是文本字段、按钮,还是只是带有标题、数据列表的屏幕?

【问题讨论】:

【参考方案1】:

我认为示例代码会对您有所帮助:

Ext.define('MyApp.view.LoginSiteContainer', 
extend: 'Ext.form.Panel',
alias: 'widget.loginsitecontainer',

config: 
    id: 'loginform',
    url: 'som_url',
    items: [            
        
            xtype: 'container',
            layout: 
                type: 'vbox'
            ,
            items: [
                
                    xtype: 'fieldset',
                    instructions: 'Login using existing account. Password is case sensitive.',
                    title: 'Login details',
                    items: [
                        
                            xtype: 'textfield',
                            id: 'login',
                            itemId: 'login',
                            label: 'Login'
                        ,
                        
                            xtype: 'passwordfield',
                            id: 'password',
                            itemId: 'password',
                            label: 'Password'
                        
                    ]
                ,
                
                    xtype: 'panel',
                    layout: 
                        type: 'hbox'
                    ,
                    items: [
                        
                            xtype: 'button',
                            id: 'Login',
                            itemId: 'Login',
                            margin: '0.1em',
                            ui: 'confirm',
                            text: 'Login',
                            flex: 1
                        
                    ]
                
            ]
        
    ],
    listeners: [            
        
            fn: 'onLoginTap',
            event: 'tap',
            delegate: '#Login'
        
    ]
,


onLoginTap: function(button, e, options) 
// login function here

);

【讨论】:

以上是关于Sencha Architect - 使用表单创建屏幕的主要内容,如果未能解决你的问题,请参考以下文章

Sencha Architect 中的无效会话

Sencha Architect怎么样

Sencha Architect XTemplate 范围

使用 Sencha Architect 2 配置控制器

Sencha Architect 2 - 如何编辑代码

Sencha Architect 中的背景图像