PDA

View Full Version : Grid Dynamic Header Problem



sam_sant2005
16 Aug 2009, 10:16 PM
Hi,

I have a problem with my grid.


Here the column headers are designed to be generated dynamically. Present scenario the dynamic column count is 31. As you can see in the snapshot, the last column is not aligned properly. Also the header for the last column is not even displayed in FF. In IE7 everything is fine.
Is there a simple fix for this? Please help at the earliest.

Note: Two grids are being used here. This was done to create a 'column locking' effect. Grid 1 displays the 'Criteria' as rows. Grid 2 displays the users as the column header.

Thank you.



//grid store
usrListStore = new Ext.data.JsonStore({
url: base_root+'evaluation_procedure_call.php',
baseParams:{task:'USER_LIST',eType:evalType,hLevel:hLevelId,ddate:tdate},
fields: ['user_id','first_name','last_name','status'],
totalProperty: 'totalCount',
root: 'qry'
});

usrListStore.load({callback: function(records,o,s){
recordCount = usrListStore.getTotalCount();
//alert(recordCount);
arryfields.push({name:'evaluation_id'});
arryfields.push({name:'particulars'});
arryfields.push({name:'mark'});
for(i=0;i<recordCount;i++){
arryfields.push( {name: usrListStore.getAt(i).get('user_id')});
//arryfields.push( {name: usrListStore.getAt(i).get('first_name')});
usersArr.push(usrListStore.getAt(i).get('user_id'));

}

for(i=0;i<recordCount;i++){


arryHeader.push( {
header: usrListStore.getAt(i).get('first_name'),
//width:150,
editor: new Ext.form.NumberField({
allowBlank: true
}),
sortable: false,
align:'right',
dataIndex: usrListStore.getAt(i).get('user_id')/*,renderer:alignAmntRight*/
});
}
Ext.onReady(function(){
//Store for Evaluation Procedures
evalListStore = new Ext.data.JsonStore({
url: base_root+'evaluation_procedure_call.php',
baseParams:{task:'EVAL_PROC_LIST',eType:evalType},
fields: arryfields,
totalProperty: 'totalCount',
root: 'qry'
});

//evalListStore.load({callback: function(records2,o2,s2){


//}});

var ssk_particulars_chkbx = new Ext.grid.CheckboxSelectionModel();

var ssk_main_particulars_chkbx = new Ext.grid.CheckboxSelectionModel();

var ssk_eval_grid_cm = new Ext.grid.ColumnModel([Row_Numberer,arryHeader
/*{header: 'Type3', dataIndex:'1', sortable:true,width: 100}*/
]);

var ssk_main_eval_grid_cm = new Ext.grid.ColumnModel([Row_Numberer,
{id:'autoParticulars',header: 'Criteria', dataIndex:'particulars', sortable:false,width: 258},
/*{header: 'Procedure', dataIndex:'grpparticulars', sortable:false,width: 200},*/
{header: 'Total<br/>Mark', dataIndex:'mark', align:'right', sortable:false,width: 65}
]);


var frwdButton = new Ext.Button({id:'frwdButton',
text: 'Forward',
tooltip: 'Forward the Marks',
listeners: {click: forwardMarks}
});

var saveButton = new Ext.Button({id:'saveButton',
text: 'Save',
tooltip: 'Save the Marks',
listeners: {click: saveMarks}
});

var closeButton = new Ext.Button({id:'closeButton',
text: 'Close',
tooltip: 'Close the Window',
listeners: {click: closeEvalWindow}
});
var buttonArr=[];
if(status !=1){
buttonArr.push(saveButton);
buttonArr.push(frwdButton);
buttonArr.push(closeButton);
}
else{
buttonArr.push(closeButton);

}

//*************************Grid to Display the Evaluation Criteria and Total Mark******************************
ssk_mainEvalUsersGrid = new Ext.grid.EditorGridPanel({
id:'ssk_mainEvalUsersGrid',
store: evalListStore,
title: 'Evaluation Criteria',
cm: ssk_main_eval_grid_cm,
sm: ssk_main_particulars_chkbx,
stripeRows: true,
height:480,
//autoExpandColumn:'autoParticulars',
width:170
});
//*************************************************************************************************************

//************************Grid to Display the Users and their Marks********************************************
ssk_evalUsersGrid = new Ext.grid.EditorGridPanel({
id:'ssk_evalUsersGrid',
store: evalListStore,
title: 'Marks',
columns: arryHeader,
sm: ssk_particulars_chkbx,
clicksToEdit: 1,
stripeRows: true,
height:480,
autoWidth:true
});
//*************************************************************************************************************
evalListStore.load({params:{ddate:tepMarkDate}});


/*var ssk_panelMasterArr = [];
ssk_panelMasterArr.push(ssk_mainEvalUsersGrid);
ssk_panelMasterArr.push(ssk_evalUsersGrid);*/

test_master_panel = new Ext.FormPanel({
id: 'test_master_panel',
plain:false,
buttonAlign:'center',
frame:true,
width:600,
layout : 'column',
border:false,
tbar:[searchDateMark,{
text: 'Search',
tooltip: 'Search',
iconCls: 'search',
handler: loadGridStoreMark
}],
//autoScroll:true,

buttons: buttonArr,
items: [{
layout:'fit',bodyStyle:'padding:0px',columnWidth:.4,items:ssk_mainEvalUsersGrid},{layout:'fit',bodyStyle:'padding:0px',columnWidth:.6,items:ssk_evalUsersGrid}]
});

marks_entryForm= new Ext.Window({
id: 'marks_entryForm',
title: 'Marks Entry',
closable:false,
modal:true,
width: 900,
height: 600,
y:10,
plain:true,
layout: 'fit',
closable:false,
items: test_master_panel

});

if(!marks_entryForm.isVisible()){
marks_entryForm.show();
}
else{
marks_entryForm.toFront();
}



function closeEvalWindow(){
marks_entryForm.close();
}




});

}});





