Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: [Ext.ux.Accordion] Unable to autoCreate content - possible bug?

  1. #1
    Ext Premium Member staticboy's Avatar
    Join Date
    Aug 2007
    Posts
    19

    Cool [Ext.ux.Accordion] Unable to autoCreate content - possible bug?

    Message for jsakalos.

    Firstly, thank you for the fantastic Accordion extension widget!

    However, I think I may have found a tiny bug, but not sure because my JavaScript just isn't good enough to know exactly. I'm trying to dynamically build an accordion (ultimately from JSON received from an XHR). I started out using the 3. Create Accordion with two panels sample code on http://aariadne.com/accordion/, to which I added a third Ext.ux.InfoPanel assigned to variable autopanel1:

    PHP Code:

    var acc = new Ext.ux.Accordion('acc-ct', {
        
    fitHeighttrue
    })

    // create panel 1
        
    var panel1 acc.add(new Ext.ux.InfoPanel('panel-1', {
    }));

    // create panel 2
        
    var panel2 acc.add(new Ext.ux.InfoPanel('panel-2', {
    }));

    // auto create a panel
    var autopanel1 acc.add(new Ext.ux.InfoPanel(Ext.id(), {
        
    autoCreate:true,
        
    iconiconPath 'calendar_view_month.png',
        
    title'<b>autoCreat</b>ed  Title',
        
    content'<p>Here is some <b>autoCreat</b>ed content!</p>'
    })); 
    The result was an Accordion widget with three bars, but the third didn't contain any content. So I started to poke around in the Ext.ux.InfoPanel.js file to see how it worked. I noticed on lines 84-102 the state of autoCreate is handled as follows:

    PHP Code:

    // handle autoCreate
    if(this.autoCreate) {
        
    oldHtml this.el.dom.innerHTML;
        
    this.el.update('');
        
    this.desktop.appendChild(this.el);
        
    this.el.removeClass('x-layout-inactive-content');
    }
    // handle markup
    else {
        
    this.el.clean();
        if(
    this.el.dom.firstChild && !this.bodyEl) {
            
    this.title this.title || this.el.dom.firstChild.innerHTML;
            if(
    this.el.dom.firstChild.nextSibling) {
                
    this.body Ext.get(this.el.dom.firstChild.nextSibling);
            }
            
    oldTitleEl this.el.dom.firstChild;
            
    oldTitleEl oldTitleEl.parentNode.removeChild(oldTitleEl);
            
    oldTitleEl null;
        }

    It appears that if autoCreate == true then oldHtml = this.el.dom.innerHTML, but for an auto-created InfoPanel el.dom.innerHTML will be "". As oldHtml is used later to set the content then it will be empty regardless of what is set by config.content.

    My fix was to comment out line 85 as follow, and it worked for me, but I can't get my head around if this 100% correct!

    PHP Code:

    // handle autoCreate
    if(this.autoCreate) {
        
    //oldHtml = this.el.dom.innerHTML;
        
    this.el.update('');
        
    this.desktop.appendChild(this.el);
        
    this.el.removeClass('x-layout-inactive-content');
    }
    // handle markup
    else {
        
    this.el.clean();
        if(
    this.el.dom.firstChild && !this.bodyEl) {
            
    this.title this.title || this.el.dom.firstChild.innerHTML;
            if(
    this.el.dom.firstChild.nextSibling) {
                
    this.body Ext.get(this.el.dom.firstChild.nextSibling);
            }
            
    oldTitleEl this.el.dom.firstChild;
            
    oldTitleEl oldTitleEl.parentNode.removeChild(oldTitleEl);
            
    oldTitleEl null;
        }

    Attached Images Attached Images

  2. #2
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,232

    Default

    hi staticboy, user extension bugs are not offcially supported by Ext, and should be addressed in the User Extensions forum.

    thanks.

  3. #3
    Ext Premium Member staticboy's Avatar
    Join Date
    Aug 2007
    Posts
    19

    Default

    Oops, sorry mystix. Thanks for moving my post into the appropriate forum. I completely over-looked its existence!

  4. #4
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664

    Default

    Try to use newest beta version. http://aariadne.com/accordion-preview. There are many bug fixes and improvements including auto-creation logic.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  5. #5
    Ext Premium Member staticboy's Avatar
    Join Date
    Aug 2007
    Posts
    19

    Default

    Hi jsakalos, I pulled the latest versions of both Ext.ux.Accordion.js and Ext.ux.InfoPanel.js from the site. Looks as though I was using 151 and the new files are version 152.

    I'm afraid that the version 152 files reinstated the original problem as descibed above and only commenting out the code on line 86 of Ext.ux.InfoPanel.js got it working again:

    PHP Code:

    oldHtml 
    this.el.dom.innerHTML
    Is it that I am misunderstanding the intended purpose of the autoCreate flag? Is content a supported config option?

  6. #6
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664

    Default

    Quote Originally Posted by staticboy View Post
    Hi jsakalos, I pulled the latest versions of both Ext.ux.Accordion.js and Ext.ux.InfoPanel.js from the site. Looks as though I was using 151 and the new files are version 152.

    I'm afraid that the version 152 files reinstated the original problem as descibed above and only commenting out the code on line 86 of Ext.ux.InfoPanel.js got it working again:

    PHP Code:

    oldHtml 
    this.el.dom.innerHTML
    Is it that I am misunderstanding the intended purpose of the autoCreate flag? Is content a supported config option?

    I've never used content in fact... I always specified content by html of autoCreate object or update method or html markup or I dynamically loaded it. Try one of these as a workaround.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  7. #7
    Ext Premium Member staticboy's Avatar
    Join Date
    Aug 2007
    Posts
    19

    Default

    Hello again jsakalos.

    The reason I'm trying to do this is because I want to build an accordion contain tickers and stock prices with the data coming from an XHR JSON response. Clicking each item will expand it to show more info. It easy to see why I want to add items dynamically. Would you be willing to share with me how you "dynamically load it"?

    Here is what I'm doing, but it only works if line 86 in Ext.ux.InfoPanel.js is commented out, which presumably would break someother usage of the contructor? This works for me, but if there's a right way to do I'd prefer not to modify your code.

    Regards.

    PHP Code:

    for (var 0dsStocks.getCount(); i++) {
        var 
    stock dsStocks.getAt(i);

        
    // auto create panels in accordion
        
    accordionStocks.add(new Ext.ux.InfoPanel(Ext.id(), {
            
    autoCreate:true,
            
    iconstock.data['Change'] == '' ? (imagePath 'stock.gif') : stock.data['Change'] < ? (imagePath 'stock_dn.gif') : (imagePath 'stock_up.gif'),
            
    titlerenderStockTitle(stock), // Function to build HTML string
            
    contentrenderStock(stock// Function to build HTML string
        
    }));

    Attached Images Attached Images

  8. #8
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664

    Default

    There is example of this on preview page. You just set the url and the panel content is loaded from this url on expand. If you set loadOnce:true content is loaded only once if not it's reloaded with each expand.

    See line 940 of application source code.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  9. #9
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664

    Default

    One more note: don't specify content like that. Better is either to load it dynamically or first create panel and then call panel.update('put content here');
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  10. #10
    Ext Premium Member staticboy's Avatar
    Join Date
    Aug 2007
    Posts
    19

    Thumbs up

    I altered my loop around the Ext.data.Store of stocks data so that accordion widgets are added as you suggested. Works like a charm and no need for the hack in the Ext.ux.InfoPanel.js file! I knew I wasn't doing something right, I just couldn't work out what.

    Thanks.

    PHP Code:

    for (var 0dsStocks.getCount(); i++) {
        var 
    stock dsStocks.getAt(i);

        
    accordionStocks.add(new Ext.ux.InfoPanel(Ext.id(), {
            
    titlerenderStockTitle(stock),
            
    iconrenderStockIcon(stock),
            
    draggablefalse,
            
    autoCreate: {
                
    tag'div',
                
    children:[{
                    
    tag'div',
                    
    cls'text-content',
                    
    htmlrenderStockDetail(stock)
                }]
            }
        }));


Page 1 of 2 12 LastLast

Posting Permissions

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