PDA

View Full Version : jsonStore -> panel.items



calebos
3 Aug 2009, 2:55 AM
Hi

Can I put a json store as "items" of accordion ?

My code is :



var navigation_menu = new Ext.data.Store({
root: 'root',
url: 'include/json_menu.php',
fields: ['Title','iconCls','id'],
autoLoad:true,

});

navigation_menu.load();

I want to have a dynamic accordion menu with that data.


var panel3 = new Ext.Panel({
region:'west',
id:'west-panel',
title:'West',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'0 0 0 5',
layout:'accordion',
layoutConfig:{
animate:true
},
items: navigation_menu

jay@moduscreate.com
5 Aug 2009, 3:06 AM
Why use a JSON store for that? Why not just an XHR?

The Ext JS container model is not designed to read configuration data off of a data store.

calebos
6 Aug 2009, 5:48 AM
Hi

My goal is to load most of contents from database. I see that there are limits to where you can work your way with Extjs loading its subelements from JSON.

I was wondering if its possible to use some url/apply/add from JSON/PHP so that all the config options are coming from a DB.

I managed to load tree from database without any problems



var treePanel = new Ext.tree.TreePanel({
id: 'tree-panel',
title:'Dokonaj wyboru',
region:'north',
split: true,

height: 300,
minSize: 150,
iconCls:'nav',


rootVisible: false,
lines: false,
singleExpand: true,
useArrows: false,


loader: new Ext.tree.TreeLoader({
dataUrl:'http://126.56.11.54/wris/include/mysql_to_json.php?element=tree'
}),

root: new Ext.tree.AsyncTreeNode()

});
Works with data from MySQL generated with php:


[{"text":"Traffic","expanded":false,"children":[{"text":"DRDSW","id":"drdsw","iconCls":"icon-ranking","leaf":true,"url":"include/content_provider.php?element=test"}]}]

Question is can extjs load its elements completly out of json(or any outside source) or do I have to "invent" my own ways of creating JS code from PHP as you stated.

Thanks

calebos
10 Aug 2009, 3:42 AM
Bump

To simplify my question:
How to load grid column definitions from a database?

Condor
10 Aug 2009, 3:47 AM
For grid columns you could look at the MetaGrid and/or AutoGrid user extensions.

steffenk
10 Aug 2009, 4:37 AM
i often generate columns from php using the model, means translating table fields to ExtJS column definition. It's more safe, when ever you change something in DB layout.

calebos
10 Aug 2009, 5:46 AM
Condor can you provide a valid link for one of these extensions for 3.0. All I have found were for 2.x . I would like to stay with what ExtJS offers in the matter. Using an extension means further problems if ExtJs updates come.

steffen I understand you mean ColumnModel but how do you load a php reply into it as column definitions ?

I notice there is some metadata ability in JsonReader but how does one use this reader to modify the column config of a grid ?

Condor
10 Aug 2009, 6:04 AM
Sorry, I've already seen people complaining that these extensions didn't exist for Ext 3.0.

Writing this yourself isn't that difficult. You have to change the ColumnModel (using setConfig) when the store is loaded using extra data in the response.

Try:

var store = new Ext.data.JsonStore({
url: '....',
fields: []
});
var grid = new Ext.grid.GridPanel({
...
viewConfig: {
...
onDataChange: function(){
this.cm.setConfig(this.store.reader.jsonData.columns);
this.syncFocusEl(0);
}
}
});
with JSON data:

{
root: [
{field: 'One'},
{field: 'Two'},
{field: 'Three'}
],
metaData: {
fields: ['field'],
idProperty: 'field',
root: 'root'
},
columns: [
{header: 'Field', dataIndex: 'field'}
]
}

calebos
10 Aug 2009, 11:05 PM
Im missing something in my store.
Ive added the column model but still having trouble with


var store = new Ext.data.JsonStore({
url:'include/json_menu.php'
});
store.load();
var xgrid = new Ext.grid.GridPanel({
store:store,
cm: new Ext.grid.CheckboxSelectionModel(),

viewConfig: {
onDataChange: function(){
this.cm.setConfig(this.store.reader.jsonData.columns);
this.syncFocusEl(0);
}
}
});


IE throws that this.store.reader is empty or is not an object. I understand that metadata configures the reader so Im not sure should I add anything to the reader.
Also tried adding the reader: new Ext.data.JsonReader()

Condor
10 Aug 2009, 11:27 PM
What does your data from include/json_menu.php look like?

calebos
10 Aug 2009, 11:30 PM
I just copy/paste what you gave me as the JSON example to get started.

exacly



{ root: [ {field: "One"}, {field: "Two"}, {field: "Three"} ], metaData: { fields: ["field"], idProperty: "field", root: "root" }, columns: [ {header: "Field", dataIndex: "field"} ] }


Which also makes me wonder: Shouldnt all the properties be enclosed by double quote not a single one ? Or does the jsonreader accept "bad" jsons

Condor
10 Aug 2009, 11:52 PM
Try:

var store = new Ext.data.JsonStore({
url: '...'
});
var grid = new Ext.grid.GridPanel({
store: store,
columns: [],
viewConfig: {
onDataChange: function(){
this.cm.setConfig(this.ds.reader.jsonData.columns);
this.syncFocusEl(0);
}
}
});

ps. In your example you are assigning a selection model to the 'cm' config option!

calebos
11 Aug 2009, 12:17 AM
Thanks for you help. I had a lot of mess in my code due to constant retries on the matter.
After your last message I managed to solve it



var store = new Ext.data.JsonStore({
url:'include/json_menu.php',
fields:[]

});
store.load();

var xgrid = new Ext.grid.GridPanel({
store:store,
columns:[],

viewConfig: {
onDataChange: function(){
this.cm.setConfig(this.ds.reader.jsonData.columns);
this.syncFocusEl(0);
}
}
});


where json_menu.php returns JSON :


"root": [
{field: "One"},
{field: "Two"},
{field: "Three"}
],
"metaData": {
fields: ["field"],
idProperty: "field",
root: "root"
},
"columns": [
{header: "Field", dataIndex: "field"}
]
}

blt_on_ext
13 Aug 2009, 3:04 PM
this works great! thanks so much!

what does the syncFocusEl(0) method call accomplish? the columns reconfigure fine without it.

Condor
17 Aug 2009, 1:41 AM
syncFocusEl makes sure the focus anchor is positioned at the top left, so pressing a key won't make the grid jump to it's previous (no longer valid) position.

vicirst
21 Aug 2009, 1:36 AM
Hy,
this work great thanks

is it possible for automatic edit grid also ?

i try this i JSON file but didnt work


{"root": [
{empid: "One", name: "Tonny", sex: "male"},
{empid: "Two", name: "Robby", sex: "male"},
{empid: "Three", name: "Ridwan", sex: "male"}
],
"metaData": {
fields: ["empid","name","sex"],
idProperty: "empid",
root: "root"
},
"columns": [
{header: "Emp ID", dataIndex: "empid", width: 50, editor: {
xtype: 'textfield',
allowBlank: false
}

},
{header: "Name", dataIndex: "name"},
{header: "sex", dataIndex: "sex"}
]
}

Condor
21 Aug 2009, 3:47 AM
Strange, that should work in Ext 3.0.

Or are you using Ext 2.x? In that case you can't specify an editor using an xtype.

juste_millieu
6 Sep 2009, 7:12 PM
can anyone upload the full programs? I can't get it right. Thank you.

vicirst
8 Sep 2009, 5:29 PM
hi,
edit now works fine in 3.0.0
but i can't get it work with grouping store



var q = new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({url: 'data.json', method: 'POST'}),
fields:[],
remoteSort: true
});

var xgrid = new Ext.grid.GridPanel({
store: new Ext.data.GroupingStore({
autoDestroy: true,
reader: param.ds
}),
view: new Ext.grid.GroupingView({
forceFit: true
}),
columns:[],
viewConfig: {
onDataChange: function(){
this.cm.setConfig(this.ds.reader.jsonData.columns);
this.syncFocusEl(0);
xgrid.getSelectionModel().selectFirstRow();
}
}
});



grid panel show without data, and without grouping store it works just fine.

Condor
9 Sep 2009, 11:06 PM
You can't have both 'view' and 'viewConfig' config options. Move your 'viewConfig' options into 'view'.

ajaxvador
30 Sep 2009, 2:24 AM
add renderer in metadata grid dont work ... please help

function myfunc() {
...
}

var store = new Ext.data.JsonStore({
url: '....',
fields: []
});
var grid = new Ext.grid.GridPanel({
...
viewConfig: {
...
onDataChange: function(){
this.cm.setConfig(this.store.reader.jsonData.columns);
this.syncFocusEl(0);
}
}
});





{
root: [
{field: 'One'},
{field: 'Two'},
{field: 'Three'}
],
metaData: {
fields: ['field'],
idProperty: 'field',
root: 'root'
},
columns: [
{header: 'Field', dataIndex: 'field', renderer: myfun()}
]
}

Condor
9 Oct 2009, 5:12 AM
You are assigning the result of myfun to the renderer!

Instead use:

{header: 'Field', dataIndex: 'field', renderer: myfun}

HarryHdf
30 Oct 2009, 8:29 AM
Hi Condor,


Sorry, I've already seen people complaining that these extensions didn't exist for Ext 3.0.

Writing this yourself isn't that difficult. You have to change the ColumnModel (using setConfig) when the store is loaded using extra data in the response.



I tried that in my own little app (Borderlayout: in the west panel some Parameters for a query can be selected and in a button-click an new tabpanel should apper in the center region's tabview.)

A new tab is generated OK, with a bugfix-code from this site, the store's fields are also taken from the JSON-reply, but the onDataChange-Event isn't called as in your example. Maybe I'm doing something wrong...

Here's my piece of code:



var getResPanel = function(QParams) {
// create the data Store
var newStore = new Ext.data.JsonStore({
url : 'Data/GetGridData.php',
//autoLoad : true,
baseParams : QParams,
fields : [],
listeners : {
beforeload: function(n) {
n.baseParams = QParams;
}
},
metachange: function(store, newmeta) {
console.log('store fired the metachange')
}
});
newStore.load();

var newPanel = new Ext.grid.EditorGridPanel({
closable : true,
store : newStore ,
//columns : [],
cm : new Ext.grid.ColumnModel({defaultSortable : true, defaultWidth : 120, columns : []}),
animate : true,
autoScroll : true,
stripeRows : true,
frame : true,
title : 'gridtitle',
layout : 'fit',

loadMask : {msg: 'Loading result data...'},
viewConfig: {
onDataChange: function(){
this.cm.setConfig(this.store.reader.jsonData.columns); // <= never stopped her with a breakpoint in firebug
this.syncFocusEl(0);
}
}
}
})

return newPanel; // return new grid to button-click to get added to the tabPanel
}
with JSON data:


{ "metaData":{
"root":"resdata",
"totalProperty":"rowcount",
"successProperty":"success",
"fields":[
{"name":"MsgCount","type":"int"},
{"name":"MsgSeverity","type":"string"},
{"name":"MsgNo","type":"string"}
]
},
"success":"true",
"rowcount":0,
"columns":[
{"header":"Anzahl","dataindex":"MsgCount","width":33},
{"header":"Ernsthaftigkeit","dataindex":"MsgSeverity","width":200},
{"header":"Numm","dataindex":"MsgNo","width":120}
],
"resdata":null
}

Where's my fault?

Thanks, Harry

Condor
2 Nov 2009, 1:01 AM
Where's my fault?

Your JSON data should contain an empty root (instead of 'null'):

"resdata":[]

HarryHdf
2 Nov 2009, 2:01 AM
Hi,


Your JSON data should contain an empty root (instead of 'null'):

"resdata":[]

That doesn't change anything. I managed it another way: I created a callback-function in newPanel and added a listener after the creation of newPanel.



newPanel.store.addListener('load', newPanel.updatecm, newPanel);
newStore.load();
this way it works for me. But I get an error at "this.syncFocusEl(0)", so I commented it out. Works anyway.

thanks,

Harry

dalder
30 Dec 2009, 12:40 AM
hi, try to implement dynamic grids in my application including directstore:



var listViewStore = new Ext.data.DirectStore({
directFn: Ext.ss.controller_direct.directGetCmListView,
paramsAsHash: true,
fields: []
});

var listViewGrid = new Ext.grid.GridPanel ({
title: 'test',
region: 'center',
store: listViewStore,
columns: [],
viewConfig: {
onDataChange: function(){
this.cm.setConfig(this.store.reader.jsonData.columns);
this.syncFocusEl(0);
}
}
});
and this is the responding json:



