PDA

View Full Version : ColumnHeaderGroup issue



hstanciu
14 Apr 2012, 8:03 AM
ColumnHeaderGroup issue


Hi guys,

I am trying to create the table from the picture (target.jpg).
For this, I used ColumnHeaderGroup.
I need to have a "select all" checkbox on left hand that would check/uncheck all the visible rows,
and two "select all" columns (Canada and US), that will check/uncheck all visible checkboxes from
the respecive columns (Canada or US).

I modified the ColumnHeaderGroup sample from ../ext-3.3.1/examples/grid.

I have couple of things that are not working:

1. The empty cells from header are visible; in target1.jpg the empty cells are merged with the ones with text.

2. In ColumnHeaderGroupTest_1.html/column-header-group-test_1.js I added just the lefthand checkboxes, but they also in header rows and I need them just once
(one "Select All" checkbox in header).

3. In ColumnHeaderGroupTest_2.html/column-header-group-test_2.js I tried to add the "select All" checkboxes for Canada and US.
Like in situation #2, the checkboxes appear on both rows of the header, the title of the header have text over, and the checkboxes are doubled.

Can somebody help with this, please?
I spent a lot of time trying to make this work but without big success.

I added two new images to be more explicit how ColumnHeaderGroupTest_1.html/
ColumnHeaderGroupTest_2.html are being displayed (example1.jpg/example2.jpg).
340383403634037

Regards,
Horatiu

scottmartin
15 Apr 2012, 8:34 AM
All of the drawing issues have been resolved in 3.4.
The issue with your test alignment can be corrected using CSS text-align.

Regards,
Scott.

hstanciu
16 Apr 2012, 10:15 AM
Hi Scott,

Thanks for the answer; for me moving to version 3.4.0 is not an option unfortunately.

Sorry for posting in plugins group, I didn't know that was for new plugins only not for issues
regarding plugins.

Can you gave me other suggestions regarding the ColumnHeaderGroup since I cannot move to 3.4.0?

I tried to add an extra row in the header, just to add two more checkboxes above "Canada" and "United States" columns [marked with "B" in the attached picture]. The checkboxes will not appear, and more than that, I have in the first column, in the header three checkboxes [marked with A].

The first two checkboxes cannot be clicked, and the third one is working well. I should have the first checkbox working well, and the next two should not be visible. Do you have any suggestions for this?


var recordFields = [
{name: 'unid', type: 'int'},
{name: 'currencyCode', type: 'string'},
{name: 'currencyName', type: 'string'},
{name: 'writeOp', type: 'string'}
] ;

var writer = new Ext.data.JsonWriter({
writeAllFields : true
});

var remoteProxy = new Ext.data.HttpProxy({
api: {
read : {
url: this.formConfig.ajaxReadUrl,
method: "POST"
},
create : {
url: this.formConfig.ajaxCreateUrl,
method: "POST"
},
update : {
url: this.formConfig.ajaxModifyUrl,
method: "POST"
},
destroy : {
url: this.formConfig.ajaxDeleteUrl,
method: "POST"
}
}
});

this.currencyListStore = new Ext.data.JsonStore({
proxy : remoteProxy,
writer : writer,
disableCaching : true,
storeId : 'currencyReaderStoreId',
root : 'data',
idProperty : 'unid',
autoLoad : true,
totalProperty : 'totalCount',
remoteSort : true,
fields : recordFields,
autoSave : false,
batch : true,
listeners :
{
exception : function () {
console.info(arguments);
}
}
});

var checkSelMod = new Ext.grid.CheckboxSelectionModel({

listeners: {
'selectionchange' : {

fn : function(sm) {
var noSelections = sm.getCount();
if(noSelections != 1){
Ext.getCmp('btnModify').disable();
}else{
Ext.getCmp('btnModify').enable();
}
},
scope : this
}
}
});

var firstRow = [
{},
{header: 'Currency Code'},
{header: 'Currency Name'},
{header: olbb.wire.nls.FieldLabels.currency_not_available_lbl, colspan: 2, align: 'center', width: 200}
];
var secondRow = [
{},
{},
{},
{
xtype : 'container',
id: 'caChkId'
},
{
xtype : 'container',
id: 'usChkId'
}
];

var group = new Ext.ux.grid.ColumnHeaderGroup({
rows: [firstRow,secondRow]
});
// the "columns" is the second row.
var columns = [
//{width:5},
checkSelMod,
{dataIndex: 'currencyCode', align: 'left', width: 150},
{dataIndex: 'currencyName', align: 'left', width: 150},
{
xtype: 'checkcolumn',
header: 'Canada',
align : 'center',
dataIndex: 'indoor',
width: 100
},{
xtype: 'checkcolumn',
header: 'United States',
align : 'center',
dataIndex: 'indoor1',
width: 100
}
];

var gridView = new Ext.grid.GridView({markDirty: false});


this.grid = new Ext.grid.GridPanel({
renderTo : this.formConfig.renderTo,
width : this.itemsWidth,
height : 300,
view : gridView,
columnLines : true,
tbar : {
ui : 'light',
dock : 'top',
pageSize : 5,
style : 'background-color : #f0f0f0',
defaults : {
xtype : 'button'
},
items : [
{
id : 'btnModify',
text : olbb.wire.nls.Buttons.btn_modify,
handler : modifyHandler,
scope : this,
disabled : true
},{
xtype: 'tbfill'
},{
id : 'btnCreate',
text : olbb.wire.nls.Buttons.btn_create_currency,
handler : createHandler,
scope : this,
disabled : false
}
]
},
store: this.currencyListStore,
columns: columns,
viewConfig: {
forceFit: true
},
plugins: group,
selModel : checkSelMod
});


Regards,
Horatiu34088