PDA

View Full Version : Data not displaying in popup



evs.saad
25 Sep 2012, 10:11 AM
Hi,
I am trying to make a popup and display the data from ajax file but it is not working.The popup appears fine with the columns that I want to display but the data is not coming.Please help me if I am wrong anywhere .Here is my code

function displayMoreData(arg1,arg2){


var Details = {
height:200,
id: 'Details',
xtype: 'editorgrid',
renderTo: 'details-grid',
columns: [
{header:"nr",dataIndex:'nr',hidden:true}
,{header:"Date",dataIndex:'service_date', renderer:Ext.util.Format.dateRenderer('m/d/Y')}
,{id:'data1',header:"data1",dataIndex:'data1',align:'left'}
,{header:"data2",dataIndex:'data2' }
,{header:"data3",dataIndex:'data3' }
,{header:"data4",dataIndex:'data4'}



],
store: new Ext.data.Store({
root: 'results',
method: 'POST',
autoSave: false,
batch: true,
proxy: new Ext.data.HttpProxy({
api: {
read: 'ajax/data.php?task=Listing'
}
}),

reader: new Ext.data.JsonReader({
totalProperty: 'total',
successProperty: 'success',
idProperty: 'nr',
root: 'results',
fields: ['nr', {name: 'service_date', type: 'date', dateFormat: 'Y-m-d'},'data1', 'data2','data3', 'data4']

})
})
}


var formPanel = new Ext.FormPanel({
frame: true,
labelWidth:150,
bodyStyle: 'padding:5px 5px 0',
renderTo: 'details-grid',
items:[Details]
});

win = new Ext.Window({
layout: 'fit',
width:750,
height: 350,
defaults: {
autoScroll: true
},
closeAction: 'close',
title: ' Details',
plain: true,
items: [formPanel]
});
if( arg1=='' ){
formPanel.getForm().load({ url: 'ajax/data.php?task=DISPLAY_FROM_ARG1', method: 'POST', params:{'nr': nr}, waitMsg: 'Loading ...'});
}else{
formPanel.getForm().load({ url: 'ajax/data.php?task=DISPLAY_FROM_ARG2', method: 'POST', params:{'arg2': arg2}, waitMsg: 'Loading ...'});
}
win.show();
}


Thanks in advance.

scottmartin
26 Sep 2012, 12:33 PM
What does your return json look like?

Try the following:

data.json


{
"success": true,
"data":
{
"name": "Bart",
"email": "[email protected]",
"change": -20
}
}




Ext.onReady(function(){

var form = new Ext.form.FormPanel({
title: 'Simple Form',
bodyPadding: 5,
width: 350,
layout: 'anchor',
defaults: {
anchor: '100%'
},
defaultType: 'textfield',
items: [{
fieldLabel: 'name',
name: 'name'
},{
fieldLabel: 'email',
name: 'email'
},{
xtype: 'numberfield',
fieldLabel: 'change',
name: 'change'
}],

renderTo: Ext.getBody()
});

new Ext.Button({
text: 'Load Form',
renderTo: Ext.getBody(),
handler: function() {
form.load({
url: 'data.json',
success: function(){
console.log('success');
}
});
}
});

});