i'm using Extjs 4.1 grid panel.
i'm looking for a way to hide a column from the grid.
i can use setHidden but then the user can "unhide" the column again from the menu in the column header.
it seems that the hideable propery just doesnt cut it...
Ok.
Eventually i did this:
in the grid's "afterrender" event:
var header = pnl.down("headercontainer");
if(header != null && header["getMenu"] != null)
{
var menu=header.getMenu();
menu.on('beforeshow',function(sender,eOpts){
var menu=sender;
if(!menu.items.containsKey("columnItem"))
{
return;
}
var columnsSubMenuItem=menu.items.getByKey("columnItem");
var columnsCheckboxes=columnsSubMenuItem.menu.items["items"];
// More code here...
// See the pseudo code
});
}
now i just looped through the columns and if checkbox.text == column.get_Title() && column.get_Hideable() == true then checkbox.Show() else checkbox.Hide();
(sorry for the pseudo code, i work with a Sharpkit that is a C# to javascript convertor, so if i'd copy pasted the code it'd be harder to explain.
Note: you can do the same with the grid's enableColumnHide event.
use following config to column
hidden: true,
hideable: false
'grid.headerCt.getGridColumns()'
use above method to get all grid column and use hide() and show() to show particular column
This will work on Ext js 4.1
You can configure columns property in initComponent method and insert only necessary columns into this.columns array
Reconfigure the grid for each scenario. Link to api hint
I use the setVisible(false | true) on the column.
doc
Related
We are using ExtJS 4.2, so that is my context for this question.
I need to have a column in a grid that:
Display a checkbox on each row which can be selected/deselected. It is for the purpose of tracking user selections and not synchronized with underlying store data.
Has a checkall checkbox in header that allows user to select or deselect all rows in the grid.
Can be hidden/removed based on certain condition when page is rendered (user permission or data).
I tried the following:
SelModel - which will satisfy requirement No. 2, but cannot be manipulated once defined (see http://www.sencha.com/forum/showthre...selectionModel).
CheckColumn - which satisfies requirement No. 3, but doesn't have a checkall box in column header (see http://www.sencha.com/forum/showthread.php?265924).
Is there a way for me to achieve what I wanted?
Thanks in advance
Haixi
See my answer to this question:
ExtJS 4 select multiple CheckColumn checkboxes with checkbox header
The addition you would need to make is that on the 'update' event of the grid's store, you will need to manually create code that selects the row with the grid's selectionModel based on the new value in the record.
I had the same requirements and was able to use the 'Ext.selection.CheckboxModel' feature (Ext 4.2). Basically, I override the renderer through the config object. I am using the Sencha Architect 3 and this is the code that was produced:
selModel: Ext.create('Ext.selection.CheckboxModel', me.processMyCheckboxSelectionModel3({}))
processMyCheckboxSelectionModel1: function(config) {
config.renderer = function(value, metaData, record, rowIndex, colIndex, store, view) {
var status = record.get('Status');
if (status === 'Failed') {
var baseCSSPrefix = Ext.baseCSSPrefix;
metaData.tdCls = baseCSSPrefix + 'grid-cell-special ' + baseCSSPrefix + 'grid-cell-row-checker';
return '<div class="' + baseCSSPrefix + 'grid-row-checker"> </div>';
} else {
return '';
}
};
return config;
}
What the renderer is returning when I want it to show a checkbox is copied from Reimius' answer, the only difference with this approach is I am using the Ext 4.2's built in 'Ext.selection.CheckboxModel'.
I'm using ExtJS 4.2.1 and have a fairly simple setup: JSON-based store and a gridpanel that reads from that store. An add button's click event calls out to the function below.
My goal is to add a blank row to the grid and immediately begin editing it using the Ext.grid.plugin.CellEditing plugin that's enabled on the gridpanel.
var addNewRow = function() {
// start add logic
var row = {
'name': '',
'email': '',
'description': ''
};
store.add(row);
// start auto-edit logic
var index = store.indexOf(row); // -1
var grid = Ext.ComponentQuery.query('gridpanel[itemId=upperPane]')[0];
var plugin = grid.getPlugin('upperPaneEditor');
plugin.startEdit( index, 0 );
};
While debugging this, index is set to -1 and that does not work. I tested the plugin.startEdit()'s functionality with (0, 0) to edit the first column of the first row and it works fine. I tried moving the auto-edit logic to various event handlers try to get it to work:
The store's add event fired after the add and reflected the correct index but the element wasn't present yet in the gridpanel for the plugin to grab it.
The gridpanel's afterrender event didn't fire after the add
The gridpanel's add event fired but only after double-clicking on a cell manually to edit it. It also ended up in a loop with itself.
I'm not sure of what else to try at this point.
Your row is a model config object, not a model instance, therefore store.indexOf returns -1.
Try:
var inst = store.add(row)[0];
...
var index = store.indexOf(inst);
When adding a rows to a grid, and then clicking on it, it gets selected (and highlighted). Then, clicking elsewhere but the new row remains highlighted (so now there are to highlighted rows).
Please, does anyone know what the problem could be? How to make it behave normally, i.e. clicking a row deselects (de-highlights) the other one?
After I reload the page (so the new row is not new anymore), everything works as expected.
Edit: Here's the code for adding rows:
var rec = new store.recordType({
test: 'test'
});
store.add(rec);
Edit 2: The problem seems to be listful: true. If false, it works! But I need it to be true so I'm looking at this further... It looks like as if the IDs went somehow wrong... If the ID would change (I first create the record and then the server returns proper ID, that would also confuse the row selector, no?)
(Note, correct as ExtJS 3.3.1)
First of all, this is my quick and dirty hack. Coincidentally I have my CheckboxSelectionModel extended in my system:-
Kore.ux.grid.CheckboxSelectionModel = Ext.extend(Ext.grid.CheckboxSelectionModel, {
clearSelections : function(fast){
if(this.isLocked()){
return;
}
if(fast !== true){
var ds = this.grid.store,
s = this.selections;
s.each(function(r){
//Hack, ds.indexOfId(r.id) is not correct.
//Inherited problem from Store.reader.realize function
this.deselectRow(ds.indexOf(r));
//this.deselectRow(ds.indexOfId(r.id));
}, this);
s.clear();
}else{
this.selections.clear();
}
this.last = false;
}
});
And this is the place where the clearSelections fails. They try to deselect rows by using ds.indexOfId(r.id) and it will returns -1 because we do not have the index defined remapped.
And this is why we can't find the id:-
http://imageshack.us/photo/my-images/864/ssstore.gif/
Note that the first item in the image is not properly "remapped". This is because we have a problem in the "reMap" function in our Ext.data.Store, read as follow:-
// remap record ids in MixedCollection after records have been realized. #see Store#onCreateRecords, #see DataReader#realize
reMap : function(record) {
if (Ext.isArray(record)) {
for (var i = 0, len = record.length; i < len; i++) {
this.reMap(record[i]);
}
} else {
delete this.data.map[record._phid];
this.data.map[record.id] = record;
var index = this.data.keys.indexOf(record._phid);
this.data.keys.splice(index, 1, record.id);
delete record._phid;
}
}
Apparently, this method fails to get fired (or buggy). Traced further up, this method is called by Ext.data.Store.onCreateRecords
....
this.reader.realize(rs, data);
this.reMap(rs);
....
It does look fine on the first look, but when I trace rs and data, these data magically set to undefined after this.reader.realize function, and hence reMap could not map the phantom record back to the normal record.
I don't know what is wrong with this function, and I don't know how should I overwrite this function in my JsonReader. If any of you happen to be free, do help us trace up further for the culprit that causes this problem
Cheers
Lionel
Looks like to have multi select enabled for you grid. You can configure the selection model of the grid by using the Ext.grid.RowSelectionModel.
Set your selection model to single select by configuring the sm (selection model) in grid panel as show below:
sm: new Ext.grid.RowSelectionModel({singleSelect:true})
Update:
Try reloading the grid using the load method or loadData method of the grid's store. Are you updating the grid on the client side? then maybe you can use loadData method. If you are using to get data from remote.. you can use load method. I use load method to update my grid with new records (after some user actions like add,refresh etc). Or you could simply reload as follows:
grid.getStore().reload();
Got an issue, and need your advices
I just started writing an editor grid. (I will actually use this grid as a search filter editor, i.e. columns with criteria name, operators and values).
Now, for the value field, I want to have different edit controls for different rows. For instance, when a criteria type is string I want to display a text box, when it's date time, I want a datetime editor.
So the fact is, I need to control the "edit control creation/display" just before editing starts. and it should be different among rows. Unlike the examples I found which are fixed for the columns.
In order to implement this, can you guys please suggest the steps I need to do? I can probably figure out it if one of you can direct me a way.
Thanks and best regards
Actually you can easily accomplish this by dynamically returning different editors and renders depending on the column you're in. In your ColumnModel object you can define something like this below. Note that i'm getting a type property of each record to determine its type. I have an object containing all my different types of editors, and the same for renderers, and then based on the the type i dish out a different editor or renderer for that cell.
editors: { 'default': {xtype:'textfield'},
texttype: {xtype:'textfield'},
numbertype: {xtype:'numberfield'},
combotype: {xtype:'combo'}....... etc. }
getCellEditor: function(colIndex, rowIndex) {
var store = Ext.getCmp('mygrid').getStore();
var field = this.getDataIndex(colIndex);
var rec = store.getAt(rowIndex);
var type = rec.get('type');
if (type in this.editors) {
return this.editors[type];
} else {
return this.editors['default'];
}
},
In the configuration section of your editorgrid, you will need to define your custom editors:
{
xtype: 'editorgrid',
id : 'mygridID',
stripeRows: true,
...
...
,customEditors : {
//configs go here or pre-define the configs prior to this
'columnName1' : new Ext.grid.GridEditor(new Ext.form.Combobox(configObject)),
//configs go here or pre-define the configs prior to this
'columnName7' : new Ext.grid.GridEditor(new Ext.form.CheckBox(configObject))
}
}
use this grid config - in order to select whole rows:
selType: 'rowmodel'
in my editorGrid i have one column with dateField editor , when the grid is rendred i set that field to non editable :
myColModel.setEditable(colIdex,false)
it will be editable after the value changed in other cell in the same row
myColModel.setEditable(colIdex,true)
the probleme is : all the cells in the column are editables
how can i do to make only the cell in the selected row editable
and many thanks
Use the 'beforeedit' listener on the EditorGrid - you can inspect the field they are trying to edit. If the other field isn't set, return false to not allow them to edit that field.
Basically you can create conditional logic and hide the edit buttons based on the row model.
dataBound: function (){
var grid = this;
var trs = this.tbody.find('tr').each(function(){
var item = grid.dataItem($(this));
if( item.UnitPrice % 5 == 0) {
$(this).find('.k-grid-edit,.k-grid-delete').hide();
}
});
},
You can do it other way by just overriding the isCellEditable function.
Check the below link.
http://www.sencha.com/learn/Ext_FAQ_Grid#Disable_editing_of_particular_rows.2C_columns.2C_etc