PDA

View Full Version : why my view is not showing any thing?



phamtranquocviet
6 Jul 2013, 6:23 PM
Hi,

Here is my code for the view, and it does not show the text field in the body of the panel. I put my view inside the success callback to make sure my view has data from server when it constructs the view.
Thanks.



Ext.define('Iip.view.giips.admission.DetailedLoiTab', {
extend: 'Ext.panel.Panel',
alias:'widget.detailed-loi-tab',
autoScroll: true,

listeners: {
afterrender: function() {
Iip.app.getController('Iip.controller.giips.admission.DetailedLoiTabs');
},
beforeshow: function() {
this.setHeight(this.remainingHeight);
}
},

constructor: function(selectedLoiData) {
Ext.applyIf(this, selectedLoiData);
this.callParent();

this.title = this.selectedLoiData.firstName + ' ' + this.selectedLoiData.lastName;
this.id = 'detailedLoiTab_' + this.selectedLoiData.loiId;
},

initComponent: function() {
Ext.Ajax.request({
url: 'indexes/admission_index.php',
params: { c: 'get_loi', 'loiId': this.selectedLoiData.loiId },
success: function(response) {
var form;

response = Ext.JSON.decode(response.responseText);
if(response.success === false) {
return Ext.get("loi-error").update(response.error);
}

//Show the data details of the LOI in a read-only format
form = Ext.create('Ext.form.Panel', {
url: 'indexes/admission_index.php',
bodyPadding: 5,
margin: '5 5 5 5',
border: 0,
layout: 'form',

items: [
{ xtype: 'textfield', name: 'loiId', id: 'loiIdToBeApproved', value: response.data.loiId }
],

buttons: [
{ text: "Cancel", id: "cancel-loi" },
{ text: "Disapprove", id: "disapprove-loi" },
{ text: "Approve", id: "approve-loi" }
]
});

Ext.applyIf(this, { items:[ form ] });
},
scope: this
});
this.callParent(arguments);
}
});

mike.estes
7 Jul 2013, 1:32 AM
Ext.applyIf(this, { items:[ form ] });

The code above is being run within your callback as you mentioned. The problem is that when the server response is received and the callback gets invoked the panel has already been rendered, so it is too late to modify the items array directly.

Instead, you should have better luck adding the form to the panel using the add method of the panel See: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.panel.Panel-method-add

Hope this helps!

phamtranquocviet
7 Jul 2013, 3:49 PM
Hi,
That worked like a charm. Thanks a lot.