1. #1
    Sencha User Hani79's Avatar
    Join Date
    Dec 2007
    Location
    Santa Barbara, California
    Posts
    52
    Vote Rating
    1
    Hani79 is on a distinguished road

      1  

    Default [FIXED] Auto load data into Panel (using a tpl)

    [FIXED] Auto load data into Panel (using a tpl)


    I've set up a Panel with an XTemplate and am trying to have some data loaded in automatically on render. From my understanding, using the tpl and data configs for a panel should make that happen. However, if I do so, the data is not loaded on the fly.

    Using some example data, here is a simple panel that has tpl and data configs set. I've commented out the last line because I don't believe it should be necessary, since I have defined the data parameter, no?

    The docs say this about the data config option: "The initial set of data to apply to the tpl to update the content area of the Component."

    Code:
    var data = {
         name: 'Jack Slocum',
         title: 'Lead Developer',
         company: 'Ext JS, LLC',
         email: 'jack@extjs.com',
         address: '4 Red Bulls Drive',
         city: 'Cleveland',
         state: 'Ohio',
         zip: '44102',
         drinks: ['Red Bull', 'Coffee', 'Water'],
         kids: [{
             name: 'Sara Grace',
             age:3
         },{
             name: 'Zachary',
             age:2
         },{
             name: 'John James',
             age:0
         }]
    };
         
     var tpl = new Ext.XTemplate(
         '<p>Name: {name}</p>',
         '<p>Title: {title}</p>',
         '<p>Company: {company}</p>',
         '<p>Kids: ',
         '<tpl for="kids">',
             '<p>{name}</p>',
         '</tpl></p>'
    );
          
    var thePanel = new Ext.Panel({
          renderTo:'myPanel',
          title:'My Panel',
          tpl: tpl,
          data: data
      });
    
         // If I uncomment the next line, the data is loaded into the panel after it renders
         //tpl.overwrite(thePanel.body, data);
    Is this a bug? Or is it intentionally built this way for a reason? Or am I totally missing something?

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,166
    Vote Rating
    674
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    I just ran it against the SVN version and I got what I would have expected. If it's a bug, it's since been resolved.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha User Hani79's Avatar
    Join Date
    Dec 2007
    Location
    Santa Barbara, California
    Posts
    52
    Vote Rating
    1
    Hani79 is on a distinguished road

      0  

    Default


    Quote Originally Posted by evant View Post
    I just ran it against the SVN version and I got what I would have expected. If it's a bug, it's since been resolved.
    Ah - forgot to mention I am using 3.0.3. Thanks for checking that out. I'll see if I can create an override.

  4. #4
    Sencha User Hani79's Avatar
    Join Date
    Dec 2007
    Location
    Santa Barbara, California
    Posts
    52
    Vote Rating
    1
    Hani79 is on a distinguished road

      0  

    Default


    For anyone still using 3.0.3

    This override will fix the bug where the data passed in the initial config of a component doesn't load into the configured tpl.

    Code:
    Ext.override(Ext.Component, {
         render : function(container, position){
          if(!this.rendered && this.fireEvent('beforerender', this) !== false){
               if(!container && this.el){
                this.el = Ext.get(this.el);
                container = this.el.dom.parentNode;
                this.allowDomMove = false;
               }
               this.container = Ext.get(container);
               if(this.ctCls){
                this.container.addClass(this.ctCls);
               }
               this.rendered = true;
               if(position !== undefined){
                if(Ext.isNumber(position)){
                 position = this.container.dom.childNodes[position];
                }else{
                 position = Ext.getDom(position);
                }
               }
               this.onRender(this.container, position || null);
               if(this.autoShow){
                this.el.removeClass(['x-hidden','x-hide-' + this.hideMode]);
               }
               if(this.cls){
                this.el.addClass(this.cls);
                delete this.cls;
               }
               if(this.style){
                this.el.applyStyles(this.style);
                delete this.style;
               }
               if(this.overCls){
                this.el.addClassOnOver(this.overCls);
               }
               this.fireEvent('render', this);
               var contentTarget = this.getContentTarget();
               if (this.html){
                contentTarget.update(Ext.DomHelper.markup(this.html));
                delete this.html;
               }
               if (this.contentEl){
                var ce = Ext.getDom(this.contentEl);
                Ext.fly(ce).removeClass(['x-hidden', 'x-hide-display']);
                contentTarget.appendChild(ce);
               }
               if (this.tpl) {
                if (!this.tpl.compile) {
                 this.tpl = new Ext.XTemplate(this.tpl);
                }
                if (this.data) {
                 this.tplWriteMode = (this.tplWriteMode ? this.tplWriteMode : 'overwrite');
                 this.tpl[this.tplWriteMode](contentTarget, this.data);
                 delete this.data;
                }
               }
               this.afterRender(this.container);
               if(this.hidden){
                this.doHide();
               }
               if(this.disabled){
                this.disable(true);
               }
               if(this.stateful !== false){
                this.initStateEvents();
               }
               this.initRef();
               this.fireEvent('afterrender', this);
          }
          return this;
         },
    
         getContentTarget : function(){
          return this.body;
         }
    });

  5. #5
    Ext User
    Join Date
    Jan 2010
    Posts
    5
    Vote Rating
    0
    gre19 is on a distinguished road

      0  

    Default how to autoLoad data in Accordion?

    how to autoLoad data in Accordion?


    Hi,

    I am trying to extend your code so that I can load data in an accordion as follows:

    var data = {
    name: 'Jack Slocum',
    title: 'Lead Developer',
    company: 'Ext JS, LLC',
    email: 'jack@extjs.com',
    address: '4 Red Bulls Drive',
    city: 'Cleveland',
    state: 'Ohio',
    zip: '44102',
    drinks: ['Red Bull', 'Coffee', 'Water'],
    kids: [{
    name: 'Sara Grace',
    age:3
    },{
    name: 'Zachary',
    age:2
    },{
    name: 'John James',
    age:0
    }]
    };

    var accordion = new Ext.Panel({
    layout: 'accordion',
    animate: true,
    region:'center',
    renderTo:document.body,
    data:data,

    items:[{
    title: 'data.kids.name',
    id:'panel1',
    data:data,
    html: 'data.kids.age',

    },{
    title: data.kids.name,
    id: 'panel2',
    html: data.kids.age
    },{
    title: 'Panel 3',
    id: 'panel3',
    html: 'Content'
    },{
    title: 'Panel 4',
    id: 'panel4',
    html: 'Content'
    }],
    width: 175,
    height: 200
    });

    I am trying to load data into the title and content fields of accordion. when I use the object.property method to access data, I only see data.kids.name in output or in accordion.
    Any kind of suggestion will be a great help.

    Thanks,
    CM

  6. #6
    Sencha User Hani79's Avatar
    Join Date
    Dec 2007
    Location
    Santa Barbara, California
    Posts
    52
    Vote Rating
    1
    Hani79 is on a distinguished road

      0  

    Default


    Welcome to the forums. You have a number of issues going on here.

    In my example, the data object is static. If your ultimate goal is to have that data be dynamic, you're going to have to take this a large step further.

    You're going in the right direction in accessing information from within an object/array.

    In your first item, you have apostrophes around 'data.kids.name' and 'data.kids.name'. By doing that you're saying they're strings - not variables. You did it more correctly in the second item.

    However, you should read up on objects/arrays to get a better understanding of them. It doesn't seem like you have. (That's okay, we all start somewhere...but you have to do your homework.) Anyway, the items under "kids" are accessed as such:

    Code:
    data.kids[0].name
    data.kids[1].name
    data.kids[2].name
    The other broader issue is that the "data" config is only usable with the tpl config option. So that's the wrong direction to go in.

    Ultimately, you're probably going to want to add items to your accordion panel (by using a loop) from the data object.

    Important: If you're still having trouble with this issue, start a new thread instead of posting to this one - since the trouble you're having is unrelated. Send me a private message with the link to the thread if you start one.

    (Also, as a side note, when posting any code, wrap it with the tags to make it easier for all of us to read.)

  7. #7
    Ext User
    Join Date
    Jan 2010
    Posts
    5
    Vote Rating
    0
    gre19 is on a distinguished road

      0  

    Default


    Thanks for your quick reply. I agree that I need to work on my programming skills and I am working on it every day.

    Yes my ultimate aim is to read data dynamically for the accordion. I am trying to read data from a JSON response. After going through 'Master Grid details' tutorial, I was able to dynamically get content in the Grid.

    Similarly, I want to dynamically populate the title and items of the Accordion. I will work on your suggestions and update you about my progress.

    Thanks, Have a great day.

  8. #8
    Sencha Premium Member
    Join Date
    Mar 2014
    Location
    San Jose
    Posts
    13
    Vote Rating
    0
    uvarala@vocera.com is on a distinguished road

      0  

    Default Accordion with mutliple Panels

    Accordion with mutliple Panels


    Hi,

    Even I have similar requirement.

    An accordion consisting of multiple property grids. And another accordin consisting of multiple tree grids.

    How do I achieve these two requirements. I am able to construct single property grid and tree grid successfully.

    But how do mulitple property/ tree grids inside an accordion ?