Snapshots:
1) Close up view of the issue in FF.


http://lh4.ggpht.com/_tSyx_zzQB7M/Sojvf0L43jI/AAAAAAAABK4/bnJhhYix4zE/gridbug.JPG




2) Full view of the issue in FF

http://lh3.ggpht.com/_tSyx_zzQB7M/SojzQxST9MI/AAAAAAAABK8/l8oHQ_QDTTY/s640/gridbug2.JPG


3) Same grid viewed in IE8 (Please note the last column header "tester" which was not displayed in FF .Although its column was present without header)

http://lh5.ggpht.com/_tSyx_zzQB7M/Soj05DzQwBI/AAAAAAAABLA/GOwuwaHGn1o/s640/gridbug3.JPG

Animal
16 Aug 2009, 11:04 PM
So. You have a Window containing a FormPanel containing a Panel containing a GridPanel!

Why not just have a Window containing a GridPanel?

sam_sant2005
16 Aug 2009, 11:14 PM
@Animal:
Ok now I tried putting the gridpanels in the window without a panel in between.
But the problem still exist!
Is there a different approach to the whole issue?

I mean is it possible to give some sort of pagination to the column header if it exceeds 20 or something?

Animal
16 Aug 2009, 11:39 PM
You can have as many columns as you like and it will scroll to show you them.

Unless you've overnested.

Make the Window layout:'column'.

Use the two GridPanels as immediate child items of the Window. Configure them with a columnWidth value

sam_sant2005
17 Aug 2009, 12:52 AM
@Animal:
Ok I have done as u told. But still the last column header is not being displayed in FF and the alignment is broken.

What do you actually mean by overnesting? In my code did you find anything wrong in that regard?

sam_sant2005
17 Aug 2009, 1:19 AM
@Animal:
I gave align:'left' for the column headers. So now the last column header is atleast visible but alignment is still broken. Finally please tell me if theres any patch for the problem of grid not aligning properly when number of columns increases.

ExtJs Ver : 2.2

Please note the issue in the attached screenshot.

This issue is not present in IE8. Problem with FF. Iam hopeful of finding a patch for it.

http://lh5.ggpht.com/_tSyx_zzQB7M/SokgT78kiLI/AAAAAAAABLg/xALwuusicks/s640/bugfinal.JPG

Animal
17 Aug 2009, 2:25 AM
Ext 2.2?

Upgrade!

This is also the 3.0 forum!

Animal
17 Aug 2009, 2:28 AM
Overnesting. Obvious.

You had a Window which contained A FormPanel which was a column layout which contained two Panels each of which contained a Grid!

Can't you see how bad that is?

You need the Window to be configured layout: 'column'.

Use the two Grids as immediate child items of the Window

sam_sant2005
17 Aug 2009, 2:58 AM
@Animal:

Ok I have done as u asked. Removed the unnecessary nesting and placed the gridpanels directly in the window. but alignment problem still exists. And please note that this doesnt happen due to a large number of columns actually. A small shifting in alignment is found even for 7-8 columns. Just that the shifting increases as the number of columns increases. I feel its just a style issue.

By now my application is too large and too complicated to upgrade from Ext 2 to Ext 3. I would be greatful if you could kindly suggest a way out.

Here is the modified code.


