1

I am new to Senscha Touch and I have been struggling with this for hours.

I am trying to create an application where the main page has 1-3 tabs where title and content(html5) depends on json data.

My model has two fields: "title" and "text". My store has dummy data for 2 tabs:

Ext.define('***', {
    extend: 'Ext.data.Store',
    config: {
        model: '***',
        xtype: 'informationTabs',
        data: [
            {
                title: 'Museum',
                text: 'Random html5'
            },
            {
                title: 'Museum_2',
                text: 'Random html5_2'
            },
            {
                title: 'Museum_3',
                text: 'Random html5_2'
            }
        ]
    }
})

To show it as a list i have the following code:

Ext.define('***', {
    extend: 'Ext.Panel',
    xtype: 'informationsTabs',
    config: {
        title: 'InformationTabs',
        layout: 'fit',
        items: [
            {
                xtype: 'list',
                store: 'InformationTabs',
                itemTpl: '{title}, {text}'
            }
        ]
    }
});

How do I get that to instead of making a list with two items, create two tabs with their title and text inside?

So in this case i should have two tabs. Tab 1: Title = "title_1", content = "random_html5" Tab 2: Title = "title_2", content = "random_html5_2"

Update: With the following code (thanks kevhender!) it "works", except i get an extra "[object Object]" as the first tab. This option is also the only one with blue background when you click that tab.

Also this.callParent(); gets "Unresolved function or method".

Ext.define('***', {
extend: 'Ext.TabPanel',
xtype: 'informationsTabs',
config: {
    title: 'informationsTabs',

    items: [
        {
            xtype: 'tabbar',
            store: 'InformationTabs',
            title: '',
            html: ['']
        }
    ]
},
initialize: function() {
    var items = [];
    Ext.getStore('InformationTabs').each(function(rec) {
        items.push({
            title: rec.get('title'),
            html: rec.get('text')
        });
    });
    this.setItems(items);
    this.callParent();
} });

screenshot: http://oi41.tinypic.com/2gsn53p.jpg

4

1 に答える 1

1

configストアは動的であるため、静的ブロックで完全な定義を行うことはできません。initialize次のように、タブの作成をメソッドに入れることができます。

Ext.define('***', {
    extend: 'Ext.tab.Panel',
    xtype: 'informationsTabs',
    config: {
        title: 'InformationTabs',
        layout: 'fit',
        items: [
            {
                xtype: 'list',
                store: 'InformationTabs',
                itemTpl: '{title}, {text}'
            }
        ]
    },
    initialize: function() {
        var items = [];
        Ext.getStore('InformationTabs').each(function(rec) {
            items.push({
                title: rec.get('title'),
                html: rec.get('text')
            });
        });
        this.setItems(items);
        this.callParent();
    }
});
于 2013-10-04T16:05:07.347 に答える