PDA

View Full Version : sample code for Ext.Ajax.request and ....



profunctional
6 Jul 2010, 1:49 PM
Does anyone have sample code to make an Ext.Ajax.request call and populate a list using a template? I am looking through the sencha samples, but they only offer jsonp samples with templates. Please help.

dombroskib
6 Jul 2010, 3:28 PM
The code below shows a list of information after a JSON call back to the server thru the store configured. Not optimized in any way but does do what you are looking for. Very much prototyped after the KIVA example provided with the framework




RT.UI.CheckList = Ext.extend(Ext.List, {
title: 'Checks',
iid: 'checkList',
itemSelector: 'div.check',
singleSelect: true,
emptyText: 'No checks matching that query.',

isLoaded: false,
isSetting: false,
UpdateStatus: function(id, s) {
var ix = 0;
for (var i = 0; i < this.items.length; i++) {
if (this.items[i].Id == id) {
ix = i;
this.items[i].CSSClass = s;
break;
}
}
this.isSetting = true;
this.select(ix);
this.isSetting = false;
var sel = this.getSelectedNodes();
for (var j = 0; j < sel.length; j++) {
var el = Ext.get(sel[j]);
try {
el.removeClass("good");
}
catch (e) { }
try {
el.removeClass("bad");
}
catch (e) { }
el.addClass(s);
}
this.WriteBatch();
this.isSetting = true;
this.select(-1);
this.isSetting = false;
},
WriteBatch: function() {
var t = 0;
for (var i = 0; i < this.items.length; i++) {
if (this.items[i].CSSClass != "bad")
t = t + parseFloat(a$.MakeNumber(this.items[i].APAmount));
}
document.getElementById('totalButton').innerHTML = "Release Batch " + a$.ShowAsMoney(t);
},
initComponent: function() {
this.filterBar = new RT.UI.FilterBar({
dock: 'top',
id: 'filters',
listeners: {
change: this.filterResults,
scope: this
}
});
this.logoBar = new RT.UI.LogoBar({
dock: 'top',
id: 'logo',
company:'Express Dental Care'
});
this.dockedItems = [this.logoBar, this.filterBar];
Ext.regModel('CheckModel', {
fields: [
{ name: 'APAmount' },
{ name: 'Provider' },
{ name: 'ARAmount' },
{ name: 'ProfitAmt' },
{ name: 'ProfitPercent' },
{ name: 'State' },
{ name: 'City' },
{ name: 'Claimant' },
{ name: 'Payer' },
{ name: 'ApptDate' },
{ name: 'ApptType' },
{ name: 'Department' },
{ name: 'Speciality' },
{ name: 'CSSClass' },
{ name: 'Id' },
{ name: 'PricingInfo' },
{ name: 'PayerContractDiscount' },
{ name: 'DateClaimReceived' },
{ name: 'Notes' },
{ name: 'Zip' },
{ name: 'Address' }

]
});

this.store = new Ext.data.JsonStore({
id: 'DemoThis-store-checks',
listeners: {
datachanged: function(el) {
Ext.getBody().unmask();
},
loadexception: function(el, o, o2) {
Ext.getBody().unmask()
alert("Load of data failed, (" + o2.responseText + ")");
},
scope: this
},
storeId: 'DemoThis-check-store',
model: 'CheckModel',

reader: new Ext.data.JsonReader({
root: 'Items',
totalProperty: 'Count',
id: 'openitems',
model: 'CheckModel'

})
});

this.tpl = new Ext.XTemplate.from('loan', { compiled: true });
this.on('selectionchange', function(e, row, rowdata) {
if (this.isSetting == true)
return;
if (this.dataPopup)
this.dataPopup.destroy();
this.dataPopup = new RT.UI.CheckInfo({
data: rowdata[0],
listeners: {
hide: function() {
this.clearSelections(true);
},
scope: this
}
});
this.dataPopup.show();
});
RT.UI.CheckList.superclass.initComponent.call(this);
},
loadGrid: function() {
this.store.loadData(this.items, false);
this.WriteBatch();
},
getData: function() {
var amts = Ext.getCmp('amts');
Ext.Ajax.request({
url: a$.RouteMessage('Checks','Get','1/0'),
scope: this,
params:
{
amts: amts.getValue()
},
success: function(response, opts) {
var o = Ext.decode(response.responseText);
this.items = o.Items;
this.loadGrid();
}
})
},
filterResults: function(filterBar, values) {
this.getData();
setTimeout(function() {
if (!this.isLoaded) {
Ext.getBody().mask(false, '<div class="loading">Loading&hellip;</div>');
}
}, 1);
this.isLoaded = false;
}
});
Ext.reg('rt-checklist', RT.UI.CheckList);

Ext.data.JsonReader.override({
buildExtractors : function() {
if (typeof this.model == 'string') {
this.model = Ext.ModelMgr.types[this.model];
}
Ext.data.JsonReader.superclass.buildExtractors.apply(this, arguments);

if (this.root) {
this.getRoot = this.createAccessor(this.root);
} else {
this.getRoot = function(root) {
return root;
};
}
}
});
Ext.data.JsonStore = Ext.extend(Ext.data.Store, {
/**
* @cfg {Ext.data.DataReader} reader @hide
*/
constructor: function(config){
if(config && config.url){
config.proxy = new Ext.data.AjaxProxy(config);
}
Ext.data.JsonStore.superclass.constructor.call(this, Ext.apply(config, {
reader: new Ext.data.JsonReader(config)
}));
}
});
Ext.reg('jsonstore', Ext.data.JsonStore);

mrsixcount
7 Jul 2010, 10:42 AM
Here is a sample that reads in a text file. I finally got it working myself today. I hope this helps you and others. I had to make sure that the json was double quoted instead of single quoted otherwise I would get a can't parse JSON error.



{"items":[
{"firstName": "Tommy", "lastName": "Maintz"},
{"firstName": "Ed", "lastName": "Spencer"},
{"firstName": "Jamie", "lastName": "Avins"},
{"firstName": "Aaron", "lastName": "Conran"},
{"firstName": "Dave", "lastName": "Kaneda"},
{"firstName": "Michael", "lastName": "Mullany"},
{"firstName": "Abraham", "lastName": "Elias"},
{"firstName": "Jay", "lastName": "Robinson"},
{"firstName": "Tommy", "lastName": "Maintz"},
{"firstName": "Ed", "lastName": "Spencer"},
{"firstName": "Jamie", "lastName": "Avins"},
{"firstName": "Aaron", "lastName": "Conran"},
{"firstName": "Ape", "lastName": "Evilias"},
{"firstName": "Dave", "lastName": "Kaneda"},
{"firstName": "Michael", "lastName": "Mullany"},
{"firstName": "Abraham", "lastName": "Elias"},
{"firstName": "Jay", "lastName": "Robinson"},
{"firstName": "Tommy", "lastName": "Maintz"},
{"firstName": "Ed", "lastName": "Spencer"},
{"firstName": "Jamie", "lastName": "Avins"},
{"firstName": "Aaron", "lastName": "Conran"},
{"firstName": "Dave", "lastName": "Kaneda"},
{"firstName": "Michael", "lastName": "Mullany"},
{"firstName": "Abraham", "lastName": "Elias"},
{"firstName": "Jay", "lastName": "Robinson"}
]}



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
var mylist = new Ext.List({
title: 'list json',
cls: 'timeline',
itemSelector: 'div.tweet',
singleSelect: true,
tpl: [
'<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
]
});

var panel = new Ext.TabPanel({
fullscreen: true,
animation: 'pop',
items: [mylist],
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
defaults: {
ui: 'mask'
},
scroll: 'horizontal',
layout: {
pack: 'center'
},
items: [
{
iconCls: 'refresh',
handler: function(){makeAjaxRequest();}
}
]
}]
});
var makeAjaxRequest = function() {
Ext.getBody().mask(false, '<div class="loading">Loading&hellip;</div>');

Ext.Ajax.request({
url: 'list.txt',//replace with ajax call
success: function(response, opts) {
Ext.getBody().unmask();
result = JSON.parse(response.responseText);
var item = result.items;
if (item) {
mylist.update(item);//update the component with the new json data
}
else {
alert('There was an error retrieving the list.');
}
},
failure: function(response, opts){
Ext.getBody().unmask();
}
})

};

}
});

danvega
12 Jul 2010, 6:29 PM
Thanks for the simple example. I am running into a problem though and I am not quite sure what it is. Whenever the code gets to the following line it fails with no error. I put a log after it to see if it would log anything and nothing. If I comment that line out and log the response.responseText it looks fine.



result = JSON.parse(response.responseText);
console.log(result);

evant
12 Jul 2010, 6:32 PM
Check the debugger. Also run the json through jsonlint.

danvega
12 Jul 2010, 6:35 PM
Man I forgot one little bracket in my test data ;( The json lint suggestion was a good one, great resource...

Thanks Evan!!