usrListStore.load({callback: function(records,o,s){
recordCount = usrListStore.getTotalCount();
arryfields.push({name:'evaluation_id'});
arryfields.push({name:'particulars'});
arryfields.push({name:'mark'});
for(i=0;i<recordCount;i++){
arryfields.push( {name: usrListStore.getAt(i).get('user_id')});
usersArr.push(usrListStore.getAt(i).get('user_id'));
}


for(i=0;i<recordCount;i++){


arryHeader.push( {
header: usrListStore.getAt(i).get('first_name'),
width:155,
editor: new Ext.form.NumberField({
allowBlank: true
}),
sortable: false,
align:'left',
dataIndex: usrListStore.getAt(i).get('user_id')/*,renderer:alignAmntRight*/
});
}


Ext.onReady(function(){
//Store for Evaluation Procedures
evalListStore = new Ext.data.JsonStore({
url: base_root+'evaluation_procedure_call.php',
baseParams:{task:'EVAL_PROC_LIST',eType:evalType},
fields: arryfields,
totalProperty: 'totalCount',
root: 'qry'
});


var ssk_particulars_chkbx = new Ext.grid.CheckboxSelectionModel();

var ssk_main_particulars_chkbx = new Ext.grid.CheckboxSelectionModel();


var ssk_eval_grid_cm = new Ext.grid.ColumnModel([Row_Numberer,arryHeader
]);

var ssk_main_eval_grid_cm = new Ext.grid.ColumnModel([Row_Numberer,
{id:'autoParticulars',header: 'Criteria', dataIndex:'particulars', sortable:false,width: 258},
{header: 'Total<br/>Mark', dataIndex:'mark', align:'right', sortable:false,width: 65}
]);


var frwdButton = new Ext.Button({id:'frwdButton',
text: 'Forward',
tooltip: 'Forward the Marks',
listeners: {click: forwardMarks}
});

var saveButton = new Ext.Button({id:'saveButton',
text: 'Save',
tooltip: 'Save the Marks',
listeners: {click: saveMarks}
});

var closeButton = new Ext.Button({id:'closeButton',
text: 'Close',
tooltip: 'Close the Window',
listeners: {click: closeEvalWindow}
});
var buttonArr=[];

buttonArr.push(saveButton);
buttonArr.push(frwdButton);
buttonArr.push(closeButton);


//*************************Grid to Display the Evaluation Criteria and Total Mark******************************
ssk_mainEvalUsersGrid = new Ext.grid.EditorGridPanel({
id:'ssk_mainEvalUsersGrid',
store: evalListStore,
title: 'Evaluation Criteria',
cm: ssk_main_eval_grid_cm,
sm: ssk_main_particulars_chkbx,
stripeRows: true,
height:480,
//autoExpandColumn:'autoParticulars',
width:170
});
//*************************************************************************************************************

//************************Grid to Display the Users and their Marks********************************************
ssk_evalUsersGrid = new Ext.grid.EditorGridPanel({
id:'ssk_evalUsersGrid',
store: evalListStore,
title: 'Marks',
columns: arryHeader,
sm: ssk_particulars_chkbx,
clicksToEdit: 1,
stripeRows: true,
height:480,
autoWidth:true

});
//*************************************************************************************************************
evalListStore.load({params:{ddate:tepMarkDate}});


marks_entryForm= new Ext.Window({
id: 'marks_entryForm',
title: 'Marks Entry',
//closable:false,
modal:true,
width: 900,
frame:true,
buttonAlign:'center',
height: 600,
y:10,
plain:true,
layout: 'column',
closable:true,
tbar:[searchDateMark,{
text: 'Search',
tooltip: 'Search',
iconCls: 'search',
handler: loadGridStoreMark
}],
autoScroll:true,

buttons: buttonArr,
items: [{
layout:'fit',bodyStyle:'padding:0px',columnWidth:.4,items:ssk_mainEvalUsersGrid},{layout:'fit',bodyStyle:'padding:0px',columnWidth:1,items:ssk_evalUsersGrid}]

});

if(!marks_entryForm.isVisible()){
marks_entryForm.show();
}
else{
marks_entryForm.toFront();
}



function closeEvalWindow(){
marks_entryForm.close();
}





});

}});// JavaScript Document

Animal
17 Aug 2009, 4:09 AM
So you can never, ever upgrade?

We did, here at Forward Computers. And the app is pretty large. It's quite an easy process.

samvan
18 Apr 2010, 8:06 PM
@sam 2005
hi sam am also working on it.So can u pls send me the coding which u done for Dynamic column model!!!!!Thanks in advance.................