Question

I have taken the form example from 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'
        }
    ]
});

and I have created a timeline object using

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

and then added the timeline to the panel as:

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

How can I add the form object to the timeline? Like how I can show that on it? Where I should add it?

Thanks for the response in advance.

Answer 1

I’m not sure what you are trying to do. Are you trying to have some kind of continuous carousel where you will put the FormPanel?
If so you should extend the Ext.Panel to make that timeline object and then as item use the xtype:’fieldset’ and have the form items there.

For example:

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'
                }
            ]
            }
        ]
});
}});

the Ext.Component is for showing data through the data property. The data is display according to the template you provide i.e. the tpl property but you need to specify the property of the objects you want to show. For example tpl:<div>{text}</div> and data:[{text:'Example'}]