Question

我采用了Sencha Touch API的形式示例

    var form = new Ext.form.FormPanel({
    items: [
        {
            xtype: 'textfield',
            name : 'first',
            label: 'First name'
        },
        {
            xtype: 'textfield',
            name : 'last',
            label: 'Last name'
        },
        {
            xtype: 'numberfield',
            name : 'age',
            label: 'Age'
        },
        {
            xtype: 'urlfield',
            name : 'url',
            label: 'Website'
        }
    ]
});

我已经使用

创建了一个时间轴对象

timeline = new Ext.Component({
        title: 'Loan Details',
        cls: 'timeline',
        scroll: 'vertical',
        tpl: ['<div></div>']
});

然后将时间轴添加到面板中：

panel = new Ext.TabPanel({
        fullscreen: true,
        cardSwitchAnimation: 'slide',
        ui: 'light',
        items: [timeline]
    });

如何将表单对象添加到时间轴？就像我怎么能表明它？我应该在哪里添加它？

感谢您的回复。

Answer 1

我不确定你要做什么。您是否尝试使用某种连续旋转木马放置FormPanel？如果是这样，你应该扩展Ext.Panel来制作那个时间轴对象，然后作为项使用xtype：'fieldset'并在那里有表单项。

例如：

App.views.Timeline = Ext.extend(Ext.Panel, {
initComponent: function() {
  Ext.apply(this, {
        title: 'Loan Details',
        cls: 'timeline',
        scroll: 'vertical',
        items:[
        {
            xtype: 'fieldset',
            defaults: {
            labelAlign: 'left',
            labelWidth: 'auto',
            }
            items: [
                {
                    xtype: 'textfield',
                    name : 'first',
                    label: 'First name'
                },
                {
                    xtype: 'textfield',
                    name : 'last',
                    label: 'Last name'
                },
                {
                    xtype: 'numberfield',
                    name : 'age',
                    label: 'Age'
                },
                {
                    xtype: 'urlfield',
                    name : 'url',
                    label: 'Website'
                }
            ]
            }
        ]
});
}});

Ext.Component用于通过data属性显示数据。根据您提供的模板（即tpl属性）显示数据，但您需要指定要显示的对象的属性。例如tpl:<div>{text}</div>和data:[{text:'Example'}]

在sencha touch中将表单添加到时间轴对象

1 个答案: