Question

我是Sencha touch的新手。我正在尝试定义一个表单（因为我想重新使用它）但我无法设法在屏幕上显示它。

这是我的表单代码：

Ext.define('WSCP.view.form.PersonForm' , {
    extend: 'Ext.form.Panel'

    , requires: [
        'WSCP.view.text.IdText'
        ,'WSCP.view.text.FirstNameText'
        ,'WSCP.view.text.LastNameText'
        ]
    ,xtype: 'personform'

    ,config: {
        items: [{
            xtype: 'fieldset'
            ,title: 'Who are You'
            ,instructions: 'enter your data'
            ,items: [
                {
                    xtype: 'textfield',
                    name : 'firstName',
                    label: 'First Name'
                }
                ,{ xtype: 'idText' }
                ,{ xtype: 'firstNameText' }
                ,{ xtype: 'lastNameText' }
            ]
        }]
    }   

    ,initialize: function() {
        console.log('initialize form');
        this.callParent();
    }
});

这是我认为的代码：

Ext.define('WSCP.view.HomeView' , {
    extend: 'Ext.Panel'


    ,xtype: 'homecard'

    , requires: [
        'WSCP.view.button.GetButton'
        ,'WSCP.view.button.GetOneButton'
        ,'WSCP.view.button.PutButton'
        ,'WSCP.view.button.PostButton'
        ,'WSCP.view.button.DeleteButton'
        ,'WSCP.view.form.PersonForm'
    ]

    ,config: {
        title: 'Home'
        ,iconCls: 'home'

        ,items: [
            {                
                xtype: 'titlebar'
                ,docked: 'top'
                ,title: 'Home'


                ,items: [
                    { xtype: 'getbutton' }
                    ,{ xtype: 'getOnebutton' }
                    ,{ xtype: 'putbutton' }
                    ,{ xtype: 'postbutton' }
                    ,{ xtype: 'deletebutton' }
                    ,{
                        text: 'Ping'
                        ,action: 'pingAction'
                        ,align: 'right'
                    }
                ]
            }   
                //WHY DOESN'T THIS WORK?
            ,{ xtype: 'personform' }
        ]
    }
});

非常感谢，亚历

Answer 1

当我尝试时，我可以在这里复制这个问题。

试验我也尝试通过引用在控制器中动态添加它，并得到以下结果

//WORKS var myPanel = new Ext.Panel ({ items :[......] }); this.get....().add(myPanel)

//DOESN"T WORK var myPanel = new Ext.form.Panel ({ items :[.......] }); this.get....().add(myPanel);

//但是工作 var myPanel = new Ext.form.Panel（{
高度：300，物品：[.......] }）; 。this.get ....（）添加（myPanel）;`

当我设置height属性时，我得到了Ext.form.Panel。默认情况下，根据配置规范，它为null。如果你设置高度，我说它不起作用。见上面的工作

Answer 2

你的'PersonForm.js'是否在正确的文件夹中（WSCP / view / form）？

另外，我可能错了，但我认为您定义新别名（xtype）的方式如下：

Ext.define('WSCP.view.form.PersonForm' , {
extend: 'Ext.form.Panel'

, requires: [
    'WSCP.view.text.IdText'
    ,'WSCP.view.text.FirstNameText'
    ,'WSCP.view.text.LastNameText'
    ]
**,alias: 'widget.personform',**

see sencha docs

Sencha Touch 2 - 我的表格不显示

2 个答案: