PDA

View Full Version : Problem passing Data to Ext.panel from a List



cks
23 Apr 2012, 2:50 PM
I am not able to display the values in my record to an Ext.panel when the disclosure is tapped on a list item. For some reason, the tpl is not displayed. It will display if I add the tpl config directly to the container.

I also tried to set the record config, along with the tpl in the first panel, but that was also not successful. Any advice in accomplishing this? The code from my view is:


Ext.define('replacements.view.OrderDetail',{
extend: 'Ext.Container',
xtype: 'orderdetail',
requires: [
'Ext.form.FieldSet',
'Ext.form.Panel'
],
config: {
fullscreen: true,
layout: 'vbox',
title: 'Order Detail',
record: 'order',
items: [
{
xtype: 'panel',
flex: 1,
tpl: '<h2>{orderQuantity}</h2>'
},
{
xtype: 'formpanel',
scrollable: 'false',
flex: 2,
items: [
{
xtype: 'fieldset',
items:[
{
xtype: 'textfield',
name: 'quantity',
label: 'QTY'
},
{
xtype: 'textfield',
name: 'description',
label: 'Description'
},
{
xtype: 'textfield',
name: 'total',
label: 'Total'
}
]
}
]
},
{
xtype: 'panel',
flex: 3,
html: 'Approval Notes'
},
{
xtype: 'formpanel',
scrollable: 'false',
flex: 4,
items: [
{
xtype: 'fieldset',
items: [
{
xtype: 'textareafield',
name: 'comment',
value: '*Add a note (Required)'
}
]
}
]
}
]
}
});

jakobgrannas
24 Apr 2012, 5:17 AM
I noticed that your record property contains a string. It should contain an object with the data you passed from the list. I'm not sure what your controller looks like, but when you instatiate your new view (the Ext.Panel you're referring to) you want to provide the selected list record to that new view, like this:



var newView = Ext.create('replacements.view.OrderDetail', {
data: record
});

listParent.push(newView); // provided your list parent view is a navigationview
listParent.setActiveItem(newView); // if your list parent view is a card layout panel/container


hope that helped

cks
24 Apr 2012, 7:50 AM
I see what you are saying. The data config takes an object. I was attempting to set it with the xtype of my store. I added my controller code below. I am not getting how to get the data that was passed by the controller to the detail view. Thanks, I appreciate the help.


Ext.define('replacements.controller.Main', {
extend: 'Ext.app.Controller',

config: {
refs: {
list: 'orderspanel',
detail: 'orderdetail'
},
control: {
"orderspanel list": {
disclose: 'showDetail'
}
}
},

showDetail: function(list,record,target,index, opts) {
//debug
var order = record.getData();
console.log(order.orderQuantity);

this.getList().push({
xtype: 'orderdetail',
data: record
});
}

//called when the Application is launched, remove if not needed
/*
launch: function(app) {

}
*/
});

jakobgrannas
24 Apr 2012, 7:59 AM
The problem (if I'm reading your code correctly) is that you're setting the data of the main component (the view), while the tpl is only used on a child panel of that main component. You have no tpl set on the main component, but you do have one on your first child component, which is a panel. You either have to set the data property of that child component, or you have to set a tpl for the main component. I think you've just made the simple error of putting the tpl/data property in the wrong object ;)

cks
24 Apr 2012, 8:15 AM
Yes, that is right. I am attempting to use the data in the child panel of the main component. You put me on the right track, there. What I still cannot figure out is how to get the data to set the data config of the my child panel. I tried a couple of things, like:

Ext.getCmp('orderdetail').getData()
this.getParent().getaData()

Both return undefined. Any tips you can provide as to how to get the data passed to the view from the controller?

jakobgrannas
24 Apr 2012, 8:34 AM
You need to use itemId's or id's, it's much easier to get a component by itemId or id. I'd do it like this:




Ext.define('replacements.view.OrderDetail', {
...
items: [
{
xtype: 'panel',
id: 'myPanel',
...
},
...

(see, I set an ID on the child panel)

and then in your controller



refs: {
....
myPanel: 'orderdetail #myPanel'
}
control: {
myPanel: {
activate: 'onActivate'
}
}

onActivate: function(mainPanel) {
this.getMyPanel().setData(mainPanel.getData());
}


Not sure if this would work, but it might atleast get you some ideas on how to do things. Another way is to simply skip setting the data property of the main component, and instead - in your onDisclose method - set the data property of the panel i just named 'myPanel' using setData and the refs i just provided you.

cks
24 Apr 2012, 12:46 PM
Yes, that was the solution. I am now able to get the data to the panels in the container. Thanks again for your excellent help and advice!

gfroese
24 Apr 2012, 8:12 PM
jakobgrannas:
Thank you for that solution!
I have been fighting with this for the last few days and wasn't sure how to even ask the question.
Took no time once I saw this solution.

Thanks to cks for that. :)