PDA

View Full Version : Not usual grid



Mycoding
28 Jun 2010, 4:11 AM
Please, give me advice.
I need to do grid with rows like this:
In column window type there is button and default invisilbe place for image.
When we click on this button shows window with different type of window.
We choose needed and in place of grid appear our window.
Also that is needed to check in grid param if that is for example shape we will get in this line
additional 4 combobox.
At the moment I have this like.
21144





var win;
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 extcolor = new Ext.data.SimpleStore({
fields: ['id', 'extcolor'],
data : [['0','White'],['1','Cream'],['2','Hi Gloss Brown'],['3','Commercial Brown'],['4','Sandstone'],['5','Sable'],['6','Hickory'],['7','Grey']]
});

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

var extcolor_edit = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
mode: 'local',
store: extcolor,
displayField:'extcolor',
valueField: 'id'
});

var frame = new Ext.data.SimpleStore({
fields: ['id', 'frame'],
data : [['0','None'],['1','Full Frame Replacement'],['2','Retrofit into existing frame']]
});

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

var frame_edit = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
mode: 'local',
store: frame,
displayField:'frame',
valueField: 'id'
});

var options = new Ext.data.SimpleStore({
fields: ['id', 'options'],
data : [['0','No Options'],['1','Frosted']]
});

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

var options_edit = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
mode: 'local',
store: options,
displayField:'options',
valueField: 'id'
});

var windowtype = new Ext.data.SimpleStore({
fields: ['id', 'windowtype'],
data : [['0','White'],['1','Cream'],['2','Hi Gloss Brown'],['3','Commercial Brown'],['4','Sandstone'],['5','Sable'],['6','Hickory'],['7','Grey']]
});

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

var windowtype_edit = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
mode: 'local',
store: windowtype,
displayField:'windowtype',
valueField: 'id'
});

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','windowtype','extcolor','frame','options']);

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

var grid = new Ext.grid.EditorGridPanel({
renderTo: document.body,
frame:true,
collapsible: true,
title: 'Orders',
height:200,
width:700,
enableColumnMove: false,
clicksToEdit: 1,
store: store,
columns: [
//new Ext.grid.RowNumberer(),
new Ext.grid.RowNumberer({dataIndex: 'id',width: 30}),
//{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},
{header: "Window Type", dataIndex: 'windowtype', renderer: windowtype_name, editor: windowtype_edit,handler:function(){alert(1);}},
{header: "Ext. Colour", dataIndex: 'extcolor', renderer: extcolor_name, editor: extcolor_edit},
{header: "Frame", dataIndex: 'frame', renderer: frame_name, editor: frame_edit,width:150},
{header: "Options", dataIndex: 'options', renderer: options_name, editor: options_edit}
],
listeners: {
afteredit: function(e){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() {
//grid.getStore().getAt(1).get('id')=10;
//alert(grid.getStore().getAt(numOfWindows-1).get('location'));
var numOfWindows=grid.getStore().getCount(),
line=grid.getStore().getAt(numOfWindows-1);
if(line.get('location')==0|line.get('width')==0|line.get('height')==0|line.get('frame')==0){
Ext.Msg.alert('Info',"Please, fill in the current window options<br>'Location','Width','Height','Frame'");
}
else{
grid.getStore().insert(grid.getStore().getCount(), new ds_model({id:numOfWindows+1,location:0,width:0,height:0,windowtype:0,extcolor:0,frame:0,options:0}));
grid.startEditing(grid.getStore().getCount()-1,0);
}
}
},{
text: 'Delete',
icon: 'images/table_delete.png',
cls: 'x-btn-text-icon',
handler: function(){
if(grid.getStore().getCount()<2){Ext.Msg.alert('Info','There is only one line.')}
else{
var sm = grid.getSelectionModel(),
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'){
//alert(grid.getStore().getAt(1).get('id'));
//grid.getStore().getAt(1).get('id')=10;
grid.getStore().remove(sel);
grid.getView().refresh();
}
}
})
}
}
}
}]
});


function showWindows(){
function title_name(val, x, store){
return '<b>'+val+'</b><br>'+store.data.title;
}
function cover_image(val){return '<img src=images/windows/'+val+'>';}
var store = new Ext.data.Store({
data: [
[1,'Doble Hung','dh1.png'],
[2,'Single Hung','sh1.png'],
[3,'Casement','casement1.png'],
[4,'Awning','awning1.png'],
[5,'Fixed','fixed1.png'],
[6,'Double Slider','dst1.png'],
[7,'Single Slider','sst1.png'],
[8,'Fixed, Single Slider','sst3.png'],
[9,'Fixed, Double Slider','dst3.png'],
[10,'Awning, Fixed','awning2.png'],
[11,'Fixed, Awning','awning3.png'],
[12,'Fixed, Awning - Awning','awning8.png'],
[13,'Fixed, Fixed - Awning','awning9.png'],
[14,'Fixed - Fixed, Fixed - Awning','awning1.png'],
[15,'Fixed - Fixed, Awning - Awning','awning11.png'],
[16,'Fixed, Triple - Slider','sst7.png'],
[17,'2 Fixed, 2 Double Slider','dst4.png'],
[18,'2 Fixed, 2 Single Slider','sst4.png'],
[19,'Double Hung - Fixed','dh3.png'],
[20,'Single, Hung-Fixed','sh3.png'],
[21,'Fixed - Fixed','fixed2.png'],
[22,'Double Hung - Double Hung','dh2.png'],
[23,'3 Double Hung','dh4.png'],
[24,'Single Hung - Single Hung','sh2.png'],
[25,'3 Single Hungs','sh4.png'],
[26,'Single Hung - Fix - Single Hung','sh5.png'],
[27,'Fix - Single Hung - Fix','sh6.png'],
[28,'Double Hung - Fix - Double Hung','dh5.png'],
[29,'Fixed - Double Hung - Fixed','dh6.png'],
[30,'Fixed - Casement','casement4.png'],
[31,'Casement - Fixed - Casement','casement5.png'],
[32,'Fixed - Casement - Fixed','casement9.png'],
[33,'Casement - Fixed - Casement','casement7.png'],
[34,'Casement - Fixed - Casement','casement6.png'],
[35,'Casement - Casement','casement2.png'],
[36,'Fixed Single Slider','casement3.png'],
[37,'Fixed - Awning','awning5.png'],
[38,'Awning - Awning','awning4.png'],
[39,'Awning - Fixed - Awning','awning6.png'],
[40,'Fixed - Awning - Fixed','awning7.png'],
[41,'4 Panel Fixed Bow','bow_4.png']
],
reader: new Ext.data.ArrayReader({id:'id'}, ['id','title','coverthumb'])
});

var gridWindows = new Ext.grid.GridPanel({
renderTo: document.body,
frame:true,
height:300,
width:385,
store: store,
autoExpandColumn: 'title',
columns: [
{header: "Title", dataIndex: 'title', renderer: title_name, id: 'title',width:150, sortable: true},
{header: "Cover", dataIndex: 'coverthumb', renderer: cover_image,width:200}
]
});
if(!win){
win = new Ext.Window({
frame:true,
title:'Windows Type',
width:400,
height:400,
closeAction:'hide',
closable: true,
items: gridWindows,
collapsible: true,
autoHeight:true,
animateTarget:'forSubmitButton'
});
}
win.show();
}
showWindows();
});