0
votes

I'm new with Sencha Touch 2 and I've got a trouble using nested list: toolbar duplicates along with back button, so at the end of nested list I have 3 toolbars with 3 back buttons. I guess that the reason is that I create Ext.nestedList for each detailed card, useToolbar:false doesn't fix the problem because then I can't go to previous list. Maybe back button needs to be overwritten but I've got no idea of that. Any help would be very useful. Here is top part of code:

    Ext.define('ListItem', {
    extend: 'Ext.data.Model',
    config: {
        fields: ['text'],
    },

});

var treeStore = Ext.create("Ext.NestedList", {

    fullscreen: true,
    tabBarPosition: 'bottom',

    title: 'Now-Yakutsk',
    iconCls: 'star',
    displayField: 'title',
    layout: 'card',

    store: {
        type: 'tree',
        id: 'ListCard',
        fields: [
            'title','code',
            {name: 'leaf', defaultValue: true}
        ],

        root: {
            leaf: false
        },

        proxy: {
            type: 'jsonp',
            url: 'http://now/catlist.php',
            reader: {
                type: 'json',
                rootProperty: 'cat'
            }
        }
    },                                                                      

    listeners: { 

                leafitemtap: function(nestedList, list, index, target, record) {

                    var treeStore2 = Ext.create("Ext.NestedList", {

                    fullscreen: true,
                    tabBarPosition: 'bottom',
                    //useToolbar:false,

                        //leaf: true ,
                        iconCls: 'star',
                        displayField: 'title',

                    store: {
                        type: 'tree',
                        id: 'detailCard',
                        fields: [
                            'title','code','link',
                            {name: 'leaf', defaultValue: true}
                        ],

                        root: {
                            leaf: false
                        },

                        proxy: {
                            type: 'jsonp',
                            url: 'http://now/catlist2.php',
                            reader: {
                                type: 'json',
                                rootProperty: 'cat'
                            }
                        }
                    },

                    detailCard: {   useToolbar:true,
                                    xtype: 'panel',
                                    scrollable: true,
                                    styleHtmlContent: true
                                },

                    listeners: {

                        leafitemtap: function(nestedList, list, index, target, record) {
                            var cin = Ext.create("Ext.NestedList", {
                                fullscreen: true,
                                tabBarPosition: 'bottom',
                                //useToolbar:false,
                                        //title: 'Blog',
                                        iconCls: 'star',
                                        displayField: 'list',

                                        store: {
                                            type: 'tree',

                                            fields: [
                                                'name', 'link', 'list', 'image', 'adress', 'banner',
                                                {name: 'leaf', defaultValue: true}
                                            ],

                                            root: {
                                                leaf: false
                                            },

                                            proxy: {
                                                type: 'jsonp',
                                                url: 'http://now/cinemalist.php',
                                                reader: {
                                                    type: 'json',
                                                    rootProperty: 'cinema'
                                                }
                                            }
                                        },

                                        detailCard: {
                                            xtype: 'panel',
                                            scrollable: true,
                                            styleHtmlContent: true
                                        },

                                        listeners: {
                                            leafitemtap: function(nestedList, list, index, element, post) {
                                                this.getDetailCard().setHtml(post.get('banner'));
                                            }
                                        }


                            });

and the screenshot:

http://piccy.info/view3/4985552/cdfd1dcca3928d4a5d4b4b41ba060b1f/

1

1 Answers

1
votes

found solution in case someone else has the same problem -the point is hiding and showing the toolbar playing with active deactive methods for example in parent we create

                 listeners: {  activate : function() { 
                        //this.getToolbar().hide();
                        tb = this.getToolbar();

                         } ,
                         deactivate: function() {
                        //this.getToolbar().hide();                          


}

then in child we put

 listeners: {
                             activate : function() {         
                                                            tb1 = this.getToolbar();
                                                            tb1.hide();
                                                            tb.show(); 


                            //this.getToolbar().hide();

                             } ,
                             deactivate: function() {       
                                //tb.show(); 
                                //alert('dd');
                            //this.getToolbar().hide();                           

    }

and so on ...