PDA

View Full Version : Need Help: Insert simple Ajax grid to Desktop example



exdelierium
26 Apr 2010, 3:28 AM
Hi,

I am new to ExtJS (though I am familiar to JS in general). I read a few tutorials and viewed some examples. Then I tried to customize the Desktop example (which is awesome), by just adding a grid which loads data from an SQL-Database (also from the tutorials: Tutorial:Grid_PHP_SQL_Part3 (http://www.extjs.com/learn/Tutorial:Grid_PHP_SQL_Part3)). The Data-getting-part was already familiar and my php returns a json-object like this:

({"total":"2","results":[{"id":1,"user":"miah","status":1,"notiz":""},{"id":2,"user":"mitb","status":1,"notiz":""}]})

Step two was changing the example-grid MyDesktop.GridWindow. I just changed the store-property to teststore and the cm to:


cm: new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{header: "#", width: 50, sortable: true, dataIndex: 'id'},
{header: "Name", width: 120, sortable: true, dataIndex: 'user'},
{header: "Status", width: 70, sortable: true, dataIndex: 'status'}
]),The teststore var I included just at the beginning of the createWindow : function():


createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('grid-win');
var teststore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'database.php',
method: 'POST'
}),
baseParams:{task: "LISTING"}, // this parameter is passed for any HTTP request
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'id'
},[
{name: 'id', type: 'int', mapping: 'id'},
{name: 'user', type: 'string', mapping: 'user'},
{name: 'status', type: 'int', mapping: 'status'}
]),
sortInfo:{field: 'IDpresident', direction: "ASC"}
});
if(!win){Unfortunately, no data is displayed in my grid, the header is fine though.

Since I'm new to ExtJS, I figured there must be an understanding-problem of mine. I hope that one of U can tell me where it is and how I can work it out. The API Doc is very huge and I learn best when I have an example to look at. My other try-and-error-approaches did not work as well...

Looking forward to reading from you
Alex

EDIT: forgot to tell you, that I of course loaded the Data with teststore.load();, which I put just behind the win.show(); at the end of createWindow : function()

exdelierium
27 Apr 2010, 10:28 PM
Is there really not one example out there for a simple ajax request in the desktop-example?

It would really get me a huge step towards understanding the syntax.

tobiu
28 Apr 2010, 1:08 AM
hi exdelierium,

an easy example would be:
http://www.extjs.com/deploy/dev/examples/grid/paging.html

it does not matter if the grid is inside the desktop-ux or not.
your tutorial is really old (from the 2.* times), some things have changed: you can use a json-store, so you do not need to specify the proxy, the id config changed to idProperty (important!) etc.

i would bet you forgot to load the store. you could set a listener on the window -> show event for example.


kind regards,
tobiu