Results 1 to 5 of 5

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

  1. #1
    Sencha User
    Join Date
    Jun 2008
    Posts
    11
    Answers
    1
    Vote Rating
    0
      0  

    Default 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 dont 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: 'Zurck',
            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: 'Zurck',
            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: 'Zurck',
            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
    Answers
    132
    Vote Rating
    100
      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
    Answers
    1
    Vote Rating
    0
      0  

    Default

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

  5. #4
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    100
      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: 'Zurck'
    				//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
    Answers
    1
    Vote Rating
    0
      0  

    Default 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: 'Zurck',
            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);
        }
    });

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •