1. #1
    Sencha User
    Join Date
    Feb 2012
    Location
    India
    Posts
    49
    Vote Rating
    0
    Shafnas is on a distinguished road

      0  

    Default Unanswered: Overlay dynamic content Sencha 2 mvc

    Unanswered: Overlay dynamic content Sencha 2 mvc


    Hi,

    I am using sencha 2 mvc app.I have seen many examples for overlay which displays content from static html. But I want to show data from store , Also there is a preview and submit button in that form.

    Here is my code :

    Code:
    {
                               //card2
                              xtype:'panel',
                                   cls:'detail-container',
                                   scrollable:true,
                                   itemId: 'Detail',
                              flex:2,
                              items:[
                                       {
                                           xtype: 'panel',
                                            items: [
                                                    {
                                                       xtype:'button',
                                                       cls:'back-button',
                                                        text: 'Back',
                                                        handler: function() {
                                                        }
                                                    },
                                                    {
                                                        xtype:'button',
                                                        text: 'Make an Offer',
                                                        handler: function() {
    
                                                            if(!this.overlay) {
                                                                this.overlay = Ext.Viewport.add({
                                                                    xtype:'panel',
                                                                    title:'Make a Deal',
                                                                    centered:true,
                                                                    width:Ext.os.deviceType == 'Phone' ? 240 : 400,
                                                                    height:Ext.os.deviceType == 'Phone' ? 320 : 400,
                                                                    hideOnMaskTap:true,
                                                                    showAnimation: {
                                                                        type:'popIn',
                                                                        easing:'ease-out'
                                                                    },
                                                                    hideAnimation: {
                                                                        type:'popOut',
                                                                        easing:'ease-out'
                                                                    },
                                                                    layout: {
                                                                        type: 'vbox',
                                                                        pack: 'center'
                                                                    },
                                                                    scrollable:false,                                                    
                                                                    modal:true,
                                                                    items:[
                                                                           {
                                                                               xtype:'panel',
                                                                               scrollable:false,    
                                                                               flex:1,
                                                                               store: 'MyStore',
                                                                              tpl:  new Ext.XTemplate( '<div>{ClientName}',//not working
                                                                                            '<h1>Making a Deal</h1>'
                                                                                            '<h2><span>Looking to Buy</span></h2>',
    
                                                                                            '<input type="checkbox"  class="check"/><label class="labe2">Hide My Deal Details', 
                                                                                            '<a href="">What is this?</a></label>',
                                                                                            '<h6>I agree to the <a href="">Terms of Service</a></h6>',
                                                                                            '<input type="button" class="preview" />',
                                                                                            '<input type="button"  class="submit" />',
                                                                                        '</div>')
                                                                           }
                                                                    ]
                                                                    });
                                                            }this.overlay.show();
                                                        } 
                                                    } 
                                            ]
                                       }                     
                               ]
                           },
    Please help me to load the store data in to tpl

  2. #2
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,395
    Answers
    148
    Vote Rating
    23
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Hi,
    you don't have to provide a "store" configuration to your panel but a "data" one, so, for instance, if your store name is "MyStore" your data config could be:

    Code:
    ...
    data: Ext.getStore('MyStore').getFirst().getData()
    ...
    In this way you will be able to get the first record data of your store that will be used by your panel tpl.

    Hope this helps.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


  3. #3
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,346
    Answers
    3541
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      1  

    Default


    It is important to note that the data config accepts either a object or an array of objects as Andrea showed with getData(). It does not accept a record. Here are some possibilities:

    Code:
    {
        foo : 'bar'
    }
    
    [
        {
            foo : 'bar'
        }
    ]
    
    [
        {
            foo : {
                bar : 'hello'
            }
        }
    ]
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #4
    Sencha User
    Join Date
    Feb 2012
    Location
    India
    Posts
    49
    Vote Rating
    0
    Shafnas is on a distinguished road

      0  

    Default


    Thank you for your responses

  5. #5
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,395
    Answers
    148
    Vote Rating
    23
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    You are welcome.
    Please don't forget to set this question as answered.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX