PDA

View Full Version : Implementing a grid (restful example)



asdasd9
22 Jul 2012, 10:40 AM
Hi, just got ext js4 and trying to implement the grid 'restful' from the examples.<br><br>the grid is created by the restful.js, ext.onReady creates it and appends it to the body.<br><br>so, I'm trying to move all the code that was called on Ext.onReady() to another function and try and call that function on the Ext.onReady event (I'm using onReady just to see if it works)<br><br>so I made few changes in the code and the grid isn't displayed now!!

original code:

Ext.require(['Ext.data.*', 'Ext.grid.*']);

Ext.define('Person', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'int',
useNull: true
},{
name: 'R',
type: 'int',
useNull: true
}, 'email', 'first', 'last'],
validations: [{
type: 'length',
field: 'email',
min: 1
}, {
type: 'length',
field: 'first',
min: 1
}, {
type: 'length',
field: 'last',
min: 1
}]
});


Ext.onReady(function(){


var store = Ext.create('Ext.data.Store', {
autoLoad: true,
autoSync: true,
model: 'Person',
proxy: {
type: 'rest',
url: 'app.php/users',
reader: {
type: 'json',
root: 'data'
},
writer: {
type: 'json'
}
},
listeners: {
write: function(store, operation){
var record = operation.getRecords()[0],
name = Ext.String.capitalize(operation.action),
verb;




if (name == 'Destroy') {
record = operation.records[0];
verb = 'Destroyed';
} else {
verb = name + 'd';
}
Ext.example.msg(name, Ext.String.format("{0} user: {1}", verb, record.getId()));


}
}
});


var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');


var grid = Ext.create('Ext.grid.Panel', {
renderTo: document.body,
plugins: [rowEditing],
width: 400,
height: 300,
frame: true,
title: 'Users',
store: store,
iconCls: 'icon-user',
columns: [{
text: 'ID',
width: 40,
sortable: true,
dataIndex: 'id'
}, {
text: 'R',
flex: 1,
sortable: true,
dataIndex: 'R',
field: {
xtype: 'textfield'
}
},{
text: 'Email',
flex: 1,
sortable: true,
dataIndex: 'email',
field: {
xtype: 'textfield'
}
}, {
header: 'First',
width: 80,
sortable: true,
dataIndex: 'first',
field: {
xtype: 'textfield'
}
}, {
text: 'Last',
width: 80,
sortable: true,
dataIndex: 'last',
field: {
xtype: 'textfield'
}
}],
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Add',
iconCls: 'icon-add',
handler: function(){
// empty record
store.insert(0, new Person());
rowEditing.startEdit(0, 0);
}
}, '-', {
itemId: 'delete',
text: 'Delete',
iconCls: 'icon-delete',
disabled: true,
handler: function(){
var selection = grid.getView().getSelectionModel().getSelection()[0];
if (selection) {
store.remove(selection);
}
}
}]
}]
});
grid.getSelectionModel().on('selectionchange', function(selModel, selections){
grid.down('#delete').setDisabled(selections.length === 0);
});
});





new code:
Ext.require(['Ext.data.*', 'Ext.grid.*']);


Ext.define('Person', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'int',
useNull: true
},{
name: 'R',
type: 'int',
useNull: true
}, 'email', 'first', 'last'],
validations: [{
type: 'length',
field: 'email',
min: 1
}, {
type: 'length',
field: 'first',
min: 1
}, {
type: 'length',
field: 'last',
min: 1
}]
});


function start_users() {


var store = Ext.create('Ext.data.Store', {
autoLoad: true,
autoSync: true,
model: 'Person',
proxy: {
type: 'rest',
url: 'app.php/users',
reader: {
type: 'json',
root: 'data'
},
writer: {
type: 'json'
}
},
listeners: {
write: function(store, operation){
var record = operation.getRecords()[0],
name = Ext.String.capitalize(operation.action),
verb;




if (name == 'Destroy') {
record = operation.records[0];
verb = 'Destroyed';
} else {
verb = name + 'd';
}
Ext.example.msg(name, Ext.String.format("{0} user: {1}", verb, record.getId()));


}
}
});


var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');


var grid = Ext.create('Ext.grid.Panel', {
renderTo: document.body,
plugins: [rowEditing],
width: 400,
height: 300,
frame: true,
title: 'Users',
store: store,
iconCls: 'icon-user',
columns: [{
text: 'ID',
width: 40,
sortable: true,
dataIndex: 'id'
}, {
text: 'R',
flex: 1,
sortable: true,
dataIndex: 'R',
field: {
xtype: 'textfield'
}
},{
text: 'Email',
flex: 1,
sortable: true,
dataIndex: 'email',
field: {
xtype: 'textfield'
}
}, {
header: 'First',
width: 80,
sortable: true,
dataIndex: 'first',
field: {
xtype: 'textfield'
}
}, {
text: 'Last',
width: 80,
sortable: true,
dataIndex: 'last',
field: {
xtype: 'textfield'
}
}],
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Add',
iconCls: 'icon-add',
handler: function(){
// empty record
store.insert(0, new Person());
rowEditing.startEdit(0, 0);
}
}, '-', {
itemId: 'delete',
text: 'Delete',
iconCls: 'icon-delete',
disabled: true,
handler: function(){
var selection = grid.getView().getSelectionModel().getSelection()[0];
if (selection) {
store.remove(selection);
}
}
}]
}]
});
grid.getSelectionModel().on('selectionchange', function(selModel, selections){
grid.down('#delete').setDisabled(selections.length === 0);
});
}
Ext.onReady(start_users())






red text- changes I made.
the only reason I could come up with for why it doesn't work is that maybe the function doesn't know what Ext now? not sure how to send it as param to the functiong, or even if that's the problem, because when I call start_users() from the Chrome's Inspect Elements (after the page loads without the grid) the grid shows up..

any suggestion would be appreciated.