Sencha touch 2 list inside the panel

Question

You have a fairly common task to do, where I need a search form on a list to display the results, the problem is that the list does not show results, the repository and proxies work correctly, because when I use firebug to search, the elements of the list always have height 0px.

I have already searched, and common ways to get around this is to use a suitable layout, but using this on the parent panel makes everything small, as if the width were 10px.

I cannot set a fixed height because I want the list to fill the remaining space, and none of the flex options stretch the search form when I want this to use the default size for buttons and input fields.

Here is the Im configuration used in the view

Ext.define('MyApp.view.search.Search', { extend:'Ext.navigation.View', xtype: 'search_view', config:{ items:[ { fullscreen:true, scroll:false, xtype:'panel', title:'Search', items:[ { xtype:'searchfield', name:'search', label:'Search', }, { xtype:'container', layout:'hbox', width:'100%', margin:'3 0 0 0', defaults:{ flex:1 }, items:[ { xtype:'selectfield', options:[ {text:'Option 1', value:'opt1'}, {text:'Option 2', value:'opt2'} ] }, { xtype:'button', text:'Search', action:'search' } ] }, { xtype:'list', itemTpl:['{title}'], onItemDisclosure:true, plugins:[ { xclass: 'Ext.plugin.ListPaging' } ] } ] }, ], } }); 

This image describes what I'm trying to achieve, I took this screenshot by manually setting the height in the list container, as you can see that the problem is that the list height does not fill the space below the default form.

Answer 1

This is what I did to solve this problem, it is rather a workaround, since I had to change the layout to have only a list in it, and use the toolbars for the search options. Thus, the toolbar only controls the use of the minimum height necessary for proper drawing.

 Ext.define('MyApp.view.search.Search', { extend:'Ext.Container', xtype: 'search_view', config:{ fullscreen:true, layout:'card' items:[ { xtype:'toolbar', docked:'top', items:[ { xtype:'searchfield', name:'search', flex:6 }, { xtype:'button', action:'search', iconCls:'search', iconMask:true, ui:'simple', flex:1 } ] }, { xtype:'toolbar', docked:'top', items:[ { xtype:'selectfield', flex:1, options:[ {text:'Option 1', value:'opt1'}, {text:'Option 2', value:'opt2'} ] } ] }, { xtype:'list', itemTpl:['{title}'], onItemDisclosure:true, plugins:[ { xclass: 'Ext.plugin.ListPaging' } ] }, ], } }); 

As you can see, I have two toolbars attached at the top and a list populating the entire layout. Here is a screenshot of what it looks like now.

Thank you for your time.

Answer 2

You tried to set your container layout to "fit" ?, basically it will use the remaining free height, here is an excellent reference for layouts for the senate: http://docs.sencha.com/touch/2-0/#!/guide / layouts directly from documents!

Answer 3

The panel should have a vbox layout, the list should have a fit layout and set flex .

As you can see, if below, if the flex value is not set on the button, it should get the default size.

From the documentation :

Bending means we divide the available area up based on the flexibility of each child component ...

Here is an example:

Ext.define ('MyApp.view.Main', {expand: 'Ext.tab.Panel',

 config: { tabBarPosition: 'bottom', items: [ { title: 'Welcome', iconCls: 'home', html: [ "Some content" ].join("") }, { title: "About", iconCls: 'star', layout: "vbox", // this card has vbox layout items: [{ docked: 'top', xtype: 'titlebar', title: 'List' }, { xtype: "list", layout: "fit", // take as much space as available flex: 1, // define flex data: [ {name: 'Jamie Avins', age: 100}, {name: 'Rob Dougan', age: 21}, {name: 'Tommy Maintz', age: 24}, {name: 'Jacky Nguyen', age: 24}, {name: 'Ed Spencer', age: 26} ], itemTpl: '{name} is {age} years old' }, { xtype: 'button', text: "Button" } ] } ] } 

});

And screenshot:

Note. I am learning Sencha Touch, so I'm not sure what is spelled correctly.