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.
Related
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
Is there an ability to set angular filters to formly fields? I've tried adding a "filter: 'uppercase'" to the templateOptions object, but to no avail, the input field remains lowercase.
And, if so, is adding parameters just as simple as "'myfilter:param1:param2'"?
Thanks in advance
You could do it, but to make it work like that, you would need to make it an HTML template.
The easiest way would be to create a service and just set flags in the templateOptions that would determine if those functions get called and then return the values from expressionProperties that check the flags values.
For instance:
{
key: 'Upper',
templateOptions: {
label: 'Name to Upper',
upper: true
}
},
expressionProperties: {
'templateOptions.upper': function($viewValue, $modelValue, $scope) {
if($scope.to.upper) $viewValue = ....//CALL UPPER CASE FUNCTION
return $viewValue;
}
}
Alternatively, if this is a one time thing, you could simply do $viewValue = $viewValue.toUpperCase();
In extjs, is there any way to change a property for a specific type of control across the entire project from one place, essentially making it the default value for this property on all new instances of that class?
In particular, I want to change all the msgTarget's on all field controls from 'qtip' to 'side'.
This should work:
Ext.onReady( function() {
Ext.override( Ext.form.Labelable, {
msgTarget: 'side'
});
});
See this answer for more info.
The only thing that is working for me is something like this:
Ext.define('FooMsgTargetOverride', {
override: 'Ext.form.field.Base',
msgTarget: 'under'
});
I have an Ext TabPanel, and I am trying to set the hidden property for one of the Tabs, programmatically. I am able to select the object and call methods such as disable() and enable() but so far have been unable to find a means by which I can manipulate the Tab's 'hidden' property.
The Tab is defined as
{
id: "view-task",
hidden: false,
title: "View"
}
and the code attempting to manipulate it
twin = ( Ext.getCmp('view-task'));
twin.disable();
The above call to disable works, so the component is being correctly selected but I do not know how to manipulate the hidden property.
Any assistance will be much appreciated.
N. Euzebe
Try this:
var tabs = Ext.createWidget('tabpanel', {
items: [{
itemId: 'home',
contentEl:'script',
title: 'Short Text',
closable: true
}]
});
tabs.child('#home').tab.hide();
You can find this code in examples on the API page
You haven't explained which version of ExtJS you're using. But in version 3.x you can do the following (I don't know, but it might also work in ExtJS 4.x):
var tabPanel = Ext.getCmp('myTabPanel');
var tabToHide = Ext.getCmp('myTab');
tabPanel.hideTabStripItem(tabToHide);
To show the tab again:
tabPanel.unhideTabStripItem(tabToHide);
Hope this helps you :)
Extjs 3.3.1 have the method setRenderer() as
/**
* Sets the rendering (formatting) function for a column.
*/
setRenderer( Number col, Function fn ) : void
Now I don't get any method in ExtJS 4 of setRenderer. So How can I format grid column at runtime in ExtJS 4.
When you're creating your grid you can define the renderer on each column...
Ext.create('Ext.grid.Panel', {
title: 'Grid Sample',
store: Ext.data.StoreManager.lookup('yourStore'),
columns: [
{header: 'Product Description', dataIndex: 'description'},
{header: 'Cost', dataIndex: 'cost', renderer: nameOfRenderFunction },
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
And then you can define your function in a global scope...
function nameOfRenderFunction(v) {
//do something to v
return v;
}
What I did was set the renderer after the fact. After my application launched, I got the instantiated component and added a renderer in my controller's onLaunch() function like this:
// An example renderer
var myComponentsRenderer = function( value ){
return value++;
};
// Get the instantiated component
var myComponent = Ext.ComponentQuery.query( "#myComponent" )[0];
// Attach the renderer
Ext.override( myComponent, {
renderer : myComponentsRenderer,
});
The reason I like this method is because I am able to put the renderer functions in my controller and keep logic out of my view. It helps me organize my code better.
it looks like the the way to do it is mentioned in passing in this post on the sencha forum.
You can use a grid's reconfigure method to swap in a different list of columns (along with renderers) however this does have the major downside that you'll have to totally respecify the columns in their entirety.
Did you find a better way? I really dont like the fact it forces you to put renderers in a place where they can't be tested and can't access state in a none static way.
However it seems the cure is worse than the disease in this case as you'd end up taking what is very definitely view code out of the view.
Sometimes it feels like they didn't really think about the design of these things very much :(