PDA

View Full Version : Numeric grid lines



Mycoding
27 Jun 2010, 5:18 AM
Please, give me advice how to make this.
There is grid. We can add line and delete line.
The first column is for number of line. After deleting it should to change number in lines.
Here is image after deleting
21126
Here is code


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

Ext.form.VTypes.numVal = /(^\d*$)/;
Ext.form.VTypes.numMask = /[0-9]/;
Ext.form.VTypes.numText = 'Here should be digits';
Ext.form.VTypes.num = function(v){
return Ext.form.VTypes.numVal.test(v);
};

var location = new Ext.data.SimpleStore({
fields: ['id', 'location'],
data : [['0','Location'],['1','Dining Room'],['2','Living Room'],['3','Family Room'],['4','Kitchen'],['5','Hall'],['6','Powder Room'],['7','Den/Office'],['8','Laundry'],['9','Closet'],['10','Stairs'],['11','Landing'],['12','Master Bedroom'],['13','Bedroom 1'],['14','Bedroom 2'],['15','Bedroom 3'],['16','Bedroom 4'],['17','Bedroom 5'],['18','Bedroom 6'],['19','En-Suite Bathroom'],['20','Bathroom 1'],['21','Bathroom 2'],['22','Bathroom 3'],['23','Bathroom 4'],['24','Loft'],['25','Basement'],['26','Basement Steel Frame'],['27','Cold Room'],['28','Garage'],['29','Other']]
});

function location_name(val){
return location.queryBy(function(rec){
return rec.data.id == val;
}).itemAt(0).data.location;
}

var location_edit = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
mode: 'local',
store: location,
displayField:'location',
valueField: 'id',
listeners: {
select: function(f,r,i){
if (i === 29){
Ext.Msg.prompt('Location','Name',Ext.emptyFn);
}
}
}
});

var width_edit = new Ext.form.TextField({
allowBlank: false,
maxLength: 45,
vtype:'num'
});

var height_edit = new Ext.form.TextField({
allowBlank: false,
maxLength: 45,
vtype:'num'
});

var ds_model = Ext.data.Record.create([
'id',
'location',
'width',
'height'
]);

var store = new Ext.data.Store({
data: [
[1,0,0,0]
],
reader: new Ext.data.ArrayReader({id:'id'}, [
'id',
'location',
'width',
'height'
])
});

var grid = new Ext.grid.EditorGridPanel({
renderTo: document.body,
frame:true,
title: 'Orders',
height:200,
width:700,
enableColumnMove: false,
clicksToEdit: 1,
store: store,
columns: [
{header: "#", dataIndex: 'id',width:30},
{header: "Location", dataIndex: 'location', renderer: location_name, editor: location_edit},
{header: "Width in inches", dataIndex: 'width', editor: width_edit},
{header: "Height in inches", dataIndex: 'height', editor: height_edit}
],
listeners: {
afteredit: function(e){
if (e.field == 'director' && e.value == 'Mel Gibson'){
Ext.Msg.alert('Error','Mel Gibson movies not allowed');
e.record.reject();
}else{
e.record.commit();
}
}
},
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
tbar: [{
text: 'Add Window',
icon: 'images/table_add.png',
cls: 'x-btn-text-icon',
handler: function() {
var numOfWindows=grid.getStore().getCount()+1;
grid.getStore().insert(grid.getStore().getCount(), new ds_model({id:numOfWindows,location:0,width:0,height:0}));
grid.startEditing(grid.getStore().getCount()-1,0);
}
},{
text: 'Delete',
icon: 'images/table_delete.png',
cls: 'x-btn-text-icon',
handler: function() {
var sm = grid.getSelectionModel();
var sel = sm.getSelected();
if (sm.hasSelection()){
Ext.Msg.show({
title: 'Remove Movie',
buttons: Ext.MessageBox.YESNOCANCEL,
msg: 'Remove '+sel.data.id+'?',
fn: function(btn){
if (btn == 'yes'){
grid.getStore().remove(sel);
}
}
});
}
}
}]
});

});

mystix
27 Jun 2010, 6:15 AM
http://extjs.cachefly.net/ext-3.2.1/docs/?class=Ext.grid.GridView&member=refresh

Mycoding
27 Jun 2010, 6:32 AM
Not refresh.
As far as I understand it should be changed?
I tried to do for example like this
grid.getStore().getAt(1).get('id')=10;
But that doesn't work.

mankz
27 Jun 2010, 7:07 AM
grid.getStore().getAt(1).set('id', 10);

Mycoding
27 Jun 2010, 7:16 AM
Actually, I don't know English well.
I didn't unstend how to refresh.
'Why bother with subroutines when you can type fast?'
That is required in my work.

Mycoding
27 Jun 2010, 7:20 AM
That works.
Thanks a lot.

grid.getView().refresh();