Disable/hide toolbar in NestedList

Question

my Friday evening was spent on fighting with unexpected problem) It's about how to disable native toolbar in NestedList component (for Sencha touch 2.3.1).

NestedList is created with Toolbar by default. The last one have default configuration:

toolbar: {docked: 'top', xtype: 'titlebar', ui: 'light', inline: true}

According to API docs.sencha.com/touch/2.3.1/#!/api/Ext.dataview.NestedList-cfg-toolbar toolbar configuration look's like

toolbar : Ext.Toolbar/Object/Boolean

so i suppose that Boolean means display (true) or not (false)

Well, let's do some ~~magic~~ practice, here is my example:

var data = {
     text: 'Groceries',
     items: [{
         text: 'Drinks',
         items: [{
             text: 'Water',
             items: [{
                 text: 'Sparkling',
                 leaf: true
             }, {
                 text: 'Still',
                 leaf: true
             }]
         }, {
             text: 'Coffee',
             leaf: true
         },]
     }, ]
 };

 Ext.define('ListItem', {
     extend: 'Ext.data.Model',
     config: {
         fields: [{
             name: 'text',
             type: 'string'
         }]
     }
 });

 var store = Ext.create('Ext.data.TreeStore', {
     model: 'ListItem',
     defaultRootProperty: 'items',
     root: data
 });

 var nestedList = Ext.create('Ext.NestedList', {
     fullscreen: true,
     title: 'Groceries',
     displayField: 'text',
     store: store,
     //toolbar: false
 });

uncommenting // toolbar: false leads to errors, something like

uncaught TypeError: Object # has no method 'insert'

and so on. Look's like Sencha try to execute 'insert' method on unexisting component (because it's disabled, toolbar is set to false)

Raxr Raxr · Accepted Answer · 2014-06-17T21:12:18

Perhaps a late answser, but I stumbled upon your question and I managed to workaround without any modification to the source files.

Just set toolbar:{hidden:true} in the nested list' config.

config: {
    // other settings
    toolbar: {hidden: true}
}

Let me know if this works for you or if you want me to make a Fiddle!

Disable/hide toolbar in NestedList

2 Answers