1. #1
    Sencha User
    Join Date
    Apr 2009
    Posts
    14
    Answers
    1
    Vote Rating
    0
    Smeraldo is on a distinguished road

      0  

    Default Answered: Tab Panel with list: open new panel with details on Item Click

    Answered: Tab Panel with list: open new panel with details on Item Click


    Hello,

    I'm a beginner of Sencha Touch 2.

    I'm trying to build an app with this functionality

    1) Main view is a tab panel
    2) The first tab has 3 areas. The last one is a list of products.
    3) Clicking on every products should open a new panel with the details of the selected item.

    I cannot do the third step...

    Here is my code:

    Code:
    Ext.define('Test.view.Main', {
        extend: 'Ext.tab.Panel',
        xtype: 'main',
        requires: [
            'Ext.TitleBar'
        ],
        config: {
            tabBarPosition: 'bottom',
            items: [
    			{
    			title: "Test",
    			iconCls: "star",
    			layout: 'vbox',
    				items: [
    					{
    						docked: 'top',
    						xtype: 'panel',
    						height: 200,
    						html: '<img src="h.jpg" height="200" width="100%" border="0">'
    					},
    					{
    						xtype: 'panel',
    						scrollable: true,
    						html: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac magna augue. Vestibulum eu nibh laoreet lectus imperdiet auctor. Aliquam in mauris quis massa imperdiet interdum.',
    						flex: 1
    					},
    					{
    						xtype: 'list',
    						store: {
    						fields: ['name'],
    						data: [
    							{name: 'AAAA'},
    							{name: 'BBBB'},
    							{name: 'CCCC'},
    							{name: 'DDDD'},
    							{name: 'EEEE'}
    						]
    						},
    						itemTpl: '{name}',
    						flex: 2,
    						listeners: {
    							select: function(view, record) {
    								// Open a new panel with the details of the selected item (record)
    							}
    						}
    					}
    				]
    			}
            ]
        }
    });
    Demo here: http://www.electricblueskies.com/Test/

    Please, help me :-)

  2. Thanks for reply!

    I solved my problem with this code:

    Code:
    Ext.define('Test.view.Main', {
        extend: 'Ext.tab.Panel',
        xtype: 'main',
        requires: [
            'Ext.TitleBar',
    		'Ext.navigation.View'
        ],
        config: {
            tabBarPosition: 'bottom',
            items: [
    			{
    				title: "One",
    				iconCls: "star",
    				layout: 'vbox',
    				items: [
    					{
    						xtype: 'navigationview',
    						id: "pippo",
    						flex: 1,
    						fullscreen: false,
    						items: [
    							{
    								xtype: 'panel',
    								layout: 'vbox',
    								title: "Experience 1",
    								flex: 1,
    								items: [
    									{
    										docked: 'top',
    										xtype: 'panel',
    										height: 200,
    										html: '<img src="h.jpg" height="200" width="100%" border="0">'
    									},
    									{
    											xtype: 'list',
    											flex: 1,
    											store: {
    											fields: ['name'],
    											data: [
    												{name: 'Topolino'},
    												{name: 'Paperino'},
    												{name: 'Minnie'},
    												{name: 'Paperina'},
    												{name: 'Zio Paperone'},
    												{name: 'Gastone'},
    												{name: 'Paperoga'}
    											]
    											},
    											itemTpl: '{name}',
    											
    											listeners: {
    												select: function(view, record) {
    													Ext.getCmp("pippo").push({
    														title: 'Dettaglio '+record.data.name,
    														html: '<center><br><br>Ciao '+record.data.name+'<br><br><img src="a.png" border="0"><br><br></center>'
    													});									
    												}
    											}
    									}
    								]
    							}
    						]
    					}
    				]
    			}
    			,
    			{
    				title: "Two",
    				iconCls: "user",
    				html: "<center><br><br>Tab Two<br><br></center>"
    			}
    			,
    			{
    				title: "Three",
    				iconCls: "user",
    				html: "<center><br><br>Tab Three<br><br></center>"
    			}
    			,
    			{
    				title: "Four",
    				iconCls: "user",
    				html: "<center><br><br>Tab Four<br><br></center>"
    			}
    			,
    			{
    				title: "Five",
    				iconCls: "user",
    				html: "<center><br><br>Tab Five<br><br></center>"
    			}
            ]
        }
    });

  3. #2
    Sencha User
    Join Date
    Apr 2009
    Posts
    14
    Answers
    1
    Vote Rating
    0
    Smeraldo is on a distinguished road

      0  

    Default


    I tried this:

    Code:
    Ext.define('Test.view.Main', {
        extend: 'Ext.tab.Panel',
        xtype: 'main',
        requires: [
            'Ext.TitleBar'
        ],
        config: {
            tabBarPosition: 'bottom',
            items: [
    			{
    			title: "Test",
    			iconCls: "star",
    			layout: 'vbox',
    				items: [
    					{
    						docked: 'top',
    						xtype: 'panel',
    						height: 200,
    						html: '<img src="h.jpg" height="200" width="100%" border="0">'
    					},
    					{
    						xtype: 'panel',
    						scrollable: true,
    						html: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac magna augue. Vestibulum eu nibh laoreet lectus imperdiet auctor. Aliquam in mauris quis massa imperdiet interdum.',
    						flex: 1
    					},
    					{
    						xtype: 'navigationview',
    						id: "pippo",
    						flex: 2,
    						items: [
    							{
    								xtype: 'list',
    								store: {
    								fields: ['name'],
    								data: [
    									{name: 'AAAA'},
    									{name: 'BBBB'},
    									{name: 'CCCC'},
    									{name: 'DDDD'},
    									{name: 'EEEE'}
    								]
    								},
    								itemTpl: '{name}',
    								
    								listeners: {
    									select: function(view, record) {
    										Ext.getCmp("pippo").push({
    											title: 'A new view',
    											html: 'Some new content'
    										});									
    									}
    								}
    							
    							}
    						]
    					}
    				]
    			}
            ]
        }
    });
    but it opens the detail panel in a frame, not fullscreen

    Perhaps I have to put my tab panel inside a navigationview?

  4. #3
    Sencha User Pulp Fiction's Avatar
    Join Date
    Mar 2013
    Location
    Italy
    Posts
    75
    Answers
    2
    Vote Rating
    -1
    Pulp Fiction is an unknown quantity at this point

      0  

    Default


    You need a NestedList and then a TreeStore to view more items in cascade.

    Now try this view:
    Code:
    Ext.define('MyApp.view.MyNestedList', {
        extend: 'Ext.dataview.NestedList',
    
        config: {
            id: 'myList',
            store: 'treeStore'
        }
    
    });
    this is the store:
    Code:
    Ext.define('MyApp.store.TreeStore', {
        extend: 'Ext.data.TreeStore',
    
        requires: [
            'MyApp.model.MyModel'
        ],
    
        config: {
            model: 'MyApp.model.MyModel',
            storeId: 'treeStore',
            defaultRootProperty: 'items',
            root: {
                items: [
                    {
                        text: 'AAAA',
                        items: [
                            {
                                text: 'ABABABAB',
                                items: [
                                    {
                                        text: 'ABCABCABCABC',
                                        leaf: true
                                    },
                                    {
                                        text: 'ABDABDABDABD',
                                        leaf: true
                                    }
                                ]
                            },
                            {
                                text: 'ACACACAC',
                                leaf: true
                            }
                        ]
                    },
                    {
                        text: 'BBBB',
                        items: [
                            {
                                text: 'BCBCBCBC',
                                leaf: true
                            },
                            {
                                text: 'BDBDBDBD',
                                leaf: true
                            },
                            {
                                text: 'BEBEBEBE',
                                leaf: true
                            }
                        ]
                    }
                ]
            }
        }
    });
    and the model:
    Code:
    Ext.define('MyApp.model.MyModel', {
        extend: 'Ext.data.Model',
    
        config: {
            fields: [
                {
                    name: 'text',
                    type: 'string'
                }
            ]
        }
    });

    Now you have to call this NestedList in your main view:

    Ext.define('Test.view.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    requires: [
    ........
    .......................
    //It's okay as long as you do not create the list, that you replace with the NestedList:

    xtype: 'myList'

    ]
    }
    .......
    ......
    });

  5. #4
    Sencha User
    Join Date
    Apr 2009
    Posts
    14
    Answers
    1
    Vote Rating
    0
    Smeraldo is on a distinguished road

      0  

    Default


    Thanks for reply!

    I solved my problem with this code:

    Code:
    Ext.define('Test.view.Main', {
        extend: 'Ext.tab.Panel',
        xtype: 'main',
        requires: [
            'Ext.TitleBar',
    		'Ext.navigation.View'
        ],
        config: {
            tabBarPosition: 'bottom',
            items: [
    			{
    				title: "One",
    				iconCls: "star",
    				layout: 'vbox',
    				items: [
    					{
    						xtype: 'navigationview',
    						id: "pippo",
    						flex: 1,
    						fullscreen: false,
    						items: [
    							{
    								xtype: 'panel',
    								layout: 'vbox',
    								title: "Experience 1",
    								flex: 1,
    								items: [
    									{
    										docked: 'top',
    										xtype: 'panel',
    										height: 200,
    										html: '<img src="h.jpg" height="200" width="100%" border="0">'
    									},
    									{
    											xtype: 'list',
    											flex: 1,
    											store: {
    											fields: ['name'],
    											data: [
    												{name: 'Topolino'},
    												{name: 'Paperino'},
    												{name: 'Minnie'},
    												{name: 'Paperina'},
    												{name: 'Zio Paperone'},
    												{name: 'Gastone'},
    												{name: 'Paperoga'}
    											]
    											},
    											itemTpl: '{name}',
    											
    											listeners: {
    												select: function(view, record) {
    													Ext.getCmp("pippo").push({
    														title: 'Dettaglio '+record.data.name,
    														html: '<center><br><br>Ciao '+record.data.name+'<br><br><img src="a.png" border="0"><br><br></center>'
    													});									
    												}
    											}
    									}
    								]
    							}
    						]
    					}
    				]
    			}
    			,
    			{
    				title: "Two",
    				iconCls: "user",
    				html: "<center><br><br>Tab Two<br><br></center>"
    			}
    			,
    			{
    				title: "Three",
    				iconCls: "user",
    				html: "<center><br><br>Tab Three<br><br></center>"
    			}
    			,
    			{
    				title: "Four",
    				iconCls: "user",
    				html: "<center><br><br>Tab Four<br><br></center>"
    			}
    			,
    			{
    				title: "Five",
    				iconCls: "user",
    				html: "<center><br><br>Tab Five<br><br></center>"
    			}
            ]
        }
    });

Thread Participants: 1

Tags for this Thread