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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi