PDA

View Full Version : GridPanel and JsonStore



0dd_b1t
2 Jul 2010, 6:46 AM
Hello everyone.

Im know, this question mbe very simple but i'm extjs newbie :s
I took example with editable grids and trying to modified it. I want to take JSON data from PHP file and put it into my grid. Life workplace here - http://acc.spbstu.ru/editE.php

PHP code very simple =)


<?php
echo "
{ emp:[{name:'1', email:'Category 1', start:'21/01/2001', salary:'2222', active:'true'},
{name:'2', email:'Category 1', start:'21/01/2001', salary:'2222', active:'true'},
{name:'3', email:'Category 1', start:'21/01/2001', salary:'2222', active:'true'},
{name:'4', email:'Category 1', start:'21/01/2001', salary:'2222', active:'true'},
{name:'5', email:'Category 1', start:'21/01/2001', salary:'2222', active:'true'},
{name:'6', email:'Category 1', start:'21/01/2001', salary:'2222', active:'true'}]
}";
?>
JS like this (better look at link)


var proxy = new Ext.data.HttpProxy({
url: 'emp.php',
method: 'post'
});

var dstore = new Ext.data.JsonStore({
url: 'emp.php',
proxy: proxy,
fields: Employee,
totalProperty: 6,
root: 'emp'
});
var grid = new Ext.grid.GridPanel({
store: dstore,
width: 600,
region:'center',
margins: '0 5 5 5',
autoExpandColumn: 'name',
plugins: [editor],
view: new Ext.grid.GroupingView({
markDirty: false
}),
tbar: [{
iconCls: 'icon-user-add',
text: '???????? ??????????',
handler: function(){
var e = new Employee({
name: 'New Guy',
email: '[email protected]',
start: (new Date()).clearTime(),
salary: 50000,
active: true
});
editor.stopEditing();
store.insert(0, e);
grid.getView().refresh();
grid.getSelectionModel().selectRow(0);
editor.startEditing(0);
}
},{
ref: '../removeBtn',
iconCls: 'icon-user-delete',
text: '??????? ??????????',
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: 'name',
header: '???',
dataIndex: 'name',
width: 220,
sortable: true,
editor: {
xtype: 'textfield',
allowBlank: false
}
},{
header: '???????',
dataIndex: 'email',
width: 150,
sortable: true,
editor: {
xtype: 'textfield',
allowBlank: false,
vtype: 'email'
}
},{
xtype: 'datecolumn',
header: 'Start Date',
dataIndex: 'start',
format: 'm/d/Y',
width: 100,
sortable: true,
groupRenderer: Ext.util.Format.dateRenderer('M y'),
editor: {
xtype: 'datefield',
allowBlank: false,
minValue: '01/01/2006',
minText: 'Can\'t have a start date before the company existed!',
maxValue: (new Date()).format('m/d/Y')
}
},{
xtype: 'numbercolumn',
header: '????????',
dataIndex: 'salary',
format: '$0,0.00',
width: 100,
sortable: true,
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 1,
maxValue: 150000
}
},{
xtype: 'booleancolumn',
header: '???????',
dataIndex: 'active',
align: 'center',
width: 50,
trueText: 'Yes',
falseText: 'No',
editor: {
xtype: 'checkbox'
}
}]
});
Where i have mistake?
Help please.

Animal
2 Jul 2010, 6:52 AM
http://www.sencha.com/deploy/dev/docs/?class=Ext.data.JsonReader&member=root

Plus where's your definition of Employee?

0dd_b1t
2 Jul 2010, 7:13 AM
var Employee = Ext.data.Record.create([{
name: 'name',
type: 'string'
}, {
name: 'email',
type: 'string'
}, {
name: 'start',
type: 'date',
dateFormat: 'n/j/Y'
},{
name: 'salary',
type: 'float'
},{
name: 'active',
type: 'bool'
}]);

i forgot to write it too.

Jsonreader object required for for jsonstore?

carol.ext
2 Jul 2010, 9:18 AM
What kind of error are you getting? You are using a grouping view, but not using a grouping store.

GroupingView API (http://www.sencha.com/deploy/dev/docs/?class=Ext.grid.GroupingView?class=Ext.grid.GroupingView)

0dd_b1t
2 Jul 2010, 12:06 PM
THX - fix it! But I still have a problem. Problem at json data which still not parsing at grid.

PHP

<?php
echo '{"emp":[{"name":"1", "email":"Category 1", "start":"21/01/2001", "salary":"2222", "active":"true"},
{"name":"2", "email":"Category 1", "start":"21/01/2001", "salary":"2222", "active":"true"},
{"name":"3", "email":"Category 1", "start":"21/01/2001", "salary":"2222", "active":"true"},
{"name":"4", "email":"Category 1", "start":"21/01/2001", "salary":"2222", "active":"true"},
{"name":"5", "email":"Category 1", "start":"21/01/2001", "salary":"2222", "active":"true"},
{"name":"6", "email":"Category 1", "start":"21/01/2001", "salary":"2222", "active":"true"}]
}';
?>


JS

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

var Employee = Ext.data.Record.create([{
name: 'name',
type: 'string'
}, {
name: 'email',
type: 'string'
}, {
name: 'start',
type: 'date',
dateFormat: 'n/j/Y'
},{
name: 'salary',
type: 'float'
},{
name: 'active',
type: 'bool'
}]);

var proxy1 = new Ext.data.HttpProxy({
url: 'emp2.php',
method: 'POST'
});

var store4 = new Ext.data.GroupingStore({
proxy: proxy1,
reader: new Ext.data.JsonReader({root: 'emp',totalProperty: 5, id: 'name'},[{name: 'name'},
{name: 'email'},
{name: 'start'},
{name: 'salary'},
{name: 'active'}]),
root: 'emp',
sortInfo: {field: 'start', direction: 'ASC'}
});

var editor = new Ext.ux.grid.RowEditor({
saveText: '????????'
});

var grid = new Ext.grid.GridPanel({
store: store4,
width: 600,
region:'center',
margins: '0 5 5 5',
autoExpandColumn: 'name',
plugins: [editor],
view: new Ext.grid.GroupingView({
markDirty: false
}),
tbar: [{
iconCls: 'icon-user-add',
text: '???????? ??????????',
handler: function(){
var e = new Employee({
name: 'New Guy',
email: '[email protected]',
start: (new Date()).clearTime(),
salary: 50000,
active: true
});
editor.stopEditing();
store4.insert(0, e);
grid.getView().refresh();
grid.getSelectionModel().selectRow(0);
editor.startEditing(0);
}
},{
ref: '../removeBtn',
iconCls: 'icon-user-delete',
text: '??????? ??????????',
disabled: true,
handler: function(){
editor.stopEditing();
var s = grid.getSelectionModel().getSelections();
for(var i = 0, r; r = s[i]; i++){
store4.remove(r);
}
}
}],

columns: [
new Ext.grid.RowNumberer(),
{
id: 'name',
header: '???',
dataIndex: 'name',
width: 220,
sortable: true,
editor: {
xtype: 'textfield',
allowBlank: false
}
},{
header: '???????',
dataIndex: 'email',
width: 150,
sortable: true,
editor: {
xtype: 'textfield',
allowBlank: false,
vtype: 'email'
}
},{
xtype: 'datecolumn',
header: 'Start Date',
dataIndex: 'start',
format: 'm/d/Y',
width: 100,
sortable: true,
groupRenderer: Ext.util.Format.dateRenderer('M y'),
editor: {
xtype: 'datefield',
allowBlank: false,
minValue: '01/01/2006',
minText: 'Can\'t have a start date before the company existed!',
maxValue: (new Date()).format('m/d/Y')
}
},{
xtype: 'numbercolumn',
header: '????????',
dataIndex: 'salary',
format: '$0,0.00',
width: 100,
sortable: true,
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 1,
maxValue: 150000
}
},{
xtype: 'booleancolumn',
header: '???????',
dataIndex: 'active',
align: 'center',
width: 50,
trueText: 'Yes',
falseText: 'No',
editor: {
xtype: 'checkbox'
}
}]
});

//Ext.Msg.alert('Hello this is the title', store4.getCount());

var layout = new Ext.Panel({
title: '?????? ??????????? ??????',
layout: 'border',
layoutConfig: {
columns: 1
},
width:720,
height: 600,
items: [grid]
});
layout.render(Ext.get('editor-grid'));

grid.getSelectionModel().on('selectionchange', function(sm){
grid.removeBtn.setDisabled(sm.getCount() < 1);
});



});


Link - http://acc.spbstu.ru/editE2.php

Where i have mistake?

0dd_b1t
2 Jul 2010, 12:07 PM
What kind of error are you getting? You are using a grouping view, but not using a grouping store.

GroupingView API (http://www.sencha.com/deploy/dev/docs/?class=Ext.grid.GroupingView?class=Ext.grid.GroupingView)
THX - fix it! But I still have a problem. Problem at json data which still not parsing at grid.

PHP

<?php
echo '{"emp":[{"name":"1", "email":"Category 1", "start":"21/01/2001", "salary":"2222", "active":"true"},
{"name":"2", "email":"Category 1", "start":"21/01/2001", "salary":"2222", "active":"true"},
{"name":"3", "email":"Category 1", "start":"21/01/2001", "salary":"2222", "active":"true"},
{"name":"4", "email":"Category 1", "start":"21/01/2001", "salary":"2222", "active":"true"},
{"name":"5", "email":"Category 1", "start":"21/01/2001", "salary":"2222", "active":"true"},
{"name":"6", "email":"Category 1", "start":"21/01/2001", "salary":"2222", "active":"true"}]
}';
?>


JS

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

var Employee = Ext.data.Record.create([{
name: 'name',
type: 'string'
}, {
name: 'email',
type: 'string'
}, {
name: 'start',
type: 'date',
dateFormat: 'n/j/Y'
},{
name: 'salary',
type: 'float'
},{
name: 'active',
type: 'bool'
}]);

var proxy1 = new Ext.data.HttpProxy({
url: 'emp2.php',
method: 'POST'
});

var store4 = new Ext.data.GroupingStore({
proxy: proxy1,
reader: new Ext.data.JsonReader({root: 'emp',totalProperty: 5, id: 'name'},[{name: 'name'},
{name: 'email'},
{name: 'start'},
{name: 'salary'},
{name: 'active'}]),
root: 'emp',
sortInfo: {field: 'start', direction: 'ASC'}
});

var editor = new Ext.ux.grid.RowEditor({
saveText: '????????'
});

var grid = new Ext.grid.GridPanel({
store: store4,
width: 600,
region:'center',
margins: '0 5 5 5',
autoExpandColumn: 'name',
plugins: [editor],
view: new Ext.grid.GroupingView({
markDirty: false
}),
tbar: [{
iconCls: 'icon-user-add',
text: '???????? ??????????',
handler: function(){
var e = new Employee({
name: 'New Guy',
email: '[email protected]',
start: (new Date()).clearTime(),
salary: 50000,
active: true
});
editor.stopEditing();
store4.insert(0, e);
grid.getView().refresh();
grid.getSelectionModel().selectRow(0);
editor.startEditing(0);
}
},{
ref: '../removeBtn',
iconCls: 'icon-user-delete',
text: '??????? ??????????',
disabled: true,
handler: function(){
editor.stopEditing();
var s = grid.getSelectionModel().getSelections();
for(var i = 0, r; r = s[i]; i++){
store4.remove(r);
}
}
}],

columns: [
new Ext.grid.RowNumberer(),
{
id: 'name',
header: '???',
dataIndex: 'name',
width: 220,
sortable: true,
editor: {
xtype: 'textfield',
allowBlank: false
}
},{
header: '???????',
dataIndex: 'email',
width: 150,
sortable: true,
editor: {
xtype: 'textfield',
allowBlank: false,
vtype: 'email'
}
},{
xtype: 'datecolumn',
header: 'Start Date',
dataIndex: 'start',
format: 'm/d/Y',
width: 100,
sortable: true,
groupRenderer: Ext.util.Format.dateRenderer('M y'),
editor: {
xtype: 'datefield',
allowBlank: false,
minValue: '01/01/2006',
minText: 'Can\'t have a start date before the company existed!',
maxValue: (new Date()).format('m/d/Y')
}
},{
xtype: 'numbercolumn',
header: '????????',
dataIndex: 'salary',
format: '$0,0.00',
width: 100,
sortable: true,
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 1,
maxValue: 150000
}
},{
xtype: 'booleancolumn',
header: '???????',
dataIndex: 'active',
align: 'center',
width: 50,
trueText: 'Yes',
falseText: 'No',
editor: {
xtype: 'checkbox'
}
}]
});

//Ext.Msg.alert('Hello this is the title', store4.getCount());

var layout = new Ext.Panel({
title: '?????? ??????????? ??????',
layout: 'border',
layoutConfig: {
columns: 1
},
width:720,
height: 600,
items: [grid]
});
layout.render(Ext.get('editor-grid'));

grid.getSelectionModel().on('selectionchange', function(sm){
grid.removeBtn.setDisabled(sm.getCount() < 1);
});



});


Link - http://acc.spbstu.ru/editE2.php

Where i have mistake?

0dd_b1t
2 Jul 2010, 1:20 PM
THX - fix it! But I still have a problem. Problem at json data which still not parsing at grid.

PHP

<?php
echo '{"emp":[{"name":"1", "email":"Category 1", "start":"21/01/2001", "salary":"2222", "active":"true"},
{"name":"2", "email":"Category 1", "start":"21/01/2001", "salary":"2222", "active":"true"},
{"name":"3", "email":"Category 1", "start":"21/01/2001", "salary":"2222", "active":"true"},
{"name":"4", "email":"Category 1", "start":"21/01/2001", "salary":"2222", "active":"true"},
{"name":"5", "email":"Category 1", "start":"21/01/2001", "salary":"2222", "active":"true"},
{"name":"6", "email":"Category 1", "start":"21/01/2001", "salary":"2222", "active":"true"}]
}';
?>


JS

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

var Employee = Ext.data.Record.create([{
name: 'name',
type: 'string'
}, {
name: 'email',
type: 'string'
}, {
name: 'start',
type: 'date',
dateFormat: 'n/j/Y'
},{
name: 'salary',
type: 'float'
},{
name: 'active',
type: 'bool'
}]);

var proxy1 = new Ext.data.HttpProxy({
url: 'emp2.php',
method: 'POST'
});

var store4 = new Ext.data.GroupingStore({
proxy: proxy1,
reader: new Ext.data.JsonReader({root: 'emp',totalProperty: 5, id: 'name'},[{name: 'name'},
{name: 'email'},
{name: 'start'},
{name: 'salary'},
{name: 'active'}]),
root: 'emp',
sortInfo: {field: 'start', direction: 'ASC'}
});

var editor = new Ext.ux.grid.RowEditor({
saveText: '????????'
});

