PDA

View Full Version : My data grid can not get data from an url



blasrhr
3 Sep 2010, 11:29 AM
Hi:I've been trying for a while to get a row editor data grid to work. Finally I got it to work with static data, but when I try to get the data from my asp file the grid does not show any row. The following is my js code:Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';Ext.onReady(function(){ Ext.QuickTips.init(); var Language = Ext.data.Record.create([ { name: 'language_pid' },{ name: 'lang_id', type: 'string' }, { name: 'description', type: 'string' }]); var editor = new Ext.ux.grid.RowEditor({ saveText: 'Update' }); var myReader = new Ext.data.JsonReader({ // metadata configuration options: idProperty: 'language_pid', root: 'languages', totalProperty: 'total', fields: [ {name: 'language_pid'}, { name: 'lang_id', type: 'string' }, { name: 'description', type: 'string' } ] } ); var store = new Ext.data.GroupingStore({ reader: myReader, //data: {"languages": [{"language_pid": 1,"lang_id": "sp","description": "Espanol"},{"language_pid": 2,"lang_id": "en","description": "English"}]}, url: '../test.asp', //proxy: new Ext.data.HttpProxy({ //where to retrieve data // url: '../test.asp', //url to data object (server side script) // method: 'POST' //}), sortInfo: {field: 'lang_id', direction: 'ASC'} }); var editor = new Ext.ux.grid.RowEditor({ saveText: 'Update' }); var grid = new Ext.grid.GridPanel({ store: store, width: 600, region:'center', margins: '0 5 5 5', //autoExpandColumn: 'description', plugins: [editor], view: new Ext.grid.GroupingView({ markDirty: false }), tbar: [{ iconCls: 'icon-user-add', text: 'Add Language', handler: function(){ var e = new language({ lang_id: '', description: 'lang description' }); editor.stopEditing(); store.insert(0, e); grid.getView().refresh(); grid.getSelectionModel().selectRow(0); editor.startEditing(0); } },{ ref: '../removeBtn', iconCls: 'icon-user-delete', text: 'Remove Language', disabled: true, handler: function(){ editor.stopEditing(); var s = grid.getSelectionModel().getSelections(); for(var i = 0, r; r = s[i]; i++){ store.remove(r); } } }], columns: [ new Ext.grid.RowNumberer(), { id: 'lang_id', header: 'Language ID', dataIndex: 'lang_id', width: 150, sortable: true, editor: { xtype: 'textfield', allowBlank: false } },{ header: 'Description', dataIndex: 'description', width: 220, sortable: true, editor: { xtype: 'textfield', allowBlank: false } }] }); var layout = new Ext.Panel({ title: 'My Languages', layout: 'border', layoutConfig: { columns: 1 }, width:600, height: 400, items: [grid] }); layout.render(Ext.getBody()); grid.getSelectionModel().on('selectionchange', function(sm){ grid.removeBtn.setDisabled(sm.getCount() < 1); }); store.load({params:{start:0, limit:25}});});and this the output of my test.asp file:({"total":"2","languages": [{"language_pid": 1,"lang_id": "sp","description": "Espanol"},{"language_pid": 2,"lang_id": "en","description": "English"}]})You can see in the store my various attempt to make it work, but only using static data worked for me.Hope you can help me.... Regards.... Blas

michaelc
3 Sep 2010, 2:52 PM
Wrap that in code tags, otherwise no one can read it. the # in the bar.

blasrhr
6 Sep 2010, 5:13 AM
Sorry about that, I hope it is readable now. You can see I have made some test using data directly on the reader, or the url or a httpProxy but I could anly make it work using data. Hope somebody can help me. Thanks in advance... Blas



Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
Ext.onReady(function(){
Ext.QuickTips.init();

var Language = Ext.data.Record.create([
{
name: 'language_pid'
},{
name: 'lang_id',
type: 'string'
}, {
name: 'description',
type: 'string'
}]);

var editor = new Ext.ux.grid.RowEditor({
saveText: 'Update'
});
var myReader = new Ext.data.JsonReader({
// metadata configuration options:
idProperty: 'language_pid',
root: 'languages',
fields: [
{name: 'language_pid'},
{
name: 'lang_id',
type: 'string'
}, {
name: 'description',
type: 'string'
}
]
}
);
var store = new Ext.data.GroupingStore({
reader: myReader,
//data: {"languages": [{"language_pid": 1,"lang_id": "sp","description": "Espanol"},{"language_pid": 2,"lang_id": "en","description": "English"}]},
url: '../test.asp',
//proxy: new Ext.data.HttpProxy({
//where to retrieve data
// url: '../test.asp', //url to data object (server side script)
// method: 'POST'
//}),
sortInfo: {field: 'lang_id', direction: 'ASC'}
});
var editor = new Ext.ux.grid.RowEditor({
saveText: 'Update'
});
var grid = new Ext.grid.GridPanel({
store: store,
width: 600,
region:'center',
margins: '0 5 5 5',
plugins: [editor],
view: new Ext.grid.GroupingView({
markDirty: false
}),
tbar: [{
iconCls: 'icon-user-add',
text: 'Add Language',
handler: function(){
var e = new language({
lang_id: '',
description: 'lang description'
});
editor.stopEditing();
store.insert(0, e);
grid.getView().refresh();
grid.getSelectionModel().selectRow(0);
editor.startEditing(0);
}
},{
ref: '../removeBtn',
iconCls: 'icon-user-delete',
text: 'Remove Language',
disabled: true,
handler: function(){
editor.stopEditing();
var s = grid.getSelectionModel().getSelections();
for(var i = 0, r; r = s[i]; i++){
store.remove(r);
}
}
}],
columns: [
new Ext.grid.RowNumberer(),
{
id: 'lang_id',
header: 'Language ID',
dataIndex: 'lang_id',
width: 150,
sortable: true,
editor: {
xtype: 'textfield',
allowBlank: false
}
},{
header: 'Description',
dataIndex: 'description',
width: 220,
sortable: true,
editor: {
xtype: 'textfield',
allowBlank: false
}
}]
});

var layout = new Ext.Panel({
title: 'My Languages',
layout: 'border',
layoutConfig: {
columns: 1
},
width:600,
height: 400,
items: [grid]
});
layout.render(Ext.getBody());
grid.getSelectionModel().on('selectionchange', function(sm){
grid.removeBtn.setDisabled(sm.getCount() < 1);
});

store.load({params:{start:0, limit:25}});
});

Condor
6 Sep 2010, 5:15 AM
And have you debugged?

- What does ../test.asp actually return?
- Does the store fire a load or an exception event?

blasrhr
6 Sep 2010, 7:26 AM
Hi, this is what test.asp returns:



{"total":"2","languages": [{"language_pid": 1,"lang_id": "sp","description": "Espanol"},{"language_pid": 2,"lang_id": "en","description": "English"}]}


Don't really know what the store fires.

Blas

blasrhr
6 Sep 2010, 9:18 AM
I think I found what was wrong. My test.asp was returning with html tags included. Your question about debugging did the trick. Thanks Condor, you really help.