This is my view page
Code:
<html> <head> <title>Codeigniter & Extjs </title> <Link rel="stylesheet" type="text/css" href=" <?php echo base_url();?>/ext/resources/css/ext-all.css"> <script type="text/javascript" src="<?=base_url()?>/ext/ext-all-debug.js"> </script> <head> <body> <script type="text/javascript">
Ext.define('Person', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'int',
useNull: true
}, 'first', 'last', 'age'],
validations: [{
type: 'length',
field: 'first',
min: 1
}, {
type: 'length',
field: 'last',
min: 1
}, {
type: 'length',
field: 'age',
min: 1
}]
});
var store = Ext.create('Ext.data.Store', {
model: 'Person',
proxy: {
type: 'ajax',
url: '<?=base_url()?>index.php/welcome/get',
reader: {
type: 'json',
rootProperty: 'data'
},
}
});
var grid = Ext.create('Ext.grid.Panel', {
renderTo: document.body,
width: 500,
height: 330,
frame: true,
title: 'User Info',
store: store,
//iconCls: 'icon-user',
columns: [ {
text: 'First Name',
flex: 1,
sortable: true,
dataIndex: 'first',
field: {
xtype: 'textfield'
}
}, {
header: 'Last Name',
width: 120,
sortable: true,
dataIndex: 'first',
field: {
xtype: 'textfield'
}
}, {
text: 'Age',
width: 120,
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);
});
</script> <body> </html>
Comment