var grid = new Ext.grid.GridPanel({
store: store4,
width: 600,
region:'center',
margins: '0 5 5 5',
autoExpandColumn: 'name',
plugins: [editor],
view: new Ext.grid.GroupingView({
markDirty: false
}),
tbar: [{
iconCls: 'icon-user-add',
text: '???????? ??????????',
handler: function(){
var e = new Employee({
name: 'New Guy',
email: '[email protected]',
start: (new Date()).clearTime(),
salary: 50000,
active: true
});
editor.stopEditing();
store4.insert(0, e);
grid.getView().refresh();
grid.getSelectionModel().selectRow(0);
editor.startEditing(0);
}
},{
ref: '../removeBtn',
iconCls: 'icon-user-delete',
text: '??????? ??????????',
disabled: true,
handler: function(){
editor.stopEditing();
var s = grid.getSelectionModel().getSelections();
for(var i = 0, r; r = s[i]; i++){
store4.remove(r);
}
}
}],

columns: [
new Ext.grid.RowNumberer(),
{
id: 'name',
header: '???',
dataIndex: 'name',
width: 220,
sortable: true,
editor: {
xtype: 'textfield',
allowBlank: false
}
},{
header: '???????',
dataIndex: 'email',
width: 150,
sortable: true,
editor: {
xtype: 'textfield',
allowBlank: false,
vtype: 'email'
}
},{
xtype: 'datecolumn',
header: 'Start Date',
dataIndex: 'start',
format: 'm/d/Y',
width: 100,
sortable: true,
groupRenderer: Ext.util.Format.dateRenderer('M y'),
editor: {
xtype: 'datefield',
allowBlank: false,
minValue: '01/01/2006',
minText: 'Can\'t have a start date before the company existed!',
maxValue: (new Date()).format('m/d/Y')
}
},{
xtype: 'numbercolumn',
header: '????????',
dataIndex: 'salary',
format: '$0,0.00',
width: 100,
sortable: true,
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 1,
maxValue: 150000
}
},{
xtype: 'booleancolumn',
header: '???????',
dataIndex: 'active',
align: 'center',
width: 50,
trueText: 'Yes',
falseText: 'No',
editor: {
xtype: 'checkbox'
}
}]
});

//Ext.Msg.alert('Hello this is the title', store4.getCount());

var layout = new Ext.Panel({
title: '?????? ??????????? ??????',
layout: 'border',
layoutConfig: {
columns: 1
},
width:720,
height: 600,
items: [grid]
});
layout.render(Ext.get('editor-grid'));

grid.getSelectionModel().on('selectionchange', function(sm){
grid.removeBtn.setDisabled(sm.getCount() < 1);
});

});


Link - http://acc.spbstu.ru/editE2.php

Where i have mistake?

0dd_b1t
3 Jul 2010, 12:01 AM
Thx - fix it, but grid still not work(data not loaded).

PHP

<?php
echo '{"emp":[{"name":"1", "email":"Category 1", "start":"21/01/2001", "salary":"2222", "active":"true"},
{"name":"2", "email":"Category 1", "start":"21/01/2001", "salary":"2222", "active":"true"},
{"name":"3", "email":"Category 1", "start":"21/01/2001", "salary":"2222", "active":"true"},
{"name":"4", "email":"Category 1", "start":"21/01/2001", "salary":"2222", "active":"true"},
{"name":"5", "email":"Category 1", "start":"21/01/2001", "salary":"2222", "active":"true"},
{"name":"6", "email":"Category 1", "start":"21/01/2001", "salary":"2222", "active":"true"}]
}';
?>

JS

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

var Employee = Ext.data.Record.create([{
name: 'name',
type: 'string'
}, {
name: 'email',
type: 'string'
}, {
name: 'start',
type: 'date',
dateFormat: 'n/j/Y'
},{
name: 'salary',
type: 'float'
},{
name: 'active',
type: 'bool'
}]);

var proxy1 = new Ext.data.HttpProxy({
url: 'emp2.php',
method: 'POST'
});

var store4 = new Ext.data.GroupingStore({
proxy: proxy1,
reader: new Ext.data.JsonReader({root: 'emp',totalProperty: 5, id: 'name'},[{name: 'name'},
{name: 'email'},
{name: 'start'},
{name: 'salary'},
{name: 'active'}]),
root: 'emp',
sortInfo: {field: 'start', direction: 'ASC'}
});

var editor = new Ext.ux.grid.RowEditor({
saveText: '????????'
});

