Hello, I'm trying to implement a grid from Ext Js 4.
I have index.php, which is the main page that has the main html (<html><head></head><body></body></html>)
and a div inside the body. everything on my application is displayed inside that 1 div. in other words I'm using OOP PHP and Ajax.
I have a menu on my main page and when I click on a specific option I want the grid to appear in the div (<div id="layer1" name="layer1"></div>)
all the examples for Extjs grid use a different html file where u add those line:
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="extjs/examples/shared/example.css" />
<link rel="stylesheet" type="text/css" href="extjs/examples/restful/restful.css" />
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="extjs/examples/shared/examples.js"></script>
<script type="text/javascript" src="extjs/examples/restful/restful.js"></script>
and the grid is appended to the body by the restful.js.
this doesn't work for me..since in my case the grid would appear on the screen regardless of what option I choose from the menu (because the html page isn't refreshed each time).
I'm trying to change the restful.JS so that it won't run onReady() as it does now, but when I call the function that is now running onReady. I'm doing something wrong because it doesn't work..
on my index.php I added those 6 lines of code as above to the <head>, and I changed the restful.js code from
Ext.onReady(function(){
.....
to
Ext.onReady(start_users(););
function start_users() {
....
and also another change was in the part where it says where to add the grid- from
renderTo: document.body,
to
renderTo: document.body.layer1,
when I run this I don't see the grid. checking the scripts in the inspect elements in Chrome, it says start_users() is undefined. not sure I'm doing this right, but if onReady the code ran, and all I did is to put the same code inside another function and now onReady calls THAT function, how come it doesn't run!?
full restful.js code: (after my changes)
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(start_users(););
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.layer1,
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);
});
};