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
Related
I'm working with an ExtJS 4 propertygrid that can list three different kinds of items that display when clicked on in another grid. One kind of item has to have a particular field hidden, so that it is't shown but any updates caused by editing other fields aren't affected by potentially missing information.
Attempts of using hidden/isHidden/visible/isVisible, with quoted and unquoted true/false values, haven't worked, and show the ShapeLength field in the propertyGrid.
Is there a "hidden: true" setting within the sourceConfig that I can apply somehow?
Example code:
var lengthDisplayName = '';
if(record.data.Type_ID == 'Circle(s)'){
lengthDisplayName = 'Radius (mm)';
}
if(record.data.Type_ID == 'Triangle(s)'){
lengthDisplayName = 'Side Length (mm)';
}
detailsGrid.sourceConfig['ShapeLength'] = {displayName: lengthDisplayName, type: 'number'};
if(record.data.Item_No == '-1'){
detailsGrid.sourceConfig['ShapeLength'] = {
displayName: lengthDisplayName,
type: 'number'
//, hidden/isVisible/visible value set here
}
};
No there is no hidden property for sourceConfig. But one possibility is to remove the property from the sourceConfig and reinsert it if it should be visible again.
delete detailsGrid.sourceConfig['ShapeLength'];
Was directed to an answer by a colleague - I can getRowClass within the propertyGrid and apply a hidden style on source data for an identifying property and the row name to hide, or else return out:
detailsGrid.getView().getRowClass = function(row) {
if(detailsGrid.source['Item_No'] == '-1' && row.data.name == 'ShapeLength')
return 'x-hidden';
return;
};
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);
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
In ext js, when I have a combo, there is display value and value( which is sent to server). I do not need displayValue to send to server, but I need to capture it on the page and display an alert.
What is the eextjs method of doing this?
combo.getValue() will return the underlying value...and I do not see any combo.getDisplay()
EDIT: Just to clarify, I am looking to get the display value of the item that is selected by the user. I wish to show an alert on the onselect or on changeevent.
If you set the valueField property on the combo box to the value you wish to display in the alert that will work fine.
alert(combo.getValue());
If you want this value to be different from the value you submit to the server you will have to get the store from the combo box and find the corresponding record.
var store = combo.getStore();
var index = store.find('*YourFieldName*', combo.getValue());
if(index != -1)//the record has been found
{
var record = store.getAt(index);
//you can then do what you like with the record.
}
combo.getStore().getById(combo.getValue()).raw.displayAttribute //Ext 4.x,
//displayAttribute: displayField or displayed attrib in store data for the combo
We can retreive the underlying store, then use our value as a key to get the display value.
Something like this (I haven't tested it):
var displayValue = combo.getStore()[combo.getValue()]
We can get the combo box display value something like this...
getRawValue( ) : String
Returns the raw String value of the combo, without performing any normalization, conversion, or validation. Gets the current value of the input element if the field has been rendered, ignoring the value if it is the emptyText.
combo.getRawValue();
Let's assume that you have following in your combobox:
id: 'COMBOBOX_ID',
displayField: 'COMBOBOX_DIS_FIELD_NAME',
valueField: 'COMBOBOX_VAL_FIELD_NAME'
Then, you can do following:
var combo = Ext.getCmp('COMBOBOX_ID');
var comboStore = combo.getStore();
var index = comboStore.find('COMBOBOX_VAL_FIELD_NAME', combo.getValue());
if(index != -1)
{
var selectedItemDisplayValue = combo.getStore().getAt(index).get('COMBOBOX_DIS_FIELD_NAME');
}