"Dynamic" List

[aguerra10]

Hi all,

I need my list to automatically change its height whenever stores am trying to implement a class which extends from Ext.List and use the 'updatedate' event but I am not sure of certain points such as.. where do I have to save my class (in which directory), how do I import it into the project (as it is not a model/view/controller)?

Am I facing my problem the right way or is this not a possible solution to make a list "dynamic"?

Thanks!!!

[mitchellsimoens]

If you don't have the list within another layout then the list will auto height but scrolling may not work. What is your class name? If it is a List then it should go in the view folder.

[aguerra10]

If you don't have the list within another layout then the list will auto height but scrolling may not work. What is your class name? If it is a List then it should go in the view folder.

Hi mitchell,

The list is inside a container with another list and a form... I want the main container to be scrollable and the two lists inside it to change their height when their stores are reloaded.

Do you think that this could be done?

Thanks!!

[mitchellsimoens]

Yes. The container shouldn't use a layout, the lists should disable scrolling and the container should use scrolling.

[aguerra10]

Yes. The container shouldn't use a layout, the lists should disable scrolling and the container should use scrolling.

mitchell,

It's not working.. I mean.. The list container is without layout right now. I reload the list store (it has items) and their height remains in cero (I guess) because the list is not showing (only the top border).. However if in the callback of the store.load I get the number of items and set the list height manually using this number and the height of an item to calculate the total height, the list appears...

[aguerra10]

I used a breakpoint in the callback of the store.load, got the view.. and the height is undefined.. I tried doing list.refresh(); without success, the list remains with its height undefined.. If I manually set its height, the list is shown..

EDIT: the height is not undefined, it is null

[mitchellsimoens]

Here is an example:

new Ext.Container({
    fullscreen : true,
    scrollable : 'vertical',
    items      : [
        {
            xtype      : 'list',
            scrollable : false,
            itemTpl    : '<div>{test}</div>',
            store      : new Ext.data.Store({
                fields  : ['test'],
                data    : [
                    {
                        test : 'One'
                    },
                    {
                        test : 'Two'
                    },
                    {
                        test : 'Three'
                    },
                    {
                        test : 'Four'
                    },
                    {
                        test : 'Five'
                    },
                    {
                        test : 'Six'
                    },
                    {
                        test : 'Seven'
                    },
                    {
                        test : 'Eight'
                    },
                    {
                        test : 'Nine'
                    },
                    {
                        test : 'Ten'
                    }
                ]
            })
        },
        {
            xtype      : 'list',
            scrollable : false,
            itemTpl    : '<div>{test}</div>',
            store      : new Ext.data.Store({
                fields  : ['test'],
                data    : [
                    {
                        test : 'A'
                    },
                    {
                        test : 'B'
                    },
                    {
                        test : 'C'
                    },
                    {
                        test : 'D'
                    },
                    {
                        test : 'E'
                    },
                    {
                        test : 'F'
                    },
                    {
                        test : 'G'
                    },
                    {
                        test : 'H'
                    },
                    {
                        test : 'I'
                    },
                    {
                        test : 'J'
                    },
                    {
                        test : 'K'
                    },
                    {
                        test : 'L'
                    }
                ]
            })
        },
        {
            xtype      : 'formpanel',
            height     : 100,
            scrollable : false,
            layout     : {
                type  : 'vbox',
                align : 'stretch'
            },
            items      : [
                {
                    xtype : 'textfield',
                    flex  : 1,
                    label : 'Test'
                },
                {
                    xtype       : 'container',
                    flex        : 1,
                    defaultType : 'button',
                    layout      : {
                        type  : 'hbox',
                        align : 'stretch'
                    },
                    items       : [
                        {
                            text : 'Reset',
                            flex : 1,
                            ui   : 'decline'
                        },
                        {
                            text : 'Save',
                            flex : 1,
                            ui   : 'confirm'
                        }
                    ]
                }
            ]
        }
    ]
});

[aguerra10]

That worked, and the only important difference between my code and yours is that you've passed a store with data inside and that I associate an empty store and load it with an ajax request.

Here is my list:

{
xtype : 'list',
scrollable : false,
itemTpl : '<div>test</div>',
store : 'MyStore'
}

I then get the store and load it...

Ext.getStore('MyStore').load({
    scope   : this,
    params: {
        // pass some params
    },
    callback: function(records, operation, success) {
        // I supposed that after loading the list store the list would automatically changes its height.
        // but it doesn't. If I asked for the list heights it is null
        // So I guess that I should call a function to tell the list that its store has new elements and
        // it should change its height... I tried with refresh() but did not work..
        // As I said before, the only thing that worked was setHeight();
    }
});

[mitchellsimoens]

new Ext.Container({
    fullscreen : true,
    scrollable : 'vertical',
    items      : [
        {
            xtype      : 'list',
            scrollable : false,
            itemTpl    : '<div>{test}</div>',
            store      : new Ext.data.Store({
                fields   : ['test'],
                autoLoad : true,
                proxy    : {
                    type   : 'ajax',
                    url    : 'data/json.json',
                    reader : 'json'
                }
            })
        },
        {
            xtype      : 'list',
            scrollable : false,
            itemTpl    : '<div>{test}</div>',
            store      : new Ext.data.Store({
                fields  : ['test'],
                data    : [
                    {
                        test : 'A'
                    },
                    {
                        test : 'B'
                    },
                    {
                        test : 'C'
                    },
                    {
                        test : 'D'
                    },
                    {
                        test : 'E'
                    },
                    {
                        test : 'F'
                    },
                    {
                        test : 'G'
                    },
                    {
                        test : 'H'
                    },
                    {
                        test : 'I'
                    },
                    {
                        test : 'J'
                    },
                    {
                        test : 'K'
                    },
                    {
                        test : 'L'
                    }
                ]
            })
        },
        {
            xtype      : 'formpanel',
            height     : 100,
            scrollable : false,
            layout     : {
                type  : 'vbox',
                align : 'stretch'
            },
            items      : [
                {
                    xtype : 'textfield',
                    flex  : 1,
                    label : 'Test'
                },
                {
                    xtype       : 'container',
                    flex        : 1,
                    defaultType : 'button',
                    layout      : {
                        type  : 'hbox',
                        align : 'stretch'
                    },
                    items       : [
                        {
                            text : 'Reset',
                            flex : 1,
                            ui   : 'decline'
                        },
                        {
                            text : 'Save',
                            flex : 1,
                            ui   : 'confirm'
                        }
                    ]
                }
            ]
        }
    ]
});

With this JSON it all works:

new Ext.Container({
    fullscreen : true,
    scrollable : 'vertical',
    items      : [
        {
            xtype      : 'list',
            scrollable : false,
            itemTpl    : '<div>{test}</div>',
            store      : new Ext.data.Store({
                fields   : ['test'],
                autoLoad : true,
                proxy    : {
                    type   : 'ajax',
                    url    : 'data/json.json',
                    reader : 'json'
                }
            })
        },
        {
            xtype      : 'list',
            scrollable : false,
            itemTpl    : '<div>{test}</div>',
            store      : new Ext.data.Store({
                fields  : ['test'],
                data    : [
                    {
                        test : 'A'
                    },
                    {
                        test : 'B'
                    },
                    {
                        test : 'C'
                    },
                    {
                        test : 'D'
                    },
                    {
                        test : 'E'
                    },
                    {
                        test : 'F'
                    },
                    {
                        test : 'G'
                    },
                    {
                        test : 'H'
                    },
                    {
                        test : 'I'
                    },
                    {
                        test : 'J'
                    },
                    {
                        test : 'K'
                    },
                    {
                        test : 'L'
                    }
                ]
            })
        },
        {
            xtype      : 'formpanel',
            height     : 100,
            scrollable : false,
            layout     : {
                type  : 'vbox',
                align : 'stretch'
            },
            items      : [
                {
                    xtype : 'textfield',
                    flex  : 1,
                    label : 'Test'
                },
                {
                    xtype       : 'container',
                    flex        : 1,
                    defaultType : 'button',
                    layout      : {
                        type  : 'hbox',
                        align : 'stretch'
                    },
                    items       : [
                        {
                            text : 'Reset',
                            flex : 1,
                            ui   : 'decline'
                        },
                        {
                            text : 'Save',
                            flex : 1,
                            ui   : 'confirm'
                        }
                    ]
                }
            ]
        }
    ]
});

[DreadyCoder]

This would completely fix a need i have if you could instruct me if/how to use this with a list of 'textfield's