Databases
StackOverflow2013
Postsdbo
POSencha Touch, dock panel inside Nested List
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSencha Touch, dock panel inside Nested List
    text
    copied!<p>I have a Sencha Touch app that has a nested list. </p> <p>The nestedList automatically creates its own toolBar. </p> <p>I would like to dock a panel below the toolbar, but above the list-items. And I only need this on the top-level of the list. I am hoping to have it disappear after the first leaf is selected.</p> <p>Does this sound like something doable? As you can see in my code, I only have the ability to dock an item panel on top of the current toolbar.</p> <p>Thanks so much in advance. I really appreciate any advice you guys might have.</p> <ul> <li>Al.</li> </ul> <p>Below is what I have so far...</p> <blockquote> <pre><code> // Menu Pages var menu = new Ext.NestedList({ fullscreen: true, title: 'Menu', displayField: 'text', store: menu_store, </code></pre> </blockquote> <pre><code>// ** This is the dockedItem I would like to insert between the toolbar and list-items dockedItems: [ { xtype : 'panel', dock : 'top', html : '&lt;span&gt;This is the logo panel&lt;/span&gt;', cls : 'front-logo-panel', flex : 1 }], // Add Panel for Leaf nodes getDetailCard: function(item, parent) { var itemData = item.attributes.record.data, parentData = parent.attributes.record.data, detailCard = new Ext.Panel({ scroll: 'vertical', cls: 'menu-item-panel', styleHtmlContent : true, tpl: menuTemplate, // add button to Leaf Node listeners: { activate: function() { Ext.getCmp('itemToolbar').setTitle('New Title Bar'); } } }); detailCard.update(itemData); this.backButton.setText(parentData.text); return detailCard; }, // add template for all nodes getItemTextTpl: function() { var tplConstructor = '&lt;tpl if="newItem"&gt;' + '&lt;span class="list-new-item"&gt;New&amp;nbsp;Item!&lt;/span&gt;' + '&lt;/tpl&gt;'+ '{text}' + '&lt;tpl&gt;'+ '&lt;div class="metadata"&gt;' + '{description:ellipsis(40)}' + '&lt;/div&gt;' + '&lt;/tpl&gt;'; return tplConstructor; } }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload