PDA

View Full Version : load grid in borderLayout



bauchinj
16 Oct 2009, 4:33 AM
Hello!

I'd like to select items from a database and call this items via ajax. The items should be shown in a borderLayout (region:'center')


if (xmlhttp.readyState==4){
var st = new Ext.data.ArrayStore({
fields : [{
name : 'id'
},{
name : 'first'
},{
name : 'last'
},{
name : 'email'
}
]
});

ctrContainer.add({
xtype : 'grid',
title : 'Datenbankparameter',
autoLoad : true,
store : st,
columns : [{
id :'id',
header : "UUID",
width : 160,
sortable : false,
dataIndex : 'id'
},{
header : "Vorname",
width : 75,
sortable : true,
dataIndex : 'first'
},{
header : "Nachname",
width : 75,
sortable : true,
dataIndex : 'last'
},{
header : "Email",
width : 75,
dataIndex : 'email'
}
]
});
store.loadData(xmlhttp.responseText);
ctrContainer.doLayout();
}

I don't know, why this don't work, I will replace just a panel, which is first in center region:


p = Ext.getCmp('panel');
m = Ext.getCmp('mandator');
ctrContainer = Ext.getCmp('centerRegion');

ctrContainer.remove(m, true);
ctrContainer.remove(p, true);

readGridDB();

In firebug i get first no error, but after some seconds I get a 404 message, don't know if this is important...


all the best

Animal
16 Oct 2009, 4:36 AM
Stores load themselves through Ajax anyway. What are you doing messing with XHRs yourself?

bauchinj
16 Oct 2009, 4:38 AM
sorry, don't know, what you mean - "messing XHRs"?

Animal
16 Oct 2009, 7:07 AM
"if (xmlhttp.readyState==4){"

No. Stores load themselves through Ajax. Do not mess with XHRs

bauchinj
18 Oct 2009, 9:52 PM
But how do I get the data else? I make a XHR to load data from a database and load them in the grid....
How could I implement it else, do you have an example?

Animal
18 Oct 2009, 11:21 PM
Create a Store with an HttpProxy configured to access your server.

Post your code and we'll help.

bauchinj
18 Oct 2009, 11:30 PM
function test(m){
p = Ext.getCmp('panel');
ctrContainer = Ext.getCmp('centerRegion');

ctrContainer.remove(p, true);

var st = new Ext.data.ArrayStore({
fields : [{
name : 'id'
},{
name : 'first'
},{
name : 'last'
},{
name : 'email'
}
]
});

ctrContainer.add({
xtype : 'grid',
title : 'param',
region : 'center',
store : st,
columns : [{
id :'id',
header : "UUID",
width : 160,
sortable : false,
dataIndex : 'id'
},{
header : "First",
width : 75,
sortable : true,
dataIndex : 'first'
},{
header : "Last",
width : 75,
sortable : true,
dataIndex : 'last'
},{
header : "Email",
width : 75,
dataIndex : 'email'
}
]
});

readGridDB(st, ctrContainer);
ctrContainer.doLayout();
}


following is the request:


