CODEWITHSUNDEEP
sencha-touch-2
Dmitry1405
Dmitry1405

Reputation: 266

Can't render list to div without title, Sencha-Touch 2.0

I can't render list without list's title.

I wasted much time,but I can't find the solution of my problem.

Example: http://jsfiddle.net/q8H48/

And code here:

Ext.application({
name: 'myApp',
launch: function() {


    var listdata = Ext.create('Ext.data.Store', {
       fields : ['title'],
       data   : [ {title: 'Alpha'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'}, {title: 'Charly'} ]
    });


    var test1 = Ext.create('Ext.List', {
       //!!!title: 'Test1',
       itemTpl: '{title}',
       store: listdata
    });


    Ext.create('Ext.tab.Panel', {
        renderTo: 'el',
        height   : '100%',
        items      : [test1],               
    });

}

});

If I remove atributte title, list doesn't render at all.

Any help will be appreciated!

Upvotes: 0

Views: 2628

Answers (2)

rdougan
rdougan

Reputation: 7225

Items within a TabPanel need a title property to display the name on the tab. If you look in the Web Inspector console, you will see the error message:

Error: [ERROR][Ext.Container#onFirstItemAdd] Adding a card to a tab container without specifying any tab configuration.

Also, you shouldn't use the renderTo property. Instead, either add it to Ext.Viewport or set the fullscreen configuration to true:

Ext.Viewport.add({
    xtype: 'tabpanel',
    ...
});

Or fullscreen:

Ext.create('Ext.tab.Panel', {
    fullscreen: true,
    ...
});

You also do not need the height: 100% line, as the layout of the components container will handle the item size.

Here is the proper way to do what you want:

Ext.application({
    name: 'Sencha',
    launch: function() {
        Ext.Viewport.add({
            xtype: 'tabpanel',
            items: [
                {
                    title: 'test',
                    xtype: 'list',
                    itemTpl: '{title}',
                    store: {
                        fields : ['title'],
                        data   : [
                            {title: 'Alpha'},
                            {title: 'Bravo'},
                            {title: 'Alpha'},
                            {title: 'Bravo'},
                            {title: 'Alpha'},
                            {title: 'Alpha'},
                            {title: 'Alpha'},
                            {title: 'Alpha'},
                            {title: 'Alpha'},
                            {title: 'Alpha'}
                        ]
                    }
                }
            ]
        });
    }
});

Upvotes: 1

Saket Patel
Saket Patel

Reputation: 6683

The problem is not in the ListView but the problem is with TabPanel which was not able to adjust layout according to height of ListView if i remove TabPanel wrapper then the ListView works correctly

Ext.application({
    name: 'myApp',
    launch: function() {

        var listdata = Ext.create('Ext.data.Store', {
           fields : ['title'],
           data   : [ {title: 'Alpha'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'}, {title: 'Bravo'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'}, {title: 'Bravo'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'},{title: 'Alpha'}, {title: 'Bravo'}, {title: 'Charly'} ]
        });

        var test2 = Ext.create('Ext.List', {
            // title: 'Test2',
           itemTpl: '{title}',
           store: listdata,
           renderTo: 'el2',
            height   : '100%',
        });
    }
});​​​​​​​

If removing the TabPanel is not an option for you then i can try to find out the exact problem, but if it is possible to remove that then you can use this code

Upvotes: 0

Related Questions