I am using roweditor and inside the row i have a combo.
in the grid, the combo column is the symbol_id (number).
how do i make the combo/grid understand that symbol_id 22 is actually 'EURUSD'.
and force the grid display EURUSD and not 22.
Thanks.
this is my store:
'displayField' : 'symbol'
,'valueField' : 'symbol_id'
,SimpleStore({
fields: ['symbol_id', 'symbol']
,data: [[22,'EURUSD'],[23,'EURGBP'],[50,'USDILS']]
})
You can of course use a renderer for the column and pull the display value through:
renderer: function(value,metadata,record,row,col,store) {
return record.get("symbol");
}
http://www.sencha.com/forum/showthread.php?67488-3.x-Ext.grid.ComboColumn-amp-Ext.util.Format.comboRenderer
this is the solution.
Thanks anyway for trying!
Related
i trying to find some way to display/insert/update the information on the form where the information is dynamic. the extjs i currently using is Ext JS 7.1.x Classic
the schema are as below
name of item
cost price of the item
product code of the item
location ([latitude and longitude];rack number;shelves number)
remarks
For example the forms will have a list of location in the form for that item which i able to to add, delete and update each row of location?
data are as show below
PowerBank,10,MPB001,["000.1,111";2;2,"000.2,222";2;2,"000.1,111";1;2],My Power Bank
Earphone,4,MEP001,["000.1,111";2;3],My Earphone
i thinking of something like ListView or Datagrid?
For initial data, update data and insert you can use
form.setValues({
name: 'PowerBank',
cost: 10,
code: 'MPB001',
locationLatitude: '000.1',
locationLongitude: '111'
rack: 2,
shelves: 2,
remarks: 'My Power Bank'
});
Other than that you could use data-binding
data-binding
Let's say you have a grid and bind the selection:
xtype: 'grid',
bind: {selection: '{gridSelection}'}
And you have the selected dataset in your viewModel
data: {
gridSelection: null
}
Then you can add the data to the form like this:
items: {
xtype: 'textfield',
name: 'remarks',
bind: {value: '{gridSelection.remarks}'}
}
problem
you might run into a problem if you are trying to listen on the dirty states with data-binding. But you can solve this by making all fields not dirty after the data-binding triggers.
I have a property grid and we set the source for this from a controller. There is a date field that needs formatting. I checked the documentation but the example is not so easy to understand.
The grid view just has the grid defined. The controller gets the values from the server and then uses setSource to populate the grid.
I tried this:
sourceConfig: {
installationDate: {
renderer: Ext.util.Format.date('d.m.Y H:i:s')
}
}
How do I format the date using sourceConfig?
Provide a renderer function in your sourceConfig. You can use the utility function Ext.util.Format.dateRenderer to generate it. To set the format for the corresponding editor, use the date field's format config.
sourceConfig: {
'dateAttribute': {
renderer: Ext.util.Format.dateRenderer('Y-m-d'),
editor: {
xtype: 'datefield',
format: 'd.m.Y'
}
}
}
}
Also see this fiddle.
EDIT:
As pointed out in the comments below, it is important that the keys of sourceConfig match exactly with the keys as used in the actual source in order for the configuration to apply correctly.
I am using Extjs 4.2, so i have a grid with rowediting plugin. All works fine, I want to know how I can update one field value, depending on another field. I mean for example if in my grid I have field1, and field2, I need to update field3 value with field1 + field2 values when one of those were changed. Normally using jquery we can code a change event for each of the fields, but how i can do this on rowediting event?
Is this possible?
You can use edit events of rowedit as follow:
Sencha Fiddle : Grid RowEditor - Change cell value based on condition
grid.on('edit', function(editor, e){
/**
* here I am checking the column name to complete process
* you change what you want
*/
if (e.field == "name") {
e.record.set('result', parseInt(e.record.get('dummy')) + parseInt(e.record.get('age')));
}
})
You have to add editors to the columns, the editor is like any component, has listeners, type etc. then add a change listener
Example:
...
{
header: 'HeaderName',
dataIndex: 'man_peso',
type: 'number',
width: 50,
editor: {
enableKeyEvents: true,
listeners: {
change: function(c, e, eOpts) {
//here you can modify others components
}
},
xtype: 'textfield',
maskRe: /[0-9\.]/,
maxLength: 16
},
...
When you use RowEditor, the e.field value entirely depends on the field that was clicked on to edit the row.
To illustrate the problem:
In the previous answer, open the fiddle link (https://fiddle.sencha.com/#fiddle/4pj).
Double click the email field and change the name.
The handler will not update the result field as e.field will now be 'email' and not 'name'.
That is, Row Editor considers the field on which you click as the edited field. This does not make sense as it is a 'row' editor and is most probably used to edit multiple fields in the row.
To get the list of only modified fields, use e.record.getChanges(). These will give you only the modified fields and their new values.
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 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