function readGridDB(store, ctrContainer){
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null){
alert ("Your browser does not support XMLHTTP!");
return;
}
var url="readDB.php";
url=url+"?sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged(store, ctrContainer);
xmlhttp.open("POST",url,true);
xmlhttp.send(null);
}
function GetXmlHttpObject(){
if (window.XMLHttpRequest){
return new XMLHttpRequest();
}
if (window.ActiveXObject){
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
function stateChanged(store, ctrContainer){
if (xmlhttp.readyState==4){
store.loadData(xmlhttp.responseText);
}
}


so I thought it could work like this, but I think data are later loaded, as doLayout() is called. :s

bauchinj
18 Oct 2009, 11:34 PM
Just to add:
function test() is loaded, when a link is clicked!

Animal
18 Oct 2009, 11:52 PM
So your Store needs



proxy: new Ext.data.HttpProxy({
url:'readDB.php'
}),

bauchinj
19 Oct 2009, 12:00 AM
How do I have to return the data?

just a string like:

['ab','cd','ef','gh']

or in an array? readDB.php now just echo the string with the data, do I have to "return($data);"?

Animal
19 Oct 2009, 12:47 AM
It depends.

Are you wanting paging, or are you just dumping the whole dataset into the grid?

bauchinj
19 Oct 2009, 12:50 AM
both :-)

No, first I just want to load the whole dataset. I want to build my application step by step!

Animal
19 Oct 2009, 1:23 AM
Well, best start as you mean to go on.

Use a JsonReader, and then send



{
count: <total dataset size>,
data: [
[ 'field1', 'field2'...]
[...]
]
}


Then you'd specify mapping 0, 1, 2, 3 etc in your Record definition to extract the elements from each row in the data Array.

bauchinj
19 Oct 2009, 1:37 AM
just to make clear:

Do I have to run this code in my .php?
How do I have to return my data?

Animal
19 Oct 2009, 2:24 AM
Make your PHP return data that looks like that. I have no clue about PHP.

bauchinj
19 Oct 2009, 3:40 AM
This is my code:


var st = new Ext.data.ArrayStore({
proxy : new Ext.data.HttpProxy({
url : 'readDB.php',
method : 'POST'
}),
reader : new Ext.data.JsonReader({
idProperty : 'id',
root : 'rows',
totalProperty : 'results',
fields : [
{ name : 'id'},
{ name : 'first'},
{ name : 'last'},
{ name : 'email'}
]
//data : myData
}),
fields : [{
name : 'id'
},{
name : 'First'
},{
name : 'Last'
},{
name : 'Email'
}
]
});

How can I load the store????? there are NO data! Just head of column is there! (:|
Can somebody give me example?

Animal
19 Oct 2009, 4:05 AM
So what does your JSON look like?

Animal
19 Oct 2009, 4:06 AM
Don't use an ArrayStore, use a Store

bauchinj
19 Oct 2009, 4:09 AM
But why?

Animal
19 Oct 2009, 4:13 AM
ArrayStore uses an ArrayReader.

bauchinj
19 Oct 2009, 4:43 AM
Following is my json, I get returned from the server:


{"results":
[{"id":"6453dc60-b714-11de-8a39-0800200c9a66","first":"Johannes","last":"Bauchinger","email":"test"},
{"id":"fe566f80-b714-11de-8a39-0800200c9a66","first":"Michael","last":"Ornig","email":"test"}],
"count":2}

and here is my function:



function test(m){
p = Ext.getCmp('panel');
ctrContainer = Ext.getCmp('centerRegion');

ctrContainer.remove(p, true);

myRecord = Ext.data.Record.create([{name: 'id'}, {name: 'first'}, {name: 'last'}, {name: 'email'}]);
myReader = new Ext.data.JsonReader({
root: 'results',
totalProperty:'totalcount'
}, myRecord);

var st = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : 'readDB.php',
method : 'POST'
}),
root : 'results',
reader : myReader
});
ctrContainer.add({
xtype : 'grid',
title : 'param',
region : 'center',
store : st,
columns : [{
id :'id',
header : "UUID",
width : 100,
sortable : false,
dataIndex : 'id'
},{
header : "First",
width : 75,
sortable : true,
dataIndex : 'first'
},{
header : "Last",
width : 75,
sortable : true,
dataIndex : 'last'
},{
header : "Email",
width : 75,
dataIndex : 'email'
}
]
});
ctrContainer.doLayout();
}



So I really don't know, what I do wrong! I had tested all and everything, but nothing works :((! Again the error:
the header of the column is output, but not the data...

Animal
19 Oct 2009, 4:56 AM
That's why I told you to use mapping: 0, 1, 2, etc in you field definitions (And you only need ONE set of field definitions)

bauchinj
19 Oct 2009, 5:08 AM
and what is mapping?

Animal
19 Oct 2009, 5:29 AM
You created an Ext.data.Record.create statement.

Each item in the Array there is a Field config.

Some reading for you:

http://www.extjs.com/deploy/ext-3.0.0/docs/?class=Ext.data.Field

http://www.extjs.com/deploy/ext-3.0.0/docs/?class=Ext.data.JsonReader

bauchinj
19 Oct 2009, 5:43 AM
But that couldn't be so difficult, that I have to work a whole day on it.................. >:)

I think my problem is in


proxy : new Ext.data.HttpProxy({
url : 'readDB.php',
method : 'POST'
}),

I think no data are loaded! is this possible? Is there any function/method, I can check this? if yes, which one? who can help me with php, who know, how I have to "send" the data from php???

Animal
19 Oct 2009, 5:48 AM
It's not difficult.

You just have to use mapping: 0, mapping: 1 etc.

As I told you.

if you continue to ignore me, it will be difficult.

bauchinj
19 Oct 2009, 5:52 AM
OK, I have, this is the json, I (hopfully) get from php:


{"results":[{"mapping":"0","uuid":"6453dc60-b714-11de-8a39-0800200c9a66","first":"Johannes","last":"Bauchinger","email":"test"}, {"mapping":"1","uuid":"fe566f80-b714-11de-8a39-0800200c9a66","first":"Michael","last":"Ornig","email":"test"}],"count":2}



The result hasn't change.

Animal
19 Oct 2009, 6:07 AM
Why put mapping in the data? Did you not READ the docs I spent hours and hours writing?

And what do you mean "hopefully"?? SHOW THE ACTUAL JSON.

bauchinj
19 Oct 2009, 11:41 PM
Hello again!


Hopefully means, when I run just the .php file directly, and echo the result, this ist the result, but I don't know, if (how) the result is sent to extjs. So I think following code should do this?:


var st = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : 'readDB.php',
method : 'POST'
}),
root : 'results',
reader : myReader
}); But if I write:

echo($str);or:

return($str);I get no data...

So I don't know if one of this syntax is the right one or not!

bauchinj
20 Oct 2009, 6:32 AM
Thank you for help, animal!

I have solved the Problem:

Had not loaded the store ;)

st.load();