In extjs6 label with databinding, how do I convert the bound value everytime it changes?
Right now I am using a viewmodel with formula, but it only hits this method on creation of the panel, I want it to hit the formula everytime I have an incoming change of the label value.
can someone see what I am doing wrong?
here is my label in view
columnWidth: 0.5,
xtype: 'label',
itemId: 'labelDateStatementId',
cls: 'myLabelCRM2',
bind: {
text: '{convertDateStatement}'
}
here is my formula in viewmodel
formulas: {
convertDateStatement: function (get) {
var me = this;
var myView = me.getView();
var label = myView.queryById('labelDateStatementId');
debugger;
}
it does hit the formula on view creation... but I need it to change everytime I change the source of the bind value of label.
maybe this solution will be good for You (setting data on view model directly):
Check example on fiddle
After 2 seconds change label on field.
Or You can bind a record to view model like this:
Check example 2 on fiddle
Related
Please see the following Fiddle: Bind store from a ViewModel to an xtype label
I am NOT able to get the record from my ViewModel's store to display in the xtype: 'label' item of my form.
This should be easy, but alas my brain is not able to work...
There is no way to create a bind descriptor for the first record of a store. You will need to implement a formula for this purpose.
In your view model:
formulas: {
firstTestStoreRecord: {
bind: '{testStore}',
get: function(testStore) {
return testStore.getAt(0);
}
}
}
Then use this in your view:
bind: {
html: '<b>{firstTestStoreRecord.test}</b>'
}
Here is the working fiddle: https://fiddle.sencha.com/#fiddle/25cf&view/editor
In version 7.4:
bind: {
html: '<b>{testStore.first.test}</b>'
}
Please refer to the following fiddle: Binding HTML Issue
When you select a row from the combobox on the left panel, it prints the bound value, along with some HTML in the form on right. When you then click on the button labeled as 'Test Update' it first clears the bound value in the drop down, and then is supposed to update the HTML to clear it, as well.
Problem is, that the update for the displayfield referenced in the Ext.ComponentQuery.query does not work in this order. If I do the update first in the fiddle it works, but if I try this in my actual app, it does not (in my app the setValue on the combobox DOES work though, but then leaves the HTML label - which I want to clear).
An ideas as to why this behavior is occurring would be most welcome.
You probably would want to use a formula for that, it simplifies the logic behind it.
viewModel: {
formulas: {
foo: function(get) {
var sel = get('peopleComboRef.selection');
return sel ? ('HTML Label: ' + sel.get('name')) : '';
}
}
},
then bind this formula to your displayfield.
{
xtype: 'displayfield',
itemId: 'displayTest',
bind: {
html: '{foo}'
}
}
fiddle: https://fiddle.sencha.com/#fiddle/24f5&view/editor
Although there are several ways to load the values of a record into a form within a window, in the specific case of using binding from a grid to a form (for example, to display the detail of the record) how to bind the same values to a form within a window (for example: to edit the record)?
FIDDLE: https://fiddle.sencha.com/#view/editor&fiddle/1stv
Pass the record in as part of the VM data:
var janela = Ext.create('APP.MyWindow', {
animateTarget: btn.getEl(),
viewModel: {
data: { users: selectedRow }
}
}).show();
I am using ext5 multiselect combo. If we select a value from the dropdown, say 'Other' and click outside to cancel the dropdown.
Now the value 'Other' will be shown in combo.
Again click the dropdown and select tha same value 'Other', it should remove 'Other' from its values. But rather it adds same value once again.
My code is given below:
xtype: 'combo',
emptyText: 'Retail BI',
name: 'chainRefId',
store: Ext.create('shared.store.filter.ChainRefs'),
displayField: 'name',
multiSelect: true,
valueField: 'chain_ref_id',
listeners: {
expand: function(){
this.getStore().load();
},
change: function(combo, newVal) {
if (!combo.eventsSuspended) {
var storeCombo = Ext.ComponentQuery.query('combo[name=storeId]')[0];
storeCombo.getStore().removeAll();
storeCombo.setValue(null);
var chainCombo = Ext.ComponentQuery.query('combo[name=chainId]')[0];
chainCombo.getStore().removeAll();
chainCombo.setValue(null);
}
}
}
Is there a solution for this?
Thanks in advance.
Your combo's store gets reloaded on each expand. Technically the record corresponding to the value you selected the first time disappears on the second store load, so the removing logic does not "see" it and therefore leaves it in the field.
Remove this:
expand: function(){
this.getStore().load();
}
and just use autoLoad: true on the store.
I have faced the same problem. I have provided a workaround for this. This fix holds good for tagfield too.
//on combo store load event
load: function () {
// I am assuming reference to combo
var rawVal = combo.getValue();
// If combo is multiselct, getValue returns an array of selected items.
// When combo is configured as remote, everytime it loads with new records and therefore removes the old reference.
// Hence, do setValue to set the value again based on old reference.
combo.setValue(rawVal);
// Here you can see, based on old reference of selected items, the drop down will be highlighted.
}
First of all, I am using Extjs 4.1.
I have a grid with property grid and I want to add a column of checkbox into the grid. The property grid code is as follows:
var grid = Ext.create('Ext.grid.property.Grid', {
tbars:[],
selModel: Ext.create('Ext.selection.CheckboxModel',{mode: 'MULTI'}),
columnLines: true,
renderTo: Ext.getBody(),
source: {
"grouping": false,
"autoFitColumns": true,
"productionQuality": false,
"created": Ext.Date.parse('10/15/2006', 'm/d/Y'),
}
});
However the checkbox selection model does not show up in the grid.
anyone can point me to the correct direction or property grid does not work with checkbox ?
Although the selModel property is documented in Ext.grid.property.Grid, this is only because Ext.grid.property.Grid extends Ext.grid.Panel. The problem is that this type of grid only has a fixed selModel and namely of type cellmodel. You can see its behaviour by clicking on a property (the property editor gets the focus and e.g a date proeprty shows a date picker). The cellmodel selModel is hard coded in the source code in the initComponent() method, so if you want to change that, you should write your own subclass in which you overwrite that.