PDA

View Full Version : Displaying more info on a disclosed list item



coletek
4 Dec 2012, 3:24 PM
Assuming you have a model with two fields (i.e. id, name) and then when you disclose one of the items in the store (for this model), how do I pass the {id} to a Ext.Ajax.request() call.



Ext.define("test.view.CompDetails", {
extend: 'Ext.Panel',
xtype: 'compdetailspanel',


config: {
styleHtmlContent: true,
scrollable: 'vertical',


tpl: '<b>ID:</b> {id}<br /> <b>Name:</b> {name}<br />'

// how do I use Ext.Ajax.request, to pass {id} to a php script that gets more info via a database call.
// And once I get the data, how do I add it this compdetailspanel page (I assume I could just add
// some items via setItems()

}
});


Any ideas?, I know how to do the php script and the database call. I just don't know where I can do the Ext.Ajax.request() call on this compdetailspanel, nor how to set the params of Ext.Ajax.request() with {id}, nor how to correctly add the returned data to this compdetailspanel.

Cheers,

flanders
6 Dec 2012, 12:51 AM
First of all, do you really need to extend Panel? Or would another class, Component maybe, suffice?

Then, how about this?



Ext.define('test.view.CompDetails', {
extend: 'Ext.panel.Panel',
xtype: 'compdetailspanel',

initComponent: function() {
var me = this;

this.callParent(); // !!

Ext.Ajax.request({
...,
jsonData: {
compId: me.compId
}
});


And to use it:



var compDetailsPanel = Ext.create('test.view.CompDetails', {
compId: 999 // Or some other id, whatever applies
});

coletek
6 Dec 2012, 1:31 AM
Hi,

I extend the Panel, as that is how the tutorials suggest you implement the disclose panel? I guess you could use Component, but how will that help with my issue?

Regarding your solution: I don't understand:


var compDetailsPanel = Ext.create('test.view.CompDetails', {
compId: 999 // Or some other id, whatever applies
});

Where would I do that? And if I did that I need to set it to the ID in the store (for the item I tapped on). So I would of thought there would be a simple method to get the ID for the item you tapped on in the list (generated by the store).

Cheers,

flanders
6 Dec 2012, 7:40 AM
Regarding the panel extension: thats not the issue, I was just trying to point out that you should always try to choose the most lightweight component that still does what you need.

Then regarding your issue. If I get it right you want to create a master/detail view on some type of object. You already have the master and now want to display a form detailing one clicked item?

Then you can add something like this to your grid configuration:



listeners: {
itemclick: function(view, record, item, index, e, options) {
var compDetails = Ext.create('test.view.CompDetails', {
compId: record.get('id');
});

// However, if you have the full model specified, and it contains all the fields
//you need to display you can just pass the model and use that ;)
var compDetails = Ext.create('test.view.CompDetails', {
compRecord: record // and update the initComponent of CompDetails accordingly
});
}
}