Ext.list: add Button to detail page via script

[aceman3000]

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:

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:

 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:

 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'));
        
    }});

[jerome76]

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?

[aceman3000]

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

[jerome76]

Just a quick example from using your 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()
        });
    }
});

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
		}]   
    }
});

 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

[aceman3000]

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

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

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

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);
    }
});