如何使用 Sencha touch 动态创建 UI 组件？答案

【问题标题】：How to create UI components dynamically using Sencha touch?如何使用 Sencha touch 动态创建 UI 组件？
【发布时间】：2011-09-23 05:25:39
【问题描述】：

我是 Sencha touch API 的初学者。我真的很难使用 Sencha touch lib 制作 UI 组件。我创建了一些示例 UI。但它现在本质上是静态的。我怎样才能使它动态。动态意味着我希望我的 JSON 响应来决定要在屏幕上添加的组件。我怎样才能做到这一点。请帮帮我。

Ext.setup({
    icon: 'icon.png',
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    glossOnIcon: false,

    onReady: function() {

        var form;

        var formBase = {
            scroll : 'vertical',            
            standardSubmit : false,
            items: [
                {
                    xtype: 'fieldset',
                    title: 'Login Screen',
                    instructions: 'Enter agent number and password to login.',
                    defaults: {
                        required: true,
                        labelAlign: 'left',
                        labelWidth: '45%'
                    },
                    items: [
                    {
                        xtype: 'textfield',
                        name : 'username',
                        label: 'Agent Number',
                        useClearIcon: true
                    }, {
                        xtype: 'passwordfield',
                        name : 'password',
                        label: 'Password',
                        useClearIcon: false
                    }]                   
                }],
            listeners : {
                submit : function(form, result){
                    console.log('success', Ext.toArray(arguments));
                },
                exception : function(form, result){
                    console.log('failure', result);
                }
            },

            dockedItems: [
                {
                    xtype: 'toolbar',
                    dock: 'bottom',
                    items: [
                        {
                            text: 'Exit',
                            ui: 'exit',
                            handler: function() {
                                  alert('Are you sure ?');                               
                            } 
                        },
                        {
                            text: 'Login',
                            ui: 'confirm',
                            handler: function() {
                                  alert('Login please wait..');
                            } 
                        }
                    ]
                }
            ]       
        };

        if (Ext.is.Phone) {
            formBase.fullscreen = true;
        } else {
            Ext.apply(formBase, {
                autoRender: true,
                floating: true,
                modal: true,
                centered: true,
                hideOnMaskTap: false,
                height: 385,
                width: 480
            });
        }

        form = new Ext.form.FormPanel(formBase);
        form.show();
    }
});

【问题讨论】：

标签： sencha-touch extjs

【解决方案1】：

要向面板添加项目，请使用panel.items.add(list);，然后不要忘记调用panel.doLayout();。请参阅此问题，例如 Calling the items.add method twice causes the two items to overlap on the card

【讨论】：

Sencha Touch 2 中没有 doLayout。他们说它会自动发生，但对我不起作用。

【解决方案2】：

Dyanmic forms from json file in sencha touch

检查此链接我已经发布了解决方案。您只需要通过 JSON 发送视图的 xtype 即可。无论您想要什么。我还发布了创建动态视图的 json 文件和代码。hOpe 它会帮助你

【讨论】：