"result":{
"rows":[
{"id":1,"extKey":"testkey1","extPath":"testpath1"},
{"id":2,"extKey":"testkey2","extPath":"testpath2"}
],
"metaData":{"idProperty":"extKey","root":"rows"},
"columns":[
{"header":"id","dataIndex":"id"},
{"header":"extKey","dataIndex":"extKey"},
{"header":"extPath","dataIndex":"extPath"}
],
"sortInfo":{"field":"extKey","direction":"ASC"}
}
did i forgot something? or is it not possible to use directstore with metadata (thought it's a jsonreader with directproxy)?

thanks for replay!

Condor
30 Dec 2009, 1:33 AM
Are you sure the response needs to contain "result"?

ps. I'm not using Ext.Direct, so I could be wrong...

dalder
30 Dec 2009, 5:14 AM
...if i use following code (same json) everything's right:



var listViewStore = new Ext.data.DirectStore({
directFn: Ext.ss.controller_direct.directGetCmListView,
paramsAsHash: true,
fields: ['id', 'extKey', 'extPath'],
root: 'rows'
});

var listViewGrid = new Ext.grid.GridPanel ({
title: 'test',
region: 'center',
store: listViewStore,
columns: [
{"header":"id","dataIndex":"id"},
{"header":"extKey","dataIndex":"extKey"},
{"header":"extPath","dataIndex":"extPath"}
]
});

dalder
30 Dec 2009, 8:13 AM
solved:



var listViewStore = new Ext.data.DirectStore({
directFn: Ext.ss.controller_direct.directGetCmListView,
paramsAsHash: true,
fields: []
});

var listViewGrid = new Ext.grid.GridPanel ({
title: 'test',
region: 'center',
store: listViewStore,
columns: [],
viewConfig: {
onDataChange: function(){
this.cm.setConfig(listViewStore.reader.jsonData.columns);
this.syncFocusEl(0);
}
}
});
and json respond:



"result":{
"rows":[
{"id":1,"extKey":"testkey1","extPath":"testpath1"},
{"id":2,"extKey":"testkey2","extPath":"testpath2"}
],
"metaData":{
"idProperty":"extKey",
"root":"rows",
"fields":["id","extKey","extPath"]
},
"columns":[
{"header":"id","dataIndex":"id"},
{"header":"extKey","dataIndex":"extKey"},
{"header":"extPath","dataIndex":"extPath"}
],
"sortInfo":{"field":"extKey","direction":"ASC"}
}

ajaxvador
27 Jan 2010, 4:45 PM
my json store not showing in grid !!! :-?

Ext.Direct.addProvider(Ext.app.REMOTING_API = {
url : 'gd2.asp?c_insp=2',
type : 'remoting',

actions : {
feeds : [{
name : 'mydata',

len : 0
}]
}});

var newStore = new Ext.data.DirectStore({
directFn: feeds.mydata,
paramsAsHash: true,
root: 'records',
autoLoad:true,
fields: []
});




var grid = new Ext.grid.GridPanel({
id:'grid1',
store: newStore,
autoScroll : true,
stripeRows : true,
width:500,height:500,
autoSize:true,
layout : 'fit',
border:true,
columns: [],
viewConfig: {
onDataChange: function(){
this.cm.setConfig(newStore.reader.jsonData.columns);
this.syncFocusEl(0);
}
}
,renderTo: document.body


});

please help :-/

calebos
27 Jan 2010, 11:24 PM
You sure server response is properly formatted and has all the columns and fields definitions in metadata ? use firebug to check

scblue
11 Feb 2010, 12:00 AM
I'm trying to use this in my application as well.
I can see my metadata returned from firebug but the grid is not showing anything.
I'd appreciate any help anyone can give me.

Thanks.




var wstore = new Ext.data.JsonStore({
url:'wdatabase2.php?action=listing',
fields:[]
});

wstore.load();

var wgridf = new Ext.grid.GridPanel({
id: 'wgridf',
store: wstore,
columns: [],
viewConfig: {
onDataChange: function(){
this.cm.setConfig(this.wstore.reader.jsonData.columns);
this.syncFocusEl(0);
}
} //eo Viewconfig

});

var wgrid = new Ext.Panel({
id: 'wgrid',
height: 1000,
layout: 'form',
items: wgridf
});

My metadata returned:




{"metadata" : {
"root": "records",
"totalProperty": "total",
"fields":[ "id", "wname"
]},
"columns": [{
"header": "WID",
"dataIndex": "id",
},{
"header": "WName",
"dataIndex": "wname"
}],
"success": true,
"total":4,
"records":[{"id":"16","wname":"rrrrr2121"},{"id":"15","wname":"newnewaaa"},{"id":"9","wname":"123123"},{"id":"14","wname":"ggg444"}]
}

calebos
11 Feb 2010, 5:58 AM
Well for start try and add name= to all fields config.


fields:["fields":[ name="id", name="wname"

scblue
23 Feb 2010, 6:05 PM
Well for start try and add name= to all fields config.


fields:["fields":[ name="id", name="wname"



Yes, added that. Still not displaying the grid.
Any other ideas?
Thanks very much!

E_lexy
9 Mar 2010, 2:00 AM
Does anyone know if it is possible to specify a gridfilter in the metadata, like in the Metagrid plugin by MJ?

daiei27
29 Mar 2010, 1:02 PM
Sorry, I've already seen people complaining that these extensions didn't exist for Ext 3.0.

Writing this yourself isn't that difficult. You have to change the ColumnModel (using setConfig) when the store is loaded using extra data in the response.

Try:

var store = new Ext.data.JsonStore({
url: '....',
fields: []
});
var grid = new Ext.grid.GridPanel({
...
viewConfig: {
...
onDataChange: function(){
this.cm.setConfig(this.store.reader.jsonData.columns);
this.syncFocusEl(0);
}
}
});with JSON data:

{
root: [
{field: 'One'},
{field: 'Two'},
{field: 'Three'}
],
metaData: {
fields: ['field'],
idProperty: 'field',
root: 'root'
},
columns: [
{header: 'Field', dataIndex: 'field'}
]
}
I've been searching all over this forum for passing column info with my JSON data. Most of the threads were old with overly complicated solutions. I knew there had to be something better and finally happened across this!

The perfect solution for passing all my JSON data in one shot! Thanks, Condor!

P.S. Details on this should go in the ExtJS FAQ.

Scorpie
31 Mar 2010, 12:01 AM
Alright, I have the following code. The store loads, everything seems ok, but the gridfilter plugin taken from the Examples doesnt show up in the column headers. I have no idea why. CSS and images are present.





PB.Grid.MetaGridEditorPanel = Ext.extend(Ext.grid.GridPanel, {
/**
* Implement onEvent function
*/
onEvent: function(action, key){
switch (action) {
case 'generateMetaGridPanelWindow':
this.showPanel(key);
break;
}
},


showPanel: function(key){


},


initComponent: function(){
var store = new Ext.data.JsonStore({
url: 'lib/components/metagrid/meta-data.json?action=read',
fields: [],
remoteSort: false
});
store.load();



var filters = new Ext.ux.grid.GridFilters({
filters: [{
type: 'numeric',
dataIndex: 'id'
},{
type: 'string',
dataIndex: 'field'
}]
});


// configure the MetaGrid
Ext.apply(this, {
height: 735,
store: store,
columns: [],
plugins: [filters],
viewConfig: {
onDataChange: function(){
console.log('datachange');
this.cm.setConfig(this.ds.reader.jsonData.columns);
this.syncFocusEl(0);
}
},
listeners: {
render: {
fn: function(){
console.log('load');
store.load({
params: {
start: 0,
limit: 50
}
});
}
}
},
bbar: new Ext.PagingToolbar({
store: store,
pageSize: 50,
plugins: [filters]
})
}); // eo apply


this.reconfigure(store, this.getColumnModel());


// call parent
PB.Grid.MetaGridEditorPanel.superclass.initComponent.apply(this, arguments);
} // eo function initComponent
});



And this is my json:





{


"success": true,


"results" : [






],


"idProperty": "id",

"root": "results",

"start": 0,
"limit": 10,
"successProperty": "success",
"totalProperty": "total",
"root": [
{
"id" : "1",
"field": "One"
},
{
"id" : "2",
"field": "Two"
},
{
"id" : "3",
"field": "Three"
}
],
"metaData": {
"fields": [
"id", "field"
],
"idProperty": "id",
"root": "root"
},
"columns": [
{
"name":"id",
"header":"Id",
"sortable":true
} ,
{
"header": "Field",
"dataIndex": "field",
"sortable":true,
"filter" : {
"type" : "string"
}
}
]
}











Any hints of what might be the problem?

jaschultz
24 Jun 2010, 1:19 PM
So I have been fighting with this for a while now, and I can't get quite get the data to show up in the grid. I have the columns getting displayed dynamically, just the data from store is not showing up.
The header information is stored in the base part of the items that is getting returned, the actual data that is needed to be displayed is one level down under the Sites.

This is the JsonStore.


var subClientStore = new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({
url: '/SubClient/GetSelectedSubClientInfo/',
method: 'POST'
}),
root: 'items',
fields: [],
listeners: {
exception: storeExceptionHandler
}
});


Here is my Grid


var mainGridPanel = new Ext.grid.GridPanel({
id: 'MainGridPanel',
height: 500,
region: 'north',
stripeRows: true,
columns: [],
stateId: 'ReportGridState',
pageSize: pageSize,
tbar: topToolBar,
plugins: filters,
store: subClientStore,
viewConfig: {
onDataChange: function() {
this.cm.setConfig(this.ds.reader.jsonData.columns);
this.syncFocusEl(0);
}
}
});


The items, metaData and columns are being built on the server side.
Here is the Json being returned by the call:


{"success":true,
"items":[{
"SubClientId":"999000000",
"RetailerId":"999000000",
"Name":"Test Company - 1234567",
"ParentId":"1",
"HeaderOne":"CLLI",
"HeaderTwo":"City",
"HeaderThree":"WSP",
"HeaderFour":null,
"HeaderFive":"Account Number",
"Sites":[
{"Id":"0000000000012",
"Location":"11902 100 ST SOME CITY",
"SortOne":"AB0001",
"SortTwo":"SOME CITY",
"SortThree":"SOME WSP",
"SortFour":"",
"SortFive":"000000012"
}
]
}],
"metaData":
{"root":"items",
"fields":
[ "Sites.Id",
"Sites.Location",
"Sites.SortOne",
"Sites.SortTwo",
"Sites.SortThree",
"Sites.SortFour",
"Sites.SortFive"
],
"idProperty":"Sites.Id"
},"columns":[
{"header":"Site Id","dataIndex":"Id"},
{"header":"Location","dataIndex":"Location"},
{"header":"CLLI","dataIndex":"Sites.SortOne"},
{"header":"City","dataIndex":"Sites.SortTwo"},
{"header":"WSP","dataIndex":"Sites.SortThree"},
{"header":null,"dataIndex":"Sites.SortFour"},
{"header":"Account Number",
"dataIndex":"Sites.SortFive"
}]}


I can't quite see what I am doing wrong, any help that anyone is able to provide would be awesome. Thanks for your time.

Manar
13 Jul 2010, 2:02 AM
hi everybody,

it's been 2 days since i'm trying to get a dynamic grid without result :((

here's my index.html:




<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-fr" lang="fr-fr" >
<head>
<title>Historique du tonnage</title>
<link rel="stylesheet" href="/ext-3.0.0/resources/css/ext-all.css (http://www.sencha.com/forum/view-source:http://localhost/obs/phpfiles/ext-3.0.0/resources/css/ext-all.css)" type="text/css" />
<link rel="stylesheet" href="/xtheme-gray.css (http://www.sencha.com/forum/view-source:http://localhost/obs/phpfiles/xtheme-gray.css)" type="text/css" />
<script type="text/javascript" src="/ext-3.0.0/adapter/ext/ext-base.js (http://www.sencha.com/forum/view-source:http://localhost/obs/phpfiles/ext-3.0.0/adapter/ext/ext-base.js)"></script>
<script type="text/javascript" src="/ext-3.0.0/ext-all.js (http://www.sencha.com/forum/view-source:http://localhost/obs/phpfiles/ext-3.0.0/ext-all.js)"></script>
<script type="text/javascript" src="/ext-3.0.0/src/locale/ext-lang-fr.js (http://www.sencha.com/forum/view-source:http://localhost/obs/phpfiles/ext-3.0.0/src/locale/ext-lang-fr.js)"></script>
<script type="text/javascript" src="/RowExpander.js (http://www.sencha.com/forum/view-source:http://localhost/obs/phpfiles/RowExpander.js)"></script>
<script type="text/javascript" src="/lang.js (http://www.sencha.com/forum/view-source:http://localhost/obs/phpfiles/lang.js)"></script>
<script type="text/javascript" src="/HT/grid.js (http://www.sencha.com/forum/view-source:http://localhost/obs/phpfiles/HistoriqueTonnage/grid.js)"></script>

</head>
<body>
<table align="center" width="100%" id="extjs">
<tr>
<td>
<div id="form"></div>
<div id="grid"></div>
</td>
</tr>
</table>
</body>
</html>



grid.js:


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


var DStore = new Ext.data.JsonStore({
url: _path+'/data.php',
fields: []
});

var grid = new Ext.grid.GridPanel({
id:'grid1',
renderTo:'grid',
frame: true,
store: DStore,
columns:[],
viewConfig: {
onDataChange: function(){
this.cm.setConfig(this.ds.reader.jsonData.columns);
this.syncFocusEl(0);
}
},

stripeRows: true,
height:400,
width:'96%',
bbar: new Ext.PagingToolbar({
pageSize: 40,
store: DStore,
displayInfo: true,
displayMsg: 'Enregistrements {0} - {1} de {2}',
emptyMsg: "Table vide"
})

});

var DForm = new Ext.FormPanel({
url: _path+'/data.php',
renderTo: 'form',
frame: true,
title: 'Choix',
width: 600,
items: [
new Ext.form.Hidden ({
name: 'send',
value:'oui'
}),
{
xtype: 'textfield',
fieldLabel: 'De',
name: 'annee1',
allowBlank: false,
value:2006,
msgTarget: "under"
},{
xtype: 'textfield',
fieldLabel: 'A',
name: 'annee2',
allowBlank: false,
value:2008,
msgTarget: "under"
},new Ext.form.RadioGroup({
vertical: false,
columns: 2,
id:"decoupage",
items: [
{
boxLabel: 'Administratif',
name: 'decoupage',
inputValue: 'DA',
checked:true
},
{
boxLabel: 'Regional',
name: 'decoupage',
inputValue: 'DR'
}
]

})
],
buttons: [
{
text: 'Executer',
handler: function(){
DForm.getForm().submit({
waitTitle:'Chargement en cours',
waitMsg:'Envoi des données...',
success: function(f,a){
var checkedItem = DForm.getForm().getValues()['decoupage'];
if (checkedItem == undefined) Ext.Msg.alert('Attention', 'choisir le type');
else{
DStore.load({params: DForm.getForm().getValues(),start: 0, limit: 40});
}


},
failure: function(f,a){
if (a.failureType === Ext.form.Action.CONNECT_FAILURE)
{Ext.Msg.alert('Echec', 'Message serveur:'+a.response.status+' '+a.response.statusText);
}
if (a.failureType === Ext.form.Action.SERVER_INVALID){
Ext.Msg.alert('Attention', a.result.errormsg);
}
}
});
}
}
]
});
});




my json data:


{
"success":true,
"metadata": {
"fields":"['ID','NOM','PRENOM','COMMUNES']",
"idProperty":"ID",
"root":"results",
"totalProperty":"total"
},
"columns":[
{"id":"ID","header":"ID","sortable":true,"dataIndex":"ID","hidden":true},
{"id":"NOM","header":"NOM","sortable":true,"dataIndex":"NOM"},
{"id":"PRENOM","header":"PRENOM","sortable":true,"dataIndex":"PRENOM"},
{"id":"COMMUNES","header":"COMMUNE","sortable":true,"dataIndex":"COMMUNES"}
],
"total":48,
"results":[
{"ID":"412","NOM":"K Abellah","PRENOM":null,"COMMUNES":null},
...
]
}

but firebug display:


e is undefined
chrome://firebug/content/blank.gifExt.DomHelper=function(){var s=null,j=...stopEvent();this.completeEdit()}}}});


and the grid is empty, even columns are'nt displayed !!!



thanks for help

Jangla
16 Aug 2010, 8:24 AM
Am I missing something here. I've taken almost every example on this thread where people have said they've got at least the store working and borrowed their code....and got nothing in the store.

Example :

JSON:



{"success":true,
"items":[{
"SubClientId":"999000000",
"RetailerId":"999000000",
"Name":"Test Company - 1234567",
"ParentId":"1",
"HeaderOne":"CLLI",
"HeaderTwo":"City",
"HeaderThree":"WSP",
"HeaderFour":null,
"HeaderFive":"Account Number",
"Sites":[
{"Id":"0000000000012",
"Location":"11902 100 ST SOME CITY",
"SortOne":"AB0001",
"SortTwo":"SOME CITY",
"SortThree":"SOME WSP",
"SortFour":"",
"SortFive":"000000012"
}
]
}],
"metaData":
{"root":"items",
"fields":
[ "Sites.Id",
"Sites.Location",
"Sites.SortOne",
"Sites.SortTwo",
"Sites.SortThree",
"Sites.SortFour",
"Sites.SortFive"
],
"idProperty":"Sites.Id"
},"columns":[
{"header":"Site Id","dataIndex":"Id"},
{"header":"Location","dataIndex":"Location"},
{"header":"CLLI","dataIndex":"Sites.SortOne"},
{"header":"City","dataIndex":"Sites.SortTwo"},
{"header":"WSP","dataIndex":"Sites.SortThree"},
{"header":null,"dataIndex":"Sites.SortFour"},
{"header":"Account Number",
"dataIndex":"Sites.SortFive"
}]}

Store code :



var store = new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({
url: 'http://localhost:8080/testData.json',
method: 'POST'
}),
root: 'items',
fields: []
});

End result : nothing in the store, no fields, no data, nothing. Nada. Zip (the store object exists - there's just nothing in it).

So, what am I missing?

BTW - this is only part 1 of my problem. Once I get it working I have to make it work with XML rather than JSON :D

cwells
26 Aug 2010, 7:16 PM
[EDIT: caught my error in having "columns" inside "metaData" in the JSON, but that didn't help]

Getting no love from this.

My JSON:


{
"columns": [
{"header": "Date", "dataIndex": "query_date"},
{"header": "ANI", "dataIndex": "ani"},
{"header": "Dips", "dataIndex": "query_count"}
],
"rows": [
{"query_count": 100, "query_date": "2010-08-24", "ani": "5551231257"},
{"query_count": 100, "query_date": "2010-08-25", "ani": "5551231257"},
{"query_count": 100, "query_date": "2010-08-26", "ani": "5551231257"}
],
"results": 3,
"success": true,
"metaData": {
"totalProperty": "results",
"successProperty": "success",
"root": "rows",
"fields": [
{"name": "query_date"},
{"name": "ani"},
{"name": "query_count"}
]
}
}


My Javascript:


Reports.store = new Ext.data.JsonStore ({
autoLoad: true,
url: '/reports/1',
fields: [ ]
});

Reports.grid = new Ext.grid.GridPanel ({
store: Reports.store,
colModel: new Ext.grid.ColumnModel ({
defaultSortable: true,
defaultWidth: 120,
columns: [ ]
}),
viewConfig: {
onDataChange: function () {
alert('here'); // doesn't appear to fire?
this.colModel.setConfig (this.store.reader.jsonData.columns);
this.syncFocusEl (0);
}
}
});


What am I doing wrong?

cwells
26 Aug 2010, 7:53 PM
Try:

var store = new Ext.data.JsonStore({
url: '...'
});
var grid = new Ext.grid.GridPanel({
store: store,
columns: [],
viewConfig: {
onDataChange: function(){
this.cm.setConfig(this.ds.reader.jsonData.columns);
this.syncFocusEl(0);
}
}
});

ps. In your example you are assigning a selection model to the 'cm' config option!

I'm completely baffled by the references to "this.cm" and "this.ds". Where are these defined?

cwells
26 Aug 2010, 10:46 PM
I'm completely baffled by the references to "this.cm" and "this.ds". Where are these defined?

nm, I located these in the docs. However this stuff still doesn't work for me. It appears that onDataChange is never fired. Guess I'll just generate an HTML table and be happy.

fvchapa
19 Apr 2012, 6:49 AM
Sorry but my English is not very good. I'm trying to make dynamic columns in a grid and throws me the following error

d is undefined

the code is as follows.


var store = new Ext.data.JsonStore({
url : '...',
fields: []
})


var grilla = new Ext.grid.GridPanel({
// mask:true,
columnLines: true,
id: 'grilla',
// frame: true,
// title: 'Resultados de la Busqueda',
store: store,
layout:'fit',
autoSizeColumns: true,
autoscroll: true,
// autoHeight: true,
columns: [],
//plugins: [summary],
viewConfig: {
onDataChange: function() {
this.cm.setConfig(this.ds.reader.jsonData.columns);
this.syncFocusEl(0);
}
},
loadMask: {msg: 'Cargando Datos, espere por favor...'},
// bbar: pager,
stripeRows: true,
removeMask:true,
autoLoad:false,
split:true,
border:false

});

I am doing wrong?
thank you very much for your time and hope someone can help me.
regards