PDA

View Full Version : [CLOSED][3.0.0] Hiding column in a grid



Thomas Triplet
15 Jul 2009, 10:42 AM
Ext version tested:



Ext 3.0.0





Adapter used:



ext





Browser versions tested against:



FF3.5

Safari 4

Chrome 2





Operating System:



Win Vista SP2





Description:



When trying to hide a column from the menu (unselecting the corresponding checkbox), getting the following error message:
Error: item.itemId is undefined
Source File: lib/extjs/ext-all-debug.js
Line: 61947





Test Case:

Code is incomplete, I'll try to upload a more comprehensive version asap (have a pb with my home server though)



Ext
.onReady( function() {
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
Ext.QuickTips.init();

Ext.ns('Passport');

/* Declaration of a Clone as a Record to be stored in the EditorGrid */
Passport.Clone = Ext.data.Record.create( []);

/* Custom reader to parse data in an array */
var reader = new Ext.data.ArrayReader( {}, [
{
name: 'target_name'
}, {
name: 'primer'
}, {
name: 'clone_name'
}, {
name: 'source'
}, {
name: 'pcr_plate'
}, {
name: 'pcr_step1'
}, {
name: 'pcr_ref1'
}, {
name: 'pcr_step2'
}, {
name: 'pcr_ref2'
}, {
name: 'dna_length'
}, {
name: 'aa_length'
}, {
name: 'molecular_weight'
}, {
name: 'positive_clones'
}, {
name: 'selected_clones'
}, {
name: 'dna_plate_position'
}, {
name: 'dna_plate_location'
}, {
name: 'dna_plate_reference'
}, {
name: 'vector_batch'
}, {
name: 'protocol'
}, {
name: 'description'
}, {
name: 'location'
}, {
name: 'comments'
}, {
name: 'version',
type: 'float'
}, {
name: 'history'
}
]);

var cm = new Ext.grid.ColumnModel( [
new Ext.grid.RowNumberer(), {
header: "Target",
sortable: true,
id: 'target_name',
dataIndex: 'target_name',
editor: new Ext.form.ComboBox( {
typeAhead: true,
allowBlank: false,
triggerAction: 'all',
transform: 'spreadsheet_target_name_combox',
lazyRender: true
})

}, {
header: "Primer",
sortable: true,
width: 150,
id: 'primer',
dataIndex: 'primer',
editor: new Ext.form.ComboBox( {
typeAhead: true,
allowBlank: false,
triggerAction: 'all',
transform: 'spreadsheet_primer_combox',
lazyRender: true
})

}, {
header: "Clone Name",
sortable: true,
width: 200,
id: 'clone_name',
dataIndex: 'clone_name',
editor: new Ext.form.TextField( {
allowBlank: false
})

}, {
header: "Source",
sortable: true,
width: 80,
id: 'source',
dataIndex: 'source',
editor: new Ext.form.ComboBox( {
typeAhead: true,
allowBlank: false,
triggerAction: 'all',
transform: 'spreadsheet_source_combox',
lazyRender: true
})

}, {
header: "Prep. Date",
sortable: true,
id: 'preparation_date',
dataIndex: 'preparation_date',
renderer: formatDate,
editor: new Ext.form.DateField( {
allowBlank: true
})

}, {
header: "Reference",
sortable: true,
id: 'reference',
dataIndex: 'reference',
editor: new Ext.form.TextField( {
allowBlank: false
})

}, {
header: "DNA Length",
sortable: true,
width: 70,
align: 'right',
hidden: true,
renderer: 'formatInteger',
id: 'dna_length',
dataIndex: 'dna_length',
editable: false

}, {
header: "AA Length",
sortable: true,
width: 70,
align: 'right',
renderer: 'formatInteger',
editable: false,
id: 'aa_length',
dataIndex: 'aa_length'

}, {
header: "MW",
sortable: true,
width: 70,
align: 'right',
editable: false,
renderer: 'formatInteger',
hidden: true,
id: 'molecular_weight',
dataIndex: 'molecular_weight',
editor: new Ext.form.NumberField( {
allowBlank: true
})

}, {
header: "PCR Plate",
sortable: true,
width: 70,
id: 'pcr_plate',
dataIndex: 'pcr_plate',
editor: new Ext.form.TextField( {
allowBlank: true
})

}, {
header: "PCR Step 1",
sortable: false,
width: 70,
id: 'pcr_step1',
dataIndex: 'pcr_step1',
hidden: true,
editor: new Ext.form.TextField( {
allowBlank: true
})

}, {
header: "PCR Ref 1",
sortable: false,
width: 70,
id: 'pcr_ref1',
dataIndex: 'pcr_ref1',
hidden: true,
editor: new Ext.form.TextField( {
allowBlank: true
})

}, {
header: "PCR Step 2",
sortable: false,
width: 70,
id: 'pcr_step2',
dataIndex: 'pcr_step2',
hidden: true,
editor: new Ext.form.TextField( {
allowBlank: true
})

}, {
header: "PCR Ref 2",
sortable: false,
width: 70,
id: 'pcr_ref2',
dataIndex: 'pcr_ref2',
hidden: true,
editor: new Ext.form.TextField( {
allowBlank: true
})

}, {
header: "Positive Clones",
sortable: true,
width: 120,
align: 'center',
renderer: 'booleanAccept',
id: 'positive_clones',
dataIndex: 'positive_clones',
hidden: true,
editor: new Ext.form.Checkbox()

}, {
header: "Selected Clones",
sortable: true,
width: 120,
align: 'center',
renderer: 'booleanAccept',
id: 'selected_clones',
dataIndex: 'selected_clones',
editor: new Ext.form.Checkbox()

}, {
header: "DNA Plate Reference",
sortable: false,
width: 150,
id: 'dna_plate_reference',
dataIndex: 'dna_plate_reference',
editor: new Ext.form.TextField( {
allowBlank: true
})

}, {
header: "Glycerol Plate Position",
sortable: false,
width: 100,
align: 'center',
id: 'glycerol_plate_position',
dataIndex: 'dna_plate_position',
editor: new Ext.form.TextField( {
allowBlank: true
})

}, {
header: "Glycerol Plate Location",
sortable: false,
width: 150,
id: 'glycerol_plate_location',
dataIndex: 'dna_plate_location',
editor: new Ext.form.TextField( {
allowBlank: true
})

}, {
header: "Vector Batch",
sortable: true,
align: 'center',
id: 'vector_batch',
dataIndex: 'vector_batch',
editor: new Ext.form.ComboBox( {
typeAhead: true,
triggerAction: 'all',
transform: 'spreadsheet_vector_batch_combox',
lazyRender: true
})

}, {
header: "Protocol",
sortable: true,
align: 'center',
id: 'protocol',
dataIndex: 'protocol',
width: 110,
editor: new Ext.form.ComboBox( {
typeAhead: true,
triggerAction: 'all',
transform: 'spreadsheet_protocol_combox',
lazyRender: true
})

}, {
header: "Description",
sortable: false,
width: 150,
hidden: true,
id: 'description',
dataIndex: 'description',
editor: new Ext.form.TextArea( {
allowBlank: true
})

}, {
header: "Location",
sortable: false,
width: 150,
id: 'location',
dataIndex: 'location',
editor: new Ext.form.TextField( {
allowBlank: true
})

}, {
header: "Comments",
sortable: false,
width: 460,
id: 'comments',
dataIndex: 'comments',
editor: new Ext.form.HtmlEditor( {
height: 250,
enableFonts: true,
enableLists: false,
enableLinks: true,
enableAlignments: true,
enableColors: true,
allowBlank: true
})

}, {
header: "Version",
sortable: false,
hidden: true,
align: 'center',
id: 'version',
dataIndex: 'version',
editor: new Ext.form.NumberField( {
allowNegative: false,
allowBlank: true
})

}, {
header: "History",
sortable: false,
hidden: true,
id: 'history',
dataIndex: 'history',
editor: new Ext.form.TextArea( {
allowBlank: true
})

}
]);

/*
* Store that will handle data from server. Still local data for
* now.
*/
Passport.spreadsheet_store = new Ext.data.GroupingStore( {
reader: reader,
sortInfo: {
field: 'target_name',
direction: "ASC"
}
});

/* remote paging only -> unused so far */
var pagingBar = new Ext.PagingToolbar( {
pageSize: 50,
store: Passport.spreadsheet_store,
displayInfo: true,
displayMsg: 'Displaying clones {0} - {1} of {2}',
emptyMsg: "No clones to display"
});

/* Main spreadsheet */
Passport.spreadsheet_panel = new Ext.grid.EditorGridPanel( {
id: 'Passport.spreadsheet_panel',
store: Passport.spreadsheet_store,
cm: cm,
bbar: pagingBar,
view: new Ext.grid.GroupingView( {
hideGroupedColumn: true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items": "Item"]})'
}),
stripeRows: true,
region: 'center',
layout: 'fit',
border: false,
// plugins: filters,
animCollapse: false,
autoResize: true,
autoScroll: true,
clicksToEdit: 1,
// inline toolbars
columnViews: [
{
text: 'PCR Results',
columns: [
"", "target_name", "primer", "clone_name", "source", "pcr_plate", "pcr_step1", "pcr_ref1", "pcr_step2", "pcr_ref2"
],
iconCls: 'icon-book'
}, {
text: 'Template DNA',
columns: [
"", "target_name", "primer", "clone_name", "source", "preparation_date", "reference"
],
iconCls: 'icon-brick'
}, {
text: 'Expected Size',
columns: [
"", "target_name", "primer", "clone_name", "source", "dna_length", "aa_length", "molecular_weight"
],
iconCls: 'icon-size'
}, {
text: 'Notes',
columns: [
"", "target_name", "primer", "clone_name", "source", "comments", "version", "history"
],
iconCls: 'icon-note'
}
],
tbar: [
{
text: 'Save',
tooltip: 'Save changes in the database',
iconCls: 'icon-save',
disabled: true,
handler: function() {
Ext.Msg.show( {
title: 'Info',
msg: 'Data successfully saved in the database.',
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.INFO
});
Passport.spreadsheet_store.commitChanges();
Passport.spreadsheet_panel.getTopToolbar().items.get(0).disable();
Passport.spreadsheet_panel.getTopToolbar().items.get(1).disable();
updateDetailPanel();
}
}, {
text: 'Undo',
tooltip: 'Cancel all unsaved modifications made to existing records',
iconCls: 'icon-undo',
disabled: true,
handler: function() {
/*
* Ext.Msg.show( { title: 'Info', msg
*: 'Modifications undone.', buttons
*: Ext.Msg.OK, icon: Ext.MessageBox.INFO });
*/
Passport.spreadsheet_store.rejectChanges();
Passport.spreadsheet_panel.getTopToolbar().items.get(0).disable();
Passport.spreadsheet_panel.getTopToolbar().items.get(1).disable();
updateDetailPanel();
}
}, '-', {
text: 'Upload',
disabled: true,
tooltip: 'Upload CSV file from Excel',
iconCls: 'icon-upExcel'
}, {
text: 'Download',
tooltip: 'Download CSV file for Excel',
iconCls: 'icon-dlExcel',
handler: function() {
Ext.Msg.show( {
title: 'Error',
msg: 'No implemented.',
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.ERROR
});
}
}, '-', {
text: 'Add',
tooltip: 'Add a new row',
iconCls: 'icon-add',
handler: function() {
var p = new Passport.Clone();
Passport.spreadsheet_panel.getTopToolbar().items.get(0).enable();
Passport.spreadsheet_panel.stopEditing();
Passport.spreadsheet_store.insert(0, p);
Passport.spreadsheet_panel.startEditing(0, 1);
}
}, {
text: 'Remove',
tooltip: 'Remove the selected item',
iconCls: 'icon-remove',
handler: function() {
Ext.Msg.show( {
title: 'Delete Entry?',
msg: 'You are trying to remove an entry from the database. This operation cannot be undone. <br> Are you sure you want to delete this entry?',
buttons: Ext.Msg.YESNOCANCEL,
icon: Ext.MessageBox.WARNING,
fn: tbarRemove_handler
});
}
}
]
});

// Update of detailPanel after editing a cell
Passport.spreadsheet_panel.on('afteredit', function(o) {
updateComputedFields(o.row);
});

}); // End onReady

