PDA

View Full Version : Putting EditorGrid inside the window



poly.xtian
6 Oct 2010, 7:15 PM
Hi Experts,

Im not sure if this is the exact place to post and ask for help.
Im a newbie, and as a learner i need help from you guys. Can you help me to transfer this editorgridpanel with toolbar inside a window?

mainscript.js

var InhabitantsDataStore;
var InhabitantsColumnModel;
var InhabitantsListingEditorGrid;
var InhabitantsListingWindow;

Ext.onReady(function(){

Ext.QuickTips.init();

function saveTheInhabitant(oGrid_event){
Ext.Ajax.request({
waitMsg: 'Please wait...',
url: 'database.php',
params: {
task: "UPDATEINHAB",
inhabitant_id: oGrid_event.record.data.inhabitant_id,
FirstName: oGrid_event.record.data.FirstName,
LastName: oGrid_event.record.data.LastName,
CivilstatusName: oGrid_event.record.data.CivilstatusName,
Birthday: oGrid_event.record.data.Birthday.format('Y-m-d'),
Modified_date: oGrid_event.record.data.Modified_date.format('Y-m-d'),
Income: oGrid_event.record.data.Income
},
success: function(response){
var result=eval(response.responseText);
switch(result){
case 1:
InhabitantsDataStore.commitChanges();
InhabitantsDataStore.reload();
break;
default:
Ext.MessageBox.alert('Uh uh...','We couldn\'t save him...');
break;
}
},
failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('error','could not connect to the database. retry later');
}
});
}

InhabitantsDataStore = new Ext.data.Store({
id: 'InhabitantsDataStore',
proxy: new Ext.data.HttpProxy({
url: 'database.php',
method: 'POST'
}),
baseParams:{task: "LISTING"}, // this parameter is passed for any HTTP request
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'id'
},[
{name: 'inhabitant_id', type: 'int', mapping: 'inhabitant_id'},
{name: 'FirstName', type: 'string', mapping: 'firstname'},
{name: 'LastName', type: 'string', mapping: 'lastname'},
{name: 'civilstatus_id', type: 'int', mapping: 'civilstatus_id'},
{name: 'CivilstatusName', type: 'string', mapping: 'name'},
{name: 'Birthday', type: 'date', mapping: 'birthday'},
{name: 'Modified_date', type: 'date', mapping: 'modified_date'},
{name: 'Income', type: 'float', mapping: 'income'}
]),
sortInfo:{field: 'inhabitant_id', direction: "ASC"}
});

InhabitantsColumnModel = new Ext.grid.ColumnModel(
[{
header: '#',
readOnly: true,
dataIndex: 'inhabitant_id',
width: 40,
hidden: false
},{
header: 'First Name',
dataIndex: 'FirstName',
width: 60,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 20,
maskRe: /([a-zA-Z0-9\s]+)$/
})
},{
header: 'Last Name',
dataIndex: 'LastName',
width: 80,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 20,
maskRe: /([a-zA-Z0-9\s]+)$/
})
},{
header: 'ID Civil Status',
readOnly: true,
dataIndex: 'civilstatus_id',
width: 50,
hidden: true
},{
header: 'Civil Status',
dataIndex: 'CivilstatusName',
width: 150,
editor: new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
store:new Ext.data.SimpleStore({
fields:['civilstatusValue', 'civilstatusName'],
data: [['1','Student'],['2','Housewife'],['3','Teacher'],['4','Proprietor'],['5','Nurse'],['6','Driver']]
}),
mode: 'local',
displayField: 'civilstatusName',
valueField: 'civilstatusValue',
lazyRender:true,
listClass: 'x-combo-list-small'
})
},{
header: 'Took Office',
dataIndex: 'Birthday',
width: 80,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
editor: new Ext.form.DateField({
format: 'm/d/Y'
}),
hidden: false
},{
header: 'Left Office',
dataIndex: 'Modified_date',
width: 80,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
editor: new Ext.form.DateField({
format: 'm/d/Y'
}),
hidden: false
},{
header: "Income",
dataIndex: 'Income',
width: 100,
renderer: function(v){ return '$ ' + v; },
editor: new Ext.form.NumberField({
allowBlank: false,
allowDecimals: true,
allowNegative: false,
blankText: '0',
maxLength: 11
})
}]
);
InhabitantsColumnModel.defaultSortable= true;

InhabitantsListingEditorGrid = new Ext.grid.EditorGridPanel({
id: 'InhabitantsListingEditorGrid',
store: InhabitantsDataStore,
cm: InhabitantsColumnModel,
enableColLock:false,
clicksToEdit:1,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false})
});

InhabitantsListingWindow = new Ext.Window({
id: 'InhabitantsListingWindow',
title: 'The Presidents of the USA',
closable:true,
width:700,
height:350,
plain:true,
layout: 'fit',
items: InhabitantsListingEditorGrid
});

InhabitantsDataStore.load();
InhabitantsListingWindow.show();

InhabitantsListingEditorGrid.on('afteredit', saveTheInhabitant);

});