1. #1
    Sencha User
    Join Date
    Jun 2008
    Posts
    11
    Vote Rating
    0
    Answers
    1
    aceman3000 is on a distinguished road

      0  

    Default Answered: Ext.list: add Button to detail page via script

    Answered: Ext.list: add Button to detail page via script


    I am a total newbie to Sencha Touch 2 and i need your help.
    • I want to add a button onto my detail page in my MVC app. The Button text should be some data out of my store (for example the name field). The button should have a handler for doing something.
    • My Back Button always reads "Back". How can i change that? Setting defaultBackButtonText seems only to work on nested lists (i only have a list)?!
    • I also want to add a carousel to the detail view but don´t know how to do that.
    For better understanding see the following image
    caravan.png

    I have the following code for my FahrzeugeList.js:


    Code:
    Ext.define('caravan.view.FahrzeugeList', {
        extend: 'Ext.List',
        xtype: 'fahrzeugelist',
        requires: ['caravan.store.Fahrzeuge'],
        
        config: {
            title: 'Fahrzeuge',
            itemCls: 'star',
            grouped: true,
            disableSelection: true,
            defaultBackButtonText: 'Zurück',
            useTitleForBackButtonText: true,
            cls:'x-caravans',
            itemTpl: [
                '<div class="headshot" style="background-image:url({thumbnail});"></div>',
                '{name} {preis}',
                '<span>{laenge}</span>'
            ].join(''),
            store: 'Fahrzeuge',
            onItemDisclosure: false
        }});
    Here is my detail view FahrzeugDetail.js:


    Code:
     Ext.define('caravan.view.FahrzeugDetail', {
        extend: 'Ext.Panel',
        xtype: 'fahrzeugdetail',
    
    
        config: {
            title: 'Detail',
            defaultBackButtonText: 'Zurück',
            styleHtmlContent: true,
            scrollable: 'vertical',
            tpl: [
                '<div class="headshot"><img src="{thumbnail}" width="100%" height="200"></div>',
                '<h1>{name}</h1>',
                '<span>{beschreibungstext}</span>',
                '<div class="x-button x-button-action">Anrufen</div>'
            ].join('')
            ,items: [
                {
                    xtype: 'button',
                    text: 'anrufen',
                    ui: 'action'
            }
            ],
        }});
    and here is my Main.js controller that opens the detail view:


    Code:
     Ext.define('caravan.controller.Main', {
        extend: 'Ext.app.Controller',
    
    
        config: {
            refs: {
                main: 'mainpanel',
                container: 'fahrzeugeuebersicht'
            },
            control: {
                //'presidentlist': {
                //    disclose: 'showDetail'
                //},
                list: {
                    itemtap: 'showDetail'
                }
            }
        },
        // Folgende Funktion geht nur wenn das ganze standalone ist
        // also kein TabPanel als Container, sondern Ext.navigation.View
        showDetail: function(list, index, node, record) {
            this.getContainer().push({
                xtype: 'fahrzeugdetail',
                title: record.data.name,
                data: record.getData()
            })
            
            // i found this code. but it was for detail cards
            // var detailBtn = card.down('#productBtn');
            // detailBtn.setText(record.get('name'));
            
        }});

  2. Thanks for you help. I changed from panel to navigationview in fahrzeugepanel, but now it works. Here is what i came up with:

    Main.js controller
    Code:
    Ext.define('caravan.controller.Main', {    extend: 'Ext.app.Controller',
        config: {
            refs: {
                main: 'mainpanel',
                container: 'fahrzeugepanel'
            },
            control: {
                list: {
                    itemtap: 'showDetail'
                }
            }
        },
        // Folgende Funktion geht nur wenn das ganze standalone ist
        // also kein TabPanel als Container, sondern Ext.navigation.View
        showDetail: function(list, index, node, record) {
            //reference the back button from FahrzeugePanel
            //var btn = this.getContainer().down('#backButton'); 
            //btn.setText(record.get('name')); //add you text here
            //btn.setHandler(function here); //add your handler here
            
            this.getContainer().push({
                xtype: 'fahrzeugdetail',
                title: record.get('name'),
                data: record.getData()
            });
        }
    });
    FahrzeugePanel.js view
    Code:
    Ext.define('caravan.view.FahrzeugePanel', {    extend: 'Ext.navigation.View',
        xtype: 'fahrzeugepanel',
        requires: ['caravan.store.Fahrzeuge'],
        config: {
            defaultBackButtonText: 'Zurück',
            items: [{
    
    
                title: 'Fahrzeuge',
                xtype: 'list',
                itemId: 'liste',
                iconCls: 'star',
                cls: 'x-caravans',
                grouped: true,
                itemTpl: [
                    '<div class="headshot" style="background-image:url({thumbnail});"></div>',
                    '{name} {preis}',
                    '<span>{laenge}</span>'
                ].join(''),
                store: 'Fahrzeuge',
                onItemDisclosure: false
            }]   
        }
    });
    FahrzeugDetails.js view
    Code:
    Ext.define('caravan.view.FahrzeugDetail', {    extend: 'Ext.Panel',
        xtype: 'fahrzeugdetail',
        config: {
            styleHtmlContent: true,
            title: 'Details',
            scrollable: true,
            tpl: [
                '<div class="headshot"><img src="{thumbnail}" width="100%" height="200"></div>',
                '<h1>{name}</h1>',
                '<span>{beschreibungstext}</span>'
            ].join(''),
            items: [{
                xtype: 'carousel',
                //carousel config here
                // ...
            }]
        },
        initialize: function(){
            //adding the button here will paint it below
            //the html in the config above
            this.add({
                xtype: 'button',
                // width: 150,
                text: 'Anrufen',
                ui: 'action'
            });
            
            this.callParent(arguments);
        }
    });

  3. #2
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Vote Rating
    99
    Answers
    132
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      0  

    Default


    Lists do not come with a nav bar like Nested Lists do (by using the 'title' config). You would have to add a toolbar to your main panel which has the list as a child element. Then from the toolbar you can have a back button that can be referenced to update its text or modify its handler.

    And it looks like your detail view is just a Panel so you can add a Carousel to that too by including one in your Panel's 'items' config.

    Does this help?

  4. #3
    Sencha User
    Join Date
    Jun 2008
    Posts
    11
    Vote Rating
    0
    Answers
    1
    aceman3000 is on a distinguished road

      0  

    Default


    Thanks for your answer but could you please provide an example? Don´t know how to do it.

  5. #4
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Vote Rating
    99
    Answers
    132
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      0  

    Default


    Just a quick example from using your code:
    Code:
    Ext.define('caravan.controller.Main', {
        extend: 'Ext.app.Controller',
        config: {
            refs: {
                main: 'mainpanel',
                container: 'fahrzeugeuebersicht'
            },
            control: {
                //'presidentlist': {
                //    disclose: 'showDetail'
                //},
                list: {
                    itemtap: 'showDetail'
                }
            }
        },
        // Folgende Funktion geht nur wenn das ganze standalone ist
        // also kein TabPanel als Container, sondern Ext.navigation.View
        showDetail: function(list, index, node, record) {
    		//reference the back button from FahrzeugePanel
    		var btn = this.getContainer().down('#backButton'); 
    		btn.setText(record.get('name')); //add you text here
    		btn.setHandler(function here); //add your handler here
    		
    		
            this.getContainer().push({
                xtype: 'fahrzeugdetail',
                data: record.getData()
            });
        }
    });
    Code:
    Ext.define('caravan.view.FahrzeugePanel', {
        extend: 'Ext.Panel',
        xtype: 'fahrzeugepanel',
        requires: ['caravan.store.Fahrzeuge'],
        config: {
    		layout: 'fit',
    		items: [{
    			xtype: 'titlebar',
    			docked: 'top',
    			itemId: 'navBar',
    			title: 'Fahrzeuge',
    			items: [{
    				xtype: 'button',
    				itemId: 'backButton',
    				text: 'Zurück'
    				//you can add a static handler here or a dynamic one in your controller
    			}]
    		},
    		{
    			xtype: 'list',
    			itemCls: 'star',
    			cls: 'x-caravans',
    			grouped: true,
    			itemTpl: [
    				'<div class="headshot" style="background-image:url({thumbnail});"></div>',
    				'{name} {preis}',
    				'<span>{laenge}</span>'
    			].join(''),
    			store: 'Fahrzeuge',
    			onItemDisclosure: false
    		}]   
        }
    });
    Code:
     Ext.define('caravan.view.FahrzeugDetail', {
        extend: 'Ext.Panel',
        xtype: 'fahrzeugdetail',
        config: {
            styleHtmlContent: true,
            scrollable: true,
            html: [
                '<div class="headshot"><img src="{thumbnail}" width="100%" height="200"></div>',
                '<h1>{name}</h1>',
                '<span>{beschreibungstext}</span>'
            ].join(''),
    		items: [{
    			xtype: 'carousel',
    			//carousel config here
    			// ...
    		}]
        },
    	initialize: function(){
    		//adding the button here will paint it below
    		//the html in the config above
    		this.add({
    			xtype: 'button',
    			width: 150,
    			text: 'Anrufen',
    			ui: 'action'
            });
    		
    		this.callParent(arguments);
    	}
    });
    I haven't tested this, but I hope this gives you the right idea

  6. #5
    Sencha User
    Join Date
    Jun 2008
    Posts
    11
    Vote Rating
    0
    Answers
    1
    aceman3000 is on a distinguished road

      0  

    Default Problem solved

    Problem solved


    Thanks for you help. I changed from panel to navigationview in fahrzeugepanel, but now it works. Here is what i came up with:

    Main.js controller
    Code:
    Ext.define('caravan.controller.Main', {    extend: 'Ext.app.Controller',
        config: {
            refs: {
                main: 'mainpanel',
                container: 'fahrzeugepanel'
            },
            control: {
                list: {
                    itemtap: 'showDetail'
                }
            }
        },
        // Folgende Funktion geht nur wenn das ganze standalone ist
        // also kein TabPanel als Container, sondern Ext.navigation.View
        showDetail: function(list, index, node, record) {
            //reference the back button from FahrzeugePanel
            //var btn = this.getContainer().down('#backButton'); 
            //btn.setText(record.get('name')); //add you text here
            //btn.setHandler(function here); //add your handler here
            
            this.getContainer().push({
                xtype: 'fahrzeugdetail',
                title: record.get('name'),
                data: record.getData()
            });
        }
    });
    FahrzeugePanel.js view
    Code:
    Ext.define('caravan.view.FahrzeugePanel', {    extend: 'Ext.navigation.View',
        xtype: 'fahrzeugepanel',
        requires: ['caravan.store.Fahrzeuge'],
        config: {
            defaultBackButtonText: 'Zurück',
            items: [{
    
    
                title: 'Fahrzeuge',
                xtype: 'list',
                itemId: 'liste',
                iconCls: 'star',
                cls: 'x-caravans',
                grouped: true,
                itemTpl: [
                    '<div class="headshot" style="background-image:url({thumbnail});"></div>',
                    '{name} {preis}',
                    '<span>{laenge}</span>'
                ].join(''),
                store: 'Fahrzeuge',
                onItemDisclosure: false
            }]   
        }
    });
    FahrzeugDetails.js view
    Code:
    Ext.define('caravan.view.FahrzeugDetail', {    extend: 'Ext.Panel',
        xtype: 'fahrzeugdetail',
        config: {
            styleHtmlContent: true,
            title: 'Details',
            scrollable: true,
            tpl: [
                '<div class="headshot"><img src="{thumbnail}" width="100%" height="200"></div>',
                '<h1>{name}</h1>',
                '<span>{beschreibungstext}</span>'
            ].join(''),
            items: [{
                xtype: 'carousel',
                //carousel config here
                // ...
            }]
        },
        initialize: function(){
            //adding the button here will paint it below
            //the html in the config above
            this.add({
                xtype: 'button',
                // width: 150,
                text: 'Anrufen',
                ui: 'action'
            });
            
            this.callParent(arguments);
        }
    });

Thread Participants: 1

Tags for this Thread