StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
20570767
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2013-12-13T16:03:01.973
FavoriteCount
0
LastActivityDate
2013-12-13T16:03:01.973
LastEditDate
LastEditorUserId
0
OwnerUserId
1410232
ParentId
5815834
PostTypeId
2
Score
0
ViewCount
0
LastEditorDisplayName
text
Body
Old question, I know, but to solve this, you can remove the toolbar from the list (without destroying it) and add it to a panel above the list. All nestedList functionality stays the same on the toolbar. Here's the solution I have: First, I created a view that extends from NestedList and contains a toolbar: <pre><code>Ext.define('MyApp.view.DynamicList', { extend: 'Ext.dataview.NestedList', alias: 'widget.dynamiclist', config: { toolbar: { xtype: 'toolbar', docked: 'top', itemId: 'header-bar', layout: { pack: 'end', type: 'hbox' }, items: [ { xtype: 'spacer' }, { xtype: 'button', itemId: 'show-nav-sheet-button', ui: 'plain', width: 45, iconCls: 'more' } ] } } }); </code></pre> Next, I created a main panel with a vbox layout that contains a child panel and this toolbar: <pre><code>Ext.define('MyApp.view.MainContainer', { extend: 'Ext.Container', requires: [ 'MyApp.view.DynamicList' ], config: { id: 'main-container', layout: { type: 'vbox' }, items: [ { xtype: 'panel', flex: 1, itemId: 'info-container' }, { xtype: 'dynamiclist', flex: 1 } ] } }); </code></pre> Then, in a controller, I listen for the initialize event of the nested list. When it's fired, I remove the toolbar from the nested list and add it to the panel. <pre><code>onNestedListInitialize: function() { // need to wait until everythin is initialized; var me = this; var renderFn = function renderPanels() { var main = me.getMainContainer(); // wait until main is intialized; if(!main) { Ext.defer(renderFn, 50, this); return; } var list = main.down('#my-list'); var infocont = main.down('#info-container'); // wait until the container's components are initialized if(!list || !infocont) { Ext.defer(renderFn, 50, this); return; } // remove the toolbar from the list, and add it to the container. var toolbar = list.down('#header-bar'); list.remove(toolbar, false); infocont.add(toolbar); } // call the function for the first time. renderFn(); } </code></pre> Note, I had to add a few checks to make sure the components were correctly initialized before using them, but the heart of it comes to the list.remove(toolbar, false) followed by the infocont.add(toolbar) commands. The false flag in the .remove() method means that the item won't be destroyed, so it's available to be re-added to the panel.
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POSencha Touch, dock panel inside Nested List
 singulars
 PostTypePostTypeId
 PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USKyle Fransham
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.