// Array data for the grids
data_grid = [
[
'PchrSEQ4317', 'PchrSEQ4317funAH:F:GTW/PchrSEQ4317funAH:R:GTW', 'pGBFIN-GTWPchr4317funAHo-11', 'Genomic', 'pcr plate', 'pcr step1', 'pcr ref1', 'pcr step2', 'pcr ref2', 'dna length',
'aa length', 'mw', true, false, 'plate position', 'plate location', 'plate reference', 'ANEp2', 'protocol', 'description', 'Cloning 020; Position D10 ; colony 3',
'a few words to comment about this', '1.1', 'yyang:update:2005-11-30 11:57:49<br>jchenier:create:2005-09-14 15:52:39'
],
[
'PchrSEQ4317', 'PchrSEQ4317funAH:F:GTW/PchrSEQ4317funAH:R:GTW', 'pGBFIN-GTWPchr4317funAHo-11', 'cDNA', 'pcr plate', 'pcr step1', 'pcr ref1', 'pcr step2', 'pcr ref2', 'dna length',
'aa length', 'mw', false, false, 'plate position', 'plate location', 'plate reference', 'ANEp2', 'protocol', 'description', 'Cloning 020; Position D10 ; colony 3',
'a few words to comment about this', '1.1', 'yyang:update:2005-11-30 11:57:49<br>jchenier:create:2005-09-14 15:52:39'
],
[
'PchrSEQ4317', 'PchrSEQ4317funAH:F:GTW/PchrSEQ4317funAH:R:GTW', 'pGBFIN-GTWPchr4317funAHo-11', 'cDNA', 'pcr plate', 'pcr step1', 'pcr ref1', 'pcr step2', 'pcr ref2', 'dna length',
'aa length', 'mw', true, false, 'plate position', 'plate location', 'plate reference', 'ANEp2', 'protocol', 'description', 'Cloning 020; Position D10 ; colony 3',
'a few words to comment about this', '1.1', 'yyang:update:2005-11-30 11:57:49<br>jchenier:create:2005-09-14 15:52:39'
]
];

/**
* Updates the amino-acid length of the record at the given index
*
* @param {int}
* row Index of the record to update.
*/
function updateAALength(row) {
Passport.spreadsheet_store.getAt(row).set('aa_length', Passport.spreadsheet_store.getAt(row).get('clone_name').length);
}

/**
* Updates the amino-acid molecular weight of the record at the given index
*
* @param {int}
* row Index of the record to update.
*/
function updateMolecularWeight(row) {
Passport.spreadsheet_store.getAt(row).set('molecular_weight', Math.round(getMolecularWeight(Passport.spreadsheet_store.getAt(row).get('clone_name'))));
}

/**
* Updates the DNA length of the record at the given index
*
* @param {int}
* row Index of the record to update.
*/
function updateDNALength(row) {
Passport.spreadsheet_store.getAt(row).set('dna_length', Passport.spreadsheet_store.getAt(row).get('clone_name').length / 3);
}

/**
* Updates all computed fields
*
* @param {int}
* row Index of the record to update.
*/
function updateComputedFields(row) {
updateAALength(row);
updateMolecularWeight(row);
updateDNALength(row);
}




The result that was expected:



Column should be hidden





The result that occurs instead:



Not hidden plus error message in JS concole





Debugging already done:



Solved (see fix)





Possible fix:

ext-all-debug, line 61946, in function handleHdMenuClick, default case of the switch, replaced item.itemId by item.id


// private
handleHdMenuClick : function(item){
var index = this.hdCtxIndex;
var cm = this.cm, ds = this.ds;
switch(item.itemId){
case "asc":
ds.sort(cm.getDataIndex(index), "ASC");
break;
case "desc":
ds.sort(cm.getDataIndex(index), "DESC");
break;
default:
index = cm.getIndexById(item.id.substr(4));
//index = cm.getIndexById(item.itemId.substr(4));
if(index != -1){
if(item.checked && cm.getColumnsBy(this.isHideableColumn, this).length <= 1){
this.onDenyColumnHide();
return false;
}
cm.setHidden(index, item.checked);
}
}
return true;
},

evant
16 Jul 2009, 2:28 AM
This definitely doesn't happen with the online examples: http://extjs.com/deploy/dev/examples/grid/array-grid.html

You may have a custom override somewhere causing a problem. Going to mark this as closed.

Condor
16 Jul 2009, 2:47 AM
This was fixed in rev. 3400, which is pre-Ext3.0RC1.

So I have no idea which ext-all-debug version you are referring to.