javascript - Sencha touch 2 list inside a panel - Stack Overflow

admin管理员组

文章数量:1026925

Have a pretty mon task to do where I need a search form above a list to display the results, the problem is that the list is not showing the results, the store and the proxy work correctly because when I use firebug to locate the list items the list always have height of 0px.

I have already searched and the mon ways to workaround this is to use a fit layout, but using that on the parent panel makes all look small as if the width used was 10px.

I cant set a fixed height because I want the list to fill the remaining space, and neither the flex option cause that stretches the search form when I want that to use the default size of the buttons and input fields.

Here is the config Im using on 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 Im trying to achieve, I took this screenshot by setting manually a height to the list container, as you can see it works the problem is that the list height doesn't fill the space below the form by default.

Have a pretty mon task to do where I need a search form above a list to display the results, the problem is that the list is not showing the results, the store and the proxy work correctly because when I use firebug to locate the list items the list always have height of 0px.

I have already searched and the mon ways to workaround this is to use a fit layout, but using that on the parent panel makes all look small as if the width used was 10px.

I cant set a fixed height because I want the list to fill the remaining space, and neither the flex option cause that stretches the search form when I want that to use the default size of the buttons and input fields.

Here is the config Im using on 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 Im trying to achieve, I took this screenshot by setting manually a height to the list container, as you can see it works the problem is that the list height doesn't fill the space below the form by default.

• javascript
• sencha-touch-2

Share Improve this question Follow edited May 7, 2012 at 16:53 Aldo Reyes asked May 7, 2012 at 15:18 Aldo ReyesAldo Reyes 51411 gold badge44 silver badges1212 bronze badges 9

• itemTpl:['{title}'], ?.. why are you providing itemTpl an array – Saurabh Gokhale Commented May 7, 2012 at 15:33
• it can be an array according to the docs itemTpl : String/String[]/Ext.XTemplate when you have a multiline template makes it easier to edit. – Aldo Reyes Commented May 7, 2012 at 15:37
• What exactly are your trying to achieve through this code? Your code o/p also seems very much strange – Saurabh Gokhale Commented May 7, 2012 at 15:44
• I'v added an image to the question to better describe it, what part of the code seems strange to you, I've followed the examples on sencha docs as to how to define all this stuff. Thanks! – Aldo Reyes Commented May 7, 2012 at 15:52
• Your entire ponent structure seems odd. Any specific reason for this kind of structuring? – Saurabh Gokhale Commented May 7, 2012 at 16:43

 |  Show 4 more ments

3 Answers 3

Sorted by: Reset to default 1

This is what I ended up doing to solve this, it's more of a workaround since I had to change the layout to only have the list in it, and use toolbars for the search options, this way the toolbar controls only use the minimum height they need to draw themselves correctly.

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 docked at the top, and the list filling the whole layout. Here is a screenshot of how it looks now.

Thanks for your time.

did you tried setting your container layout to "fit"?, basically it will use all the remaining available height, here is a great guide on layouts for sencha touch: http://docs.sencha./touch/2-0/#!/guide/layouts right from the docs!

Panel should have vbox layout, list should have fit layout and set flex option.

As seen if example bellow, if flex value is not set to a button, it should get default size.

From the documentation:

Flexing means we divide the available area up based on the flex of each child ponent...

Here is an example:

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

config: {
  tabBarPosition: 'bottom',

  items: [
    {
      title: 'Wele',
      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 am not sure that written is correct.

Have a pretty mon task to do where I need a search form above a list to display the results, the problem is that the list is not showing the results, the store and the proxy work correctly because when I use firebug to locate the list items the list always have height of 0px.

I have already searched and the mon ways to workaround this is to use a fit layout, but using that on the parent panel makes all look small as if the width used was 10px.

I cant set a fixed height because I want the list to fill the remaining space, and neither the flex option cause that stretches the search form when I want that to use the default size of the buttons and input fields.

Here is the config Im using on 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 Im trying to achieve, I took this screenshot by setting manually a height to the list container, as you can see it works the problem is that the list height doesn't fill the space below the form by default.

Have a pretty mon task to do where I need a search form above a list to display the results, the problem is that the list is not showing the results, the store and the proxy work correctly because when I use firebug to locate the list items the list always have height of 0px.

I have already searched and the mon ways to workaround this is to use a fit layout, but using that on the parent panel makes all look small as if the width used was 10px.

I cant set a fixed height because I want the list to fill the remaining space, and neither the flex option cause that stretches the search form when I want that to use the default size of the buttons and input fields.

Here is the config Im using on 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 Im trying to achieve, I took this screenshot by setting manually a height to the list container, as you can see it works the problem is that the list height doesn't fill the space below the form by default.

• javascript
• sencha-touch-2

Share Improve this question Follow edited May 7, 2012 at 16:53 Aldo Reyes asked May 7, 2012 at 15:18 Aldo ReyesAldo Reyes 51411 gold badge44 silver badges1212 bronze badges 9

• itemTpl:['{title}'], ?.. why are you providing itemTpl an array – Saurabh Gokhale Commented May 7, 2012 at 15:33
• it can be an array according to the docs itemTpl : String/String[]/Ext.XTemplate when you have a multiline template makes it easier to edit. – Aldo Reyes Commented May 7, 2012 at 15:37
• What exactly are your trying to achieve through this code? Your code o/p also seems very much strange – Saurabh Gokhale Commented May 7, 2012 at 15:44
• I'v added an image to the question to better describe it, what part of the code seems strange to you, I've followed the examples on sencha docs as to how to define all this stuff. Thanks! – Aldo Reyes Commented May 7, 2012 at 15:52
• Your entire ponent structure seems odd. Any specific reason for this kind of structuring? – Saurabh Gokhale Commented May 7, 2012 at 16:43

 |  Show 4 more ments

3 Answers 3

Sorted by: Reset to default 1

This is what I ended up doing to solve this, it's more of a workaround since I had to change the layout to only have the list in it, and use toolbars for the search options, this way the toolbar controls only use the minimum height they need to draw themselves correctly.

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 docked at the top, and the list filling the whole layout. Here is a screenshot of how it looks now.

Thanks for your time.

did you tried setting your container layout to "fit"?, basically it will use all the remaining available height, here is a great guide on layouts for sencha touch: http://docs.sencha./touch/2-0/#!/guide/layouts right from the docs!

Panel should have vbox layout, list should have fit layout and set flex option.

As seen if example bellow, if flex value is not set to a button, it should get default size.

From the documentation:

Flexing means we divide the available area up based on the flex of each child ponent...

Here is an example:

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

config: {
  tabBarPosition: 'bottom',

  items: [
    {
      title: 'Wele',
      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 am not sure that written is correct.

本文标签： javascriptSencha touch 2 list inside a panelStack Overflow