var grid = new Ext.grid.GridPanel({
store: store4,
width: 600,
region:'center',
margins: '0 5 5 5',
autoExpandColumn: 'name',
plugins: [editor],
view: new Ext.grid.GroupingView({
markDirty: false
}),
tbar: [{
iconCls: 'icon-user-add',
text: '???????? ??????????',
handler: function(){
var e = new Employee({
name: 'New Guy',
email: '[email protected]',
start: (new Date()).clearTime(),
salary: 50000,
active: true
});
editor.stopEditing();
store4.insert(0, e);
grid.getView().refresh();
grid.getSelectionModel().selectRow(0);
editor.startEditing(0);
}
},{
ref: '../removeBtn',
iconCls: 'icon-user-delete',
text: '??????? ??????????',
disabled: true,
handler: function(){
editor.stopEditing();
var s = grid.getSelectionModel().getSelections();
for(var i = 0, r; r = s[i]; i++){
store4.remove(r);
}
}
}],

columns: [
new Ext.grid.RowNumberer(),
{
id: 'name',
header: '???',
dataIndex: 'name',
width: 220,
sortable: true,
editor: {
xtype: 'textfield',
allowBlank: false
}
},{
header: '???????',
dataIndex: 'email',
width: 150,
sortable: true,
editor: {
xtype: 'textfield',
allowBlank: false,
vtype: 'email'
}
},{
xtype: 'datecolumn',
header: 'Start Date',
dataIndex: 'start',
format: 'm/d/Y',
width: 100,
sortable: true,
groupRenderer: Ext.util.Format.dateRenderer('M y'),
editor: {
xtype: 'datefield',
allowBlank: false,
minValue: '01/01/2006',
minText: 'Can\'t have a start date before the company existed!',
maxValue: (new Date()).format('m/d/Y')
}
},{
xtype: 'numbercolumn',
header: '????????',
dataIndex: 'salary',
format: '$0,0.00',
width: 100,
sortable: true,
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 1,
maxValue: 150000
}
},{
xtype: 'booleancolumn',
header: '???????',
dataIndex: 'active',
align: 'center',
width: 50,
trueText: 'Yes',
falseText: 'No',
editor: {
xtype: 'checkbox'
}
}]
});

var layout = new Ext.Panel({
title: '?????? ??????????? ??????',
layout: 'border',
layoutConfig: {
columns: 1
},
width:720,
height: 600,
items: [grid]
});
layout.render(Ext.get('editor-grid'));

grid.getSelectionModel().on('selectionchange', function(sm){
grid.removeBtn.setDisabled(sm.getCount() < 1);
});
});

Animal
3 Jul 2010, 12:05 AM
Debug it.

First, is the Store loaded? You can examine it in debug.

0dd_b1t
3 Jul 2010, 12:14 AM
Here it is - http://acc.spbstu.ru/editE2.php
I trying to understand - loaded store or not, but cant do it.
How i may to know (debug it) what in my Store now?

Animal
3 Jul 2010, 2:45 AM
Firebug.

0dd_b1t
3 Jul 2010, 3:41 AM
How I can look at store4(GroupingStore) and look what json data loaded to it with firebug extension?
Thx!

dduffy
3 Jul 2010, 4:33 AM
Using Firebug there is an option called "NET" where you can see Headers | Post | Response | JSON see my attached screen shot.

21252

Plus, in your actually issue, have you loaded / Told your program to load the JSON store?

Darragh.

0dd_b1t
3 Jul 2010, 5:00 AM
You my hero =)
I mistook for server path to Json file and now it working fine.
Thanks for firebug hint - i don't know about it.
Thanks to you all: dduffy (http://www.sencha.com/forum/member.php?120519-dduffy)[/URL], (http://www.sencha.com/forum/member.php?120519-dduffy)Animal (http://www.sencha.com/forum/member.php?10-Animal) and carol.ext (http://www.sencha.com/forum/member.php?5637-carol.ext)!
[URL="http://www.sencha.com/forum/member.php?10-Animal"]