1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    61
    Vote Rating
    0
    aguerra10 is on a distinguished road

      0  

    Default "Dynamic" List

    "Dynamic" List


    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!!!

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,074
    Vote Rating
    855
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    61
    Vote Rating
    0
    aguerra10 is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    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!!

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,074
    Vote Rating
    855
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Yes. The container shouldn't use a layout, the lists should disable scrolling and the container should use scrolling.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Nov 2011
    Posts
    61
    Vote Rating
    0
    aguerra10 is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    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...

  6. #6
    Sencha User
    Join Date
    Nov 2011
    Posts
    61
    Vote Rating
    0
    aguerra10 is on a distinguished road

      0  

    Default


    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

  7. #7
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,074
    Vote Rating
    855
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Here is an example:

    Code:
    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'
                            }
                        ]
                    }
                ]
            }
        ]
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  8. #8
    Sencha User
    Join Date
    Nov 2011
    Posts
    61
    Vote Rating
    0
    aguerra10 is on a distinguished road

      0  

    Default


    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:

    Code:
    {
    xtype : 'list',
    scrollable : false,
    itemTpl : '<div>test</div>',
    store : 'MyStore'
    }
    I then get the store and load it...

    Code:
    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();
        }
    });

  9. #9
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,074
    Vote Rating
    855
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Code:
    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:

    Code:
    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'
                            }
                        ]
                    }
                ]
            }
        ]
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  10. #10
    Sencha User
    Join Date
    Feb 2012
    Posts
    28
    Vote Rating
    0
    DreadyCoder is on a distinguished road

      0  

    Default


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