Dynamically loading a nestedList using a jsonstore

[logicmedia]

Hi all,

I'm blank on this one. I have a nested list which I would like to link to a store so that it can load an external list from my DB.

Any hint as to how this could be done would be appriciated.

Regards,

Thomas

[blessan]

I would also like to know how thats done. The best I could do was create the first card by using the add method in the render event. Im still not sure how to add items to the first card item list so that it will nest.

[gabrielstuff]

Maybe we could regroup all the post in a bigone. It seams like lot of people are looking for a solution to make a dynamic NestedList based on xhr request.

From my point of view I've tried different way and finally decided to use List and then event handling to go thru the card passing the fire event the precedent card and the nextone. The little lack/problem is that I use global variable and it is not good

[blessan]

Im also know using the list. The main problem for me is the back button. I have to create a button and rewrite the handlers on each cardswitch to get a back button. Dynamic nestedlist is a supreme requirement.

[gabrielstuff]

Do not loose time with rewritting an handle on each card.
I settup the main UI with items which has the backbutton:true/false attribute.
Then using event which I relay in all the card I can display or hide it.

I put some code if you want.

Gabriel

[blessan]

Some code would be great.

[gabrielstuff]

Ext.ux.UniversalUI = Ext.extend(Ext.TabPanel, {
    tabBar: {
        dock: 'bottom',
        layout: {
            pack: 'center'
        }
    },
    fullscreen: true,
    layout: 'card',
    ui: 'black',
    animation: {
        type: 'slide',
    },
    defaults: {
        scroll: 'vertical'
    },
    add: function(c){
        if (!c.extraCard){ //don't add card if it's an not in the tab
            Ext.ux.UniversalUI.superclass.add.call(this, c);
        }
    },        
    onCardSwitch: function(newCard, oldCard, animated) {
        if (newCard.title)
        {
            this.navigationBar.setTitle(newCard.title);
        } 
        
        if (newCard.backButtonEnabled)
        {
            this.backButton.show();
        }
        else
        {
            this.backButton.hide();  
        }
        if (newCard.alertesButtonEnabled)
        {
            this.alertesButton.show();
        }
        else
        {
            this.alertesButton.hide();  
        }
        
        //keep the tab active
        if (!newCard.iconCls)
        {   
            for (i = 0; i<this.tabBar.items.items.length; i++){
                if (this.lastCard[0].title == this.tabBar.items.items[i].card.title)
                {
                    this.tabBar.items.items[i].addClass('x-tab-active');
                }   
            }     
        }    
        if (newCard.iconCls && this.currentTabCard)
        {
            for (i = 0; i<this.tabBar.items.items.length; i++)
            {
                if (newCard.title != this.tabBar.items.items[i].card.title)
                {
                    this.tabBar.items.items[i].removeClass('x-tab-active');
                }   
            }   
        }
    },
    
    onNavigation: function(newCard, oldCard) {
        //clear the history if card from dock   
        if (oldCard.iconCls){
            this.lastCard = [];
            this.currentTabCard = oldCard;
        }
        this.lastCard.push(oldCard);
        
        //change card
        newCard.tab = "";
        this.setCard(newCard, {type: 'slide', direction: 'left'});
        this.currentCard = newCard;
    },
    
    displayAlertNot: function(){
        this.alertesButton.show();
    },
    
    initComponent : function() {
        this.addListener('cardswitch', this.onCardSwitch, this);
        this.addListener('navigation', this.onNavigation, this);

        //this.addListener('beforecardswitch', this.onBeforeCardSwitching, this);
        
        //faire une boucle sur les elements de onglets
        this.relayEvents(onglets.poom, ['navigation']);
        this.relayEvents(onglets.blood, ['navigation']);
        //relay event to equipes
        this.relayEvents(onglets.rim, ['navigation']);
         this.relayEvents(onglets.strat, ['navigation']);
        
        this.backButton = new Ext.Button({
            hidden: true,
            text: 'retour',
            ui: 'back',
            handler: this.onBackButtonTap,
            scope: this
        });
        
        this.alertesButton = new Ext.Button({
            hidden: false,
            text: '@lertes',
            ui: 'action',
            handler: this.onAlertesButtonTap,
            scope: this
        });
            
        this.navigationBar = new Ext.Toolbar({
            ui: 'dark',
            cls: 'topBar',
            dock: 'top',
            title: this.title,
            items: [this.backButton, {xtype: 'spacer'}, this.alertesButton].concat(this.buttons || [])
        });
        
        this.dockedItems = this.dockedItems || [];
        this.dockedItems.unshift(this.navigationBar);
        
        this.items = this.items || [];
        this.items = my.Structure;

        this.addEvents('navigate');
        
             
        //appel à l'implémentation de la superclasse
        Ext.ux.UniversalUI.superclass.initComponent.call(this);
    },
      
    onBackButtonTap : function() {
        this.setCard(this.lastCard.pop(), {type: 'slide', direction: 'right'});
        this.currentCard = this.lastCard;
    },
    onAlertesButtonTap : function() {
        onglets.Phase.fireEvent('navigation', onglets.Alertes, onglets.Calendrier);
        this.currentCard = onglets.Alertes;
    }    

});

my.Main = {
    init : function() {
        
        //construit un objet Ext.ux.UniversalUI à partir de la définition ci-dessus
        this.ui = new Ext.ux.UniversalUI({
            title: 'big bucket',
            navigationItems: my.Structure,
            listeners: {
                navigate : this.onNavigate,
                scope: this
            }
        });
    },
    
    onNavigate : function(ui, item) {
    }
};

Ext.setup({
    tabletStartupScreen: 'resources/img/tablet_startup.png',
    phoneStartupScreen: 'resources/img/phone_startup.png',
    icon: 'resources/img/icon.png',
    glossOnIcon: true,
    
    onReady: function() {
        my.Main.init();
    }
});

We have a stack that maintain the old card and new card. Then for each car we have :

onglets.poom = new Ext.ux.alertForm({
    title: 'Poom',
    extraCard : true,
    backButtonEnabled: true,
    scroll: 'vertical'
});

The only "very bad thing" (that I can think about) here, is that the card are Global

Gabriel