PDA

View Full Version : how to render json data into client page



please
16 Aug 2012, 6:13 AM
hi could u please any body tell me how to render json data got from restapi, to client page.
i am new to extjs4.1 please help me out.

i called restapi through ajax call

scottmartin
16 Aug 2012, 1:06 PM
Client page = A form, a grid?

Scott.

please
17 Aug 2012, 12:31 AM
form

scottmartin
17 Aug 2012, 7:34 AM
You can load direct from the json:



form.load({
url: 'data.json',
success: function(){
console.log('success');
}
});


Or if you have it loaded in the store already .. use: form.loadRecord(record)

Scott.

please
17 Aug 2012, 11:23 PM
and could u please tell me, i have a store i defined as below, so i want to create instantiation for this store in view class how can create and call proxy to get json data,here i hard coded json with filelds but i need to call rest api,

Ext.define('app.sample', {
extend : 'Ext.data.Store',
model : 'Draco.model.NetworkModel',

eat:function()
{
alert('success in store');
},


proxy: {

type : 'ajax',
url : 'org.json',
reader : {
type: 'json'
}
},


autoLoad:true,



});

even i tried sample code
Ext.require([
'Ext.form.*'
//'Ext.layout.container.Column',
//'Ext.tab.Panel'
//'*'
]);

Ext.onReady(function() {
Ext.QuickTips.init();

var bd = Ext.getBody();


bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});

var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';

Ext.define('app.formStore', {
extend: 'Ext.data.Model',
fields: [
{name: 'countryid',type:'int'},
{name: 'countrycode',type:'string'},
{name: 'countryname',type:'string'}
]
});

var myStore = Ext.create('Ext.data.Store', {
model: 'app.formStore',
proxy: {
type: 'ajax',
url : 'org.json',
reader:{
type:'json',


}
},
autoLoad:true,
listeners: {
load: function() {
//var form = Ext.getCmp('loginForm');
//alert(myStore.data);
//for(var i in myStore.data)
//console.log(i+'=='+myStore.data[i]);

//form.loadRecord(myStore.data.first());

var form = Ext.getCmp('loginForm');
form.getComponent('countryid').setValue( myStore.proxy.reader.jsonData.countryid);
form.getComponent('countrycode').setValue( myStore.proxy.reader.jsonData.countrycode);
form.getComponent('countryname').setValue( myStore.proxy.reader.jsonData.countryname);
form.loadRecord(myStore.data.first());
}

}});


var testForm = Ext.create('Ext.form.Panel', {
width: 500,
height:250,
renderTo: Ext.getBody(),
title: 'Country Form',
// model:'app.formStore',
id:'loginForm',
store:myStore,
waitMsgTarget: true,
fieldDefaults: {
labelAlign: 'right',
labelWidth: 85,
msgTarget: 'side'
},
//items: [{

// xtype: 'fieldset',
items: [
{
xtype:'textfield',
fieldLabel: 'ID',
id: 'countryid'
}, {
xtype:'textfield',
fieldLabel: 'CODE',
id: 'countrycode'
}, {
xtype:'textfield',
fieldLabel: 'COUNTRY',
id: 'countryname'
}]
// }]

});



//this.testForm.getForm().loadRecord(app.formStore);
});

its working fine but i need to use like mvc patten please help me out