CODEWITHSUNDEEP
extjssencha-touchsencha-touch-2
Morris Singer
Morris Singer

Reputation: 1725

Get an Ext.dataview.List instance to show up inside of an Ext.tab.Panel instance

I cannot figure out how to show my Ext.dataview.List object inside of another object. If I try to show the Ext.dataview.List object in the viewport, by itself, I can see my data. But if I try to include it as a component inside of another component, it thinks there is no data (judging from the HTML output), and doesn't appear to display anything.

So, if I have an app.js with the following code:

Ext.application({
    name: 'MobileUnion',

    views:          ['LocalsList'],
    models:         ['Local'],
    stores:         ['Locals'],

    launch: function() {
        // Initialize the main view
         var mainView = {
                xtype: 'localslist'
        };
        Ext.Viewport.add([mainView]);
    }
});

I can set up MobileUnion.view.LocalsList this way, which results in no list:

Ext.define('MobileUnion.view.LocalsList', {
    extend: 'Ext.Container',
    alias: 'widget.localslist',
    requires: 'Ext.dataview.List',

    config: {
        items: [
            {
                itemId: 'localsList',
                store: 'Locals',
                loadingText: 'Loading Locals...',
                emptyText: '<div>No locals found.</div>',
                onItemDisclosure: true,
                itemTpl: '<div>{localName}</div><div>{designation}</div>'

            }
        ]
    }
});

Or, I can set it up this way, which results in a populated list, but not inside of another component:

Ext.define('MobileUnion.view.LocalsList', {
    extend: 'Ext.dataview.List',
    alias: 'widget.localslist',

    config: {

                itemId: 'localsList',
                store: 'Locals',
                loadingText: 'Loading Locals...',
                emptyText: '<div>No locals found.</div>',
                onItemDisclosure: true,
                itemTpl: '<div>{localName}</div><div>{designation}</div>'


    }
});

The reason I am trying to pull this off is so that I can get a list component to display inside of a tab panel.

Note: I have assembled a Fiddle with everything, here: http://www.senchafiddle.com/#6nCH8

I must be missing something basic, but at this point, having gone through the documentation, and purchased two books, one of which I've read fully, and the other of which I am reading while coding, I am still without an answer. Any help would be most greatly appreciated.

Additional Code

app/model/Local.js

Ext.define('MobileUnion.model.Local', {
    extend: 'Ext.data.Model',
    config: {
        idProperty: 'id',
        fields: [
            { name: 'id', type: 'int' },
            { name: 'dateCreated', type: 'date', dateFormat: 'c' },
            { name: 'localName', type: 'string' },
            { name: 'designation', type: 'string' }
        ],
    }
});

app/store/Locals.js

Ext.define('MobileUnion.store.Locals', {
    extend: 'Ext.data.Store',
    requires: ['MobileUnion.model.Local'],
    config: {
        model: 'MobileUnion.model.Local',
        data: [
            { localName: 'ABCD', designation: '123' },
            { localName: 'WXYZ', designation: '456' }
        ],
        autoLoad: true,
        sorters: [{ property: 'dateCreated', direction: 'DESC'}]
    }
});

Upvotes: 1

Views: 1703

Answers (1)

weerd2
weerd2

Reputation: 690

In option 1, you define a container but you actually don't add items to you container. To add your list to the container, add xtype: 'list' to your items array. Next thing you have to do is to set the containers layout to fit, otherwise the list won't show up. This should work for you:

Ext.define('MobileUnion.view.LocalsList', {
    extend: 'Ext.Container',
    alias: 'widget.localslist',
    requires: 'Ext.dataview.List',

    config: {
        layout: {
            type: 'fit' //set containers layout
        },
        items: [
            {
                xtype: 'list', //add xtype
                itemId: 'localsList',
                store: 'Locals',
                loadingText: 'Loading Locals...',
                emptyText: '<div>No locals found.</div>',
                onItemDisclosure: true,
                itemTpl: '<div>{localName}</div><div>{designation}</div>'

            }
        ]
    }
});

More about layouts in Sencha: http://docs.sencha.com/touch/2-1/#!/guide/layouts

Good luck!

Upvotes: 1

Related Questions