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');
}
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;
};
If I have a store backed combobox selection that fires an event under ExtJS 4, how do I go about getting the full object that is represented by that selection?
In general, you can use the findRecordByValue method on the combobox:
combobox.on('change', function(combobox, newValue, oldValue) {
// Get the old and the new records.
// NOTE: The underlying store is not guaranteed to
// contain an associated record.
var oldRecord = combobox.findRecordByValue(oldValue);
if (oldRecord) {
// Do something...
}
var newRecord = combobox.findRecordByValue(newValue);
if (newRecord) {
// Do something...
}
});
Figured this out almost immediately after posting my question.
My problem was that I was binding to the wrong event, I was using 'change' instead of 'selection'.
The selection event gives you the record with the full object contained in it.
I have a multiselect grid where I can get schools.getSelectionModel().getSelection();
there is an object called data, I want to get a field within the data; lets say school_name
How I'll do it?
I've tried
schools.getSelectionModel().getSelection().data
schools.getSelectionModel().getSelection(data)
schools.datagetSelectionModel().getSelection()
they did not work.
You have to use Ext.each to iterate over the array of records..
Ext.each(schools.getSelectionModel().getSelection(), function(record, index, allRecords) {
console.log(record.get('school_name');
});
This:
schools.getSelectionModel().getSelection()[0].get('school_name')
should give you a 'school_name' field from first row selected (which is also a first record in selection).
To iterate over all selected rows do:
var selectedSchools = schools.getSelectionModel().getSelection();
for (i in selectedSchools) {
console.log(schools[i].get('school_name')); //this will log school name to firebug console - you can do whatever you need
}
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
I'm using the following combobox:
var cb = new Ext.form.ComboBox({
store: someDs,
fieldLabel: 'test',
valueField:'name',
displayField:'name_id',
typeAhead: true,
minChars: 3,
triggerAction: 'query'
});
So when the user typed in 3 chars, a query to the server is made showing the proper results.
Now I try to make the user input programmatically usint the doQuery() function of the combobox. After calling the doQuery() method, I want to seledct an Item via setValue().
cb.doQuery('myval');
cb.setValue('myval');
The problem is that setValue() can't select the propper value, because at the time it is called, the request started through doQuery() hasn't finished.
So I need something like a callback in which I could use setValue() - but doQuery() doesn't seem to have a callback function.
any ideas? thanks!
I'm answering myself bacause code formatting ist not avaiable in the comment.
Igor: it works but it feels like a ugly hack then a clean solution.
For a better understanding I explain the situation:
I have a GridPanel. When the user clicks on a row on this panel, I want to preselect the selected value in the combobox. Because there's a lot of data I want to lower it with using the doQuery-function of the combobox.
In the GridPanel's rowClick-event i have the following code:
var myrec = Ext.getCmp('mygrid').store.getAt(rowIndex);
mycombo.store.on('load', myfn1 = function() {
// When the store has finisihed loading, select item in the combobox
mycombo.setValue(myrec.data.customer_id);
// Remove the function assigend to the load event...
// ...(when user types directly to the combobox instead clicking on a row...)
mycombo.store.un('load', myfn1);
});
// setValue has to be called again, because the load-event doesn't fires
// when doQuery is called with same params
mycombo.setValue(myrec.data.customer_id);
// Call do query to fill the combo only with the relevant values
mycombo.doQuery(myrec.data.customer_id);
The ComboBox has a beforequery event that gives you the option to intercept the query, do your own store load instead and cancel the ComboBox query. Also, in your example you are saving the handler function to a variable and then calling un from within the handler. That's totally unnecessary, as you can pass the options {single: true} as the fourth parameter to on (third parameter is scope).
If I understand your question, you want to set the value of a combo to a certain value, say customer id 123. The problem is that the record for customer 123 is not loaded so you don't have any data in the store regarding that customer. Am I right?
What you would want to do then is (this is not necessarily correct for your situation, just a direction to get you started):
combo.on('beforequery', function(q) {
q.cancel = true;
var id = q.query;
combo.setDisabled(true);
combo.store.on('load', function() {
combo.setValue(id);
}, combo.store, {single: true});
combo.store.reload({
customer_id: id
});
return q;
});