How can I extract the context of the component to which formula is bound? I want to get the context of label1 in the get() of formula1.
I have a view component
{
xtype : 'label',
name : 'label1'
bind : {
text : '{formula1}'
}
}
in view model
formula : {
formula1 : {
get : function(param){
//------------------ how to get the name of the label
here to which this formula is bound ------
}
}
}
Theoretically, you could use ComponentQuery and find the component you need but I advice strongly against this approach. Much better is to bind also name. Then you can use this.getName() to access value 'label1'.
Related
How to apply conditions in bind?
In view let
{
xtype : 'label',
bind : {
text : '{//--- set text as per the condition }',
hidden : '{//should be true if 'param' in VM is 1 or 2 else should
be false}'
}
}
in view model, 'param' is a data variable. If value of
param=1, text should be one,
param=2, text should be two,
param=3, text should be three.
Is this possible without formula by applying conditions directly in view?
{
xtype : 'label',
bind :
{
text : '{textVal}'==0?'Test':'TEST1234',
hidden : ('{param}'==1 || '{param}'==2)?true:false
}
}
In the associated viewModel, if one has the property param in data config, then one can use it for binding along with condition checks as mentioned above. If the param value is being changed dynamically, (i.e, this.getViewModel().setData('param', 1)) then still the code will work in hiding the component dynamically. The same applies with the other config, viewModel -> data:{textVal:0,param:1}. If one has an object inside the data, like data:{ config:{ textVal:0 }, param:1 }, One can use bind:{ text:'{config.textVal}' //along with ur condition check }
I'm trying to create model objects on the fly using Backbone.Collection.create...but I note that the collection uses its url and not the model's url...
Is this how it suppose to work? Can I override it on the fly just for this particular .create()?
You can specify the options attribute that contain the url property :
Backbone.Collection.create({
key: "value",
...
}, { url : 'yourUrlHere' });
I am new to ExtJs.
I have been facing a problem in panels for getting panel html content.
xtype : 'panel',
id : 'first_block',
html : '<p>Hi this is belongs to first block.</p>',
listeners : {
render : function(c) {
c.body.on('click', function() {
alert('' + this.id);
alert(Ext.getCmp('first_block').items.getAt(0).getValue());
});
}
I am not getting html content, but i am getting id like "first_block-body".
Thanks in advance.
The html property defined the HTML you want in the content of your component, in this case an Ext.Panel.
Ext.Panels create a few layers of divs in order to provide things like headers, footers, toolbars, etc.
If all you want is a div with some content, you instead want to use an Ext.Component. Components don't have a body, so a couple things change in your code.
xtype : 'component',
id : 'first_block',
html : '<p>Hi this is belongs to first block.</p>',
listeners : {
render : function(c) {
c.on('click', function() {
alert('' + this.id);
alert(this.el.dom.innerHTML);
}, this);
}
Notice that I added a third parameter to your on call, which specifies the this scope of the function call. I also edited your alert to print out the innerHTML of the element, assuming that's what you were trying to do.
UPDATE:
If you are going to use this component in a layout, it may need to be able to have its height and width set, meaning it needs to be of type box in order to be an Ext.BoxComponent.
Ext.getElementById('yourId').innerHTML
I'm looking for the support of i18n in the ExtJS,and have seen in the net about reading the resource bundles and replacing the component's labels depends upon the locale.
Though I've some doubts
How about the data which got stored in the DB as unicode and I want
populate those into ExtJs's component's
Is rendering the labels of the Extjs components into different languages only possible?
There's a extension for this called Ext.ux.Localizer
https://github.com/devotis/Ext.ux.Localizer
With this component you can translate more than just labels through localizableProps:
localizableProps : {
// Ext.button
button : ["text", "tooltip"],
// Ext.form.field
checkboxfield : ["fieldLabel", "boxLabel"],
field : ["fieldLabel"],
filefield : ["fieldLabel", "buttonText"],
radiofield : ["fieldLabel", "boxLabel"],
// Ext.form
checkboxgroup : ["fieldLabel"],
fieldcontainer : ["fieldLabel"],
fieldset : ["title"],
label : ["text"],
// Ext.grid
gridcolumn : ["text"],
panel : ["title"],
tooltip: ["html"],
image: ["src"]
}
You can even translate the data in some columns through localizableColumns:
localizableColumns: [ //add grid column renderers
"status_description", "bounced"
]
It does not translate the values of fields in forms.
I have a custom 'class' which extends Ext.grid.GridPanel. I would like to have a column of checkboxes (example which uses Ext.ux.grid.CheckboxColumn - just the thing i need).
My goal is to use it with pre-generated configuration object, including column model (it's generated by a PHP script), so I overloaded initComponent method to add column inside it:
MyGrid = Ext.extend
(
Ext.grid.GridPanel
,{
initComponent : function()
{
this.columns.push({
xtype : 'checkcolumn'
,header : 'Show on map ?'
,dataIndex : 'showonmap'
,width : 130
});
Ext.apply(this, {columns:this.columns});
MyGrid.superclass.initComponent.apply(this, arguments);
}
}
);
Such thing worked with ActionColumn component, but this code fails, because it can't find constructor (probably for CheckColumn).
How should I modify my code or CheckColumn to make this thing work?
Thanks in advance!
If the constructor can't be found, you must not have imported the CheckColumn class properly. Try this to see if the constructor can be found directly:
MyGrid = Ext.extend
(
Ext.grid.GridPanel
,{
initComponent : function()
{
this.columns.push(new Ext.ux.grid.CheckColumn({
,header : 'Show on map ?'
,dataIndex : 'showonmap'
,width : 130
}));
Ext.apply(this, {columns:this.columns});
MyGrid.superclass.initComponent.apply(this, arguments);
}
}
);
If you get an exception that Ext.ux.grid.CheckColumn is not a constructor, then you know for sure the classes isn't avaiable. Make sure that you have included the class properly, and you can verify using Firebug that the source was actually included and is available.