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
Related
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
I have few Panels in my page, being created dynamically regarding the type of data that should be presenting.
I'd like to add checkbox to the title row of a particular panel. I identify this panel by it's properties (like it's name\ title and fields count).Then I add the checkbox like that:
newPanel.header.items = [
{
xtype: 'checkbox',
boxLabel: 'some text'
}
];
But for some reason, this checkbox is being render to all panels in the page.
I'm sure that the above code happening only once - I've put an alert to check that.
Can I avoid it and make the checkbox appears only on one specific panel?
Can someone point out that why checkbox appears in all of my dynamic panels there?
You should use the "add" method or the "setItems" method of the parent container (your header container I suppose), ie:
var myPanel = Ext.create('Ext.panel.Panel');
var myHeader = Ext.create('Ext.container.Container');
myPanel.add(myHeader);
myHeader.add({xtype: 'checkbox'});
Try below code
newPanel.getHeader().add({
xtype: 'checkbox',
boxLabel: 'Some Text'
});
Here is Fiddle for your reference.
This is how I set up my selection model for my grid :
var selM = Ext.create('Ext.selection.Model', {
mode: 'SINGLE',
toggleOnClick: true,
allowDeselect:true
});
And then in my table I add this as a configuration paramater :
var packageGrid = Ext.create('js.grid.MyGrid', {
selModel: selM
});
The MULTI selection is disabled, which is great. However now nothing remains selected. If I click on a row the highlighting disappears as soon as I move the mouse away.
This could be an extjs bug. I have tried the other parameter 'SIMPLE' as well.
Here is a fiddle which shows my problem :
http://jsfiddle.net/fgkb8yw5/1/
RowModel is the default so you can simply use:
selModel: {
mode: 'SINGLE'
}
Example: http://jsfiddle.net/8mra2het/1/
It's not a bug, Ext.selection.Model is the abstract class - which shouldn't be instantiated directly. Normally - when you specify the selModel declaratively, the grid component will implement one of the grid-context appropriate sub-classes:
Ext.selection.CellModel
Ext.selection.RowModel
I updated your fiddle using RowModel to demonstrate.
setValue : function(text) {
Ext.get('id').dom.value = text;
console.log(Ext.get('id').dom.value);
}
This piece of code sometimes stops working. My input is result of UI interaction. After setting the text several times value is not visually updated. console.log() always returns the correct result.
Any ideas how to visually refresh the element or what might cause the problem?
DOM manipulation is not a good way, always try to solve issues in framework level.Try like the following
Ext.getComponet('id').setValue(text);
Ext.get is not recommended if you have a big form as it will have to got through all objects looking for your Id.
Instead you can user code like below
nameTextBox= new Ext.form.TextField({
xtype: "textfield",
fieldLabel: 'Name ',
id: 'txtName',
name: Name',
allowBlank: false
})
And then use your set function
setValue : function(text) {
nameTextBox.value = text;
console.log(nameTextBox.value);
}
Ext.get('id').setValue('text');
[notes]
Ext.get() returns an Ext.Element, which has a set method for setting various attributes for a HTMLElement.
In ExtJs I would like to achieve the equivalent of:
<input type="radio"><label><input type="text"></label>
Where the input box is associated to the radio button.
new Ext.form.RadioGroup({
id:"alerts",
items: [
new Ext.form.Radio({
boxLabel:'Now',
}),
new Ext.form.Radio({
boxLabel:'On',
})
]
);
I would like the "On" label to have a Ext.form.TextField next to it.
I have tried adding a Ext.form.TextField to the RadioGroup but it will not show (as I assume its because its not a Radio) and I am unable to add items to the Radio object.
Any advice apprecaited, thanks.
Add an <input/> element in the boxLabel, then on the RadioGroup render event create a TextField and apply it to that element
new Ext.form.RadioGroup({
id:"alerts",
items: [
{boxLabel: 'Now',},
{boxLabel: 'On <input id="on_date" type="text"/>'}, // contains <input/> id is "on_date"
],
listeners: {
change: function() {
// really, check if "on" was clicked
if(true) {
Ext.getCmp('on_date_field').focus();
} else {
// otherwise, disable the field?
}
},
render: function() {
new Ext.form.TextField({
id: 'on_date_field',
applyTo: 'on_date', // apply textfield to element whose id is "on_date"
});
}
}
});
I've confirmed that this works with TextField, and although I haven't tried it, it should work with DateField or ComboBox too. Also untested, but instead of creating an <input/>, you could create a container element and create the TextField and renderTo that element.
I don't think that's possible unless you override the RadioButton class and change its rendering logic (and I think that would be more complex than you would think to make a textfield render correctly the way you proposed). A better approach would be to simply add the radio and the textfield as two separate fields and link them programmatically. In Ext 3.2 you could use a CompositeField to do this easily. In the radio's handler fn you can set focus to its associated textbox or whatever other logic you'd need.