Panel problem: setData & tpl

[andrea.chiozzi@metislab.net]

Hi folks,
I've read this http://www.sencha.com/forum/showthre...-doesn-t-work&

and I've tried to implement it, but without lucky....
Can you help me? This is the code:

        Ext.define('DANode', {
            extend: 'Ext.data.Model',
            fields: [{
                name: 'idn'
            },{
                name: 'text'
            },{
                name: 'dsc'
            },{
                name: 'preview'
            }]
        }); 

MyPanel = new Ext.Panel({
                    layout:     'card',                    
                    config: {
                        styleHtmlContent: true,
                        scrollable: true
                    },  
                    items:[{
                        xtype: 'panel',
                        fullscreen: true,
                        model: 'DANode',
                        style: 'text-align: center;',
                        tpl: 'Your name is: {preview}'
                    },
                        new Ext.Carousel({
                            indicator: false,
                            defaults: { scroll: 'vertical' }
                        })
                    ]  
})

AND ....

                    Ext.Ajax.request({
                        url: AJAX_REQUEST_URL2, 
                        success: function( response ){
                                mydata = { preview: 'aaaaaa' };
                                MyPanel.setData(mydata);
                        },
                        ... omissis ...                
                    });

So.. I set TPL attribute to mypanel, I call a SetData in order to set data to mypanel,
and if I follow debugger, I see that Sencha call a method to overwrite my panel data with a TPL response,
my nothing is showed on the screen...

Do you have any idea?
Thank so much.

[jay@moduscreate.com]

A few issues with your code:

- Use Ext.create instead of new
- Do *not* use upper case for lexically scoped references. Uppercase initial letters are supposed to be for constructors and singletons.

[rdougan]

The problem is that you are calling setData of myPanel, which is not the panel you set the tpl on. Unfortunately the data does not cascade into its children. So, you need to grab an reference of that inner panel and call setData on that.

Some other notes:

- You do not need to specify a model to use the tpl + data configurations.
- You only use the [i]config[/b] block when defining a class. When creating a class, you just put them in the object when you instantiate the component.

So this:

MyPanel = new Ext.Panel({
    layout: 'card',                    
    config: {
        styleHtmlContent: true,
        scrollable: true
    }
});

Turns into this:

MyPanel = new Ext.Panel({
    layout: 'card',
    styleHtmlContent: true,
    scrollable: true
});

Also as Jay mentioned, you should use Ext.create instead of the new keyword to create instances of classes. This means you can use our dependance management system (more information here).

[andrea.chiozzi@metislab.net]

jay, rdougan thank you for your advices.

I've rewrite my code, but It doesn't works : (
This time I've:

     
var nestedList = Ext.create('Ext.NestedList', {
    fullscreen: true,
    displayField: 'text',
    useTitleAsBackText: false,           
    store: store,    
    scrollable: false,                              
    getTitleTextTpl: ... omissis ...,                         
    getItemTextTpl: ... omissis ...,
    // provide a codebox for each source file
    getDetailCard: function(record, parentRecord) { // IMPORTANT CODE !!!!!!!
        return new Ext.create('Ext.Panel', { 
            id: 'p1',
            layout: 'card',                    
            styleHtmlContent: true,
            scrollable: true, 
            items:[{   
                xtype: 'panel',
                id: 'p2',
                fullscreen: true,
                style: 'text-align: center;',
                tpl: 'name: {name}',
                styleHtmlContent: true,
                scrollable: true,                         
            }]
        });
    }, 
})


Ext.Ajax.request({
    url: AJAX_REQUEST_URL2, 
    success: function(response) {
        response = Ext.JSON.decode(response.responseText);
        data = { name: 'homer simpson' };
        // detailCard is PANEL with id = P1
        // detailCard.getItems().items[0] is Panel with id = P2
        detailCard.getItems().items[0].setData(data);
        list.unmask();                                      
    },
    ... omissis ...              
});

I've noticed that when Sencha call
updater.call(this, value, oldValue);

value = { name: "homer simpson"} [ it is ok! ]
and
updater return html: "name: {name}" [ it is ok! ]

when Sencha call

overwrite: function(el, values, returnElement) {
    el = Ext.getDom(el);
    el.innerHTML = this.apply(values);
    return returnElement ? Ext.get(el.firstChild, true) : el.firstChild;
}

el.innerHTML: "name: homer simpson"
but, in the end, nothing is displayed...

the last information:
if I use html attribute in panel P2, i.e:
html: 'name: homer simpson';
that works...

Maybe I've forgot something?
I must call a special function? ( an apply, update, dolayout or similar )

thanks again!

[andrea.chiozzi@metislab.net]

A very important discvery:

if in panel p2, I add:

xtype: 'panel',
id: 'p2',
fullscreen: true,
style: 'text-align: center;',
data: { name: 'homer simpson'}, <--------------------- NEW LINE!
tpl: 'name: {name}',
styleHtmlContent: true,
scrollable: true,

it works!
so.. it is like if detailCard.getItems().items[0].setData(data); is not enough

but I've see with firebug that detailCard.getItems().items[0] is panel p2
and that setData(data) realy set { name: 'homer simpson' } on panel p2 o_O

I think that I've missed a step...

[rdougan]

In your Ajax request, you use detailCard; but where does that come from?

Load the data into nested list, and do the following on the console:

p = Ext.getCmp('p2');
p.getTpl(); //should return the correct tpl
p.getData(); //should return the correct data (none)
p.setData(); //should set the data

[andrea.chiozzi@metislab.net]

Hi rdougan,
I've not write all my code because I don't want waste people time...
but I get detailCard in this way:

listeners: {
    leafitemtap: function(list, index, item, e) {
        
        var myStore    = list.getStore();               <--- Start code readed in sencha forum
        var article       = myStore.getAt(index);
        var me           = list.getParent();
        var detailCard  = me.getDetailCard();        <--- End code readed in sencha forum

        list.setMask({
            message: 'Loading'
        });
        
        Ext.Ajax.request({
                  .....
                  .....
        })
   }

I've followed your advice .. and nw I can say that:

p = Ext.getCmp('p2');   This returns my panel
p.getTpl(); This returns my tpl ( html: "name: {name}" )
p.getData(); This returns null( no data in config )
p.setData(); This returns my panel with attribute _data = Object {name: 'homer simpson'}

p.getData(); This returns Object {name: 'homer simpson'}

It is good.. but not enough .. nothig is displayed ...

Bye

PS: I use sencha_v2_pr3 .. the last version ( I think )

[zlog]

have you found your problem? I have something similar in 2.1 maybe.