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.
Related
The requirement is to have 'inline editing' of some cell in Tabulator based table.
The cell requires a custom editor since the input is a custom component (which is already used in another form, outside of Tabulator).
Our environment is React + Tabulator (v4.7) + BlueprintJS as the components library.
The problem is that the component won't fully open as a custom editor in Tabulator, while working fine outside of Tabulator, in a regular form.
Why the component won't fully open?
The custom component serving as the 'editor' for this cell is using Blueprint (BP) 'popover' so it has a popover target and a content. This is how it looks like in a form edit:
The problem is that upon clicking, the popover target is being rendered but the popover content is not, so the custom 'dropdown' input component is never appearing:
Relevant code sections
Tabulator column definition:
{
title: "Some Col Title",
field: "someField",
formatter: someFieldFormatter,
editor: "someFieldEditor" as Tabulator.Editor,
editorParams: (cell) => {
return { cell, zones: zonesDataTree };
},
},
Defining custom cell editor:
Tabulator.prototype.extendModule("edit", "editors", {
someFieldEditor: (
cell: CellComponent,
onRendered: Function,
success: Function,
cancel: Function,
editorParams: SomeFieldCellEditorParams
): Element => {
const elem = document.createElement("div");
// SomeFieldCellEditor is a React component that wraps around the same component used in
// the "regular form" scenario mentioned in the screenshot
const someFieldCellEditorComponent: any = React.createElement(SomeFieldCellEditor, {
theData: editorParams.data,
});
ReactDOM.render(someFieldCellEditorComponent, elem);
return elem;
},
});
This is happening because the element is contained inside of the cell.
To prevent corruption of the table layout, tabulator cells have overflow:hidden defined on their CSS.
Most dropdown libraries have a an option that lets you set where in the DOM the list should be appended. You can use this potion to append the list to the body tag which should resolve the issue.
On a side note, did you know that Tabulator comes with built in Select and AutoComplete Editors
I am provided with built in extjs components classes.
I cannot change them as i am working on plugin.
I cannot override them as there are certain things which cannot be
predefined.
And also I want to change component for particular case, not all
cases.
Now If it will be possible that I pick that component from DOM,
change it any of property and render it there onwards. If it could
be done, then my work become lot easy.
Its completely a scenario. But still for ease in understanding, I am adding a sample code.
var tabPanel = Ext.create('Ext.tab.Panel', {
width : 300,
height : 200,
activeTab : 0,
items : [
{
title : 'Tab1',
bodyPadding : 10,
items : [
{
xtype : 'button',
text : 'B1'
}
]
},
{
title : 'Tab2',
items : [
{
xtype : 'button',
text : 'B2'
}
]
}
],
renderTo : Ext.getBody(),
autoRender : true
});
// Change title of tab panel
tabPanel.items.each(function(item) {
item.title = "text"+Math.random();
});
Now I want to remove this already rendered tab panel. And want to render it upon my choice wherever i want.
After lot of search, I find solution to problem. We can use doLayout() or update() function of component to fulfill purpose.
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'.
how to add close icon to the combobox list items at right most
Ext.define('ezdi.view.SaveSearchComboboxView', {
extend : 'Ext.form.field.ComboBox',
alias : 'widget.saveSearchComboboxAlias',
queryMode : 'local',
id : 'saveSearchComboId',
store : 'SaveSearchComboboxStore',
emptyText : 'Saved Searches',
displayField : 'searchQueryName',
valueField : 'searchQueryId',
lazyInit: false
});
You can do this by adding triggerXCls and onTriggerXClick to specify any number of additional trigger icons, where "X" is the position of additional trigger.
For example, to add a "clear" icon, you might do something like:
{
...,
id: 'saveSearchComboId',
trigger1Cls: 'x-form-clear-trigger',
onTrigger1Click: function() {
this.clearValue();
}
}
Keep in mind there are only a few "default" trigger icons, which can be found here (for classic theme): ext/resources/ext-theme-classic/images/form. These each have their corresponding "x-form-XYZ-trigger" class. For a different trigger icon (like a "close" icon or an "add" icon), you'll need to create your own images as well as the appropriate CSS class that you can apply to triggerXCls.
See this tread for more info: http://www.sencha.com/forum/showthread.php?190886-How-to-reset-a-Combobox-or-Multiselect-to-no-values-selected
So, I got a data store in my code that I'm loading in a function. In that store I want to use the each method to append each record to the body of a panel in a certain format.
What I'm trying to figure out is how to use this "each" method. Has anyone ever had to use it before? I'm relatively new to functions and programming in general so I'm trying to figure out what the "fn" and "scope" are relative to my own code.
Any help would be awesome if anyone has used this method in the ExtJS framework before.
Use Dataview for your case. Add the store and the XTemplate to your dataview and add this dataview as an item to your panel. It will be something like this:
this.store = new Ext.data.JsonStore({
url : 'myproxy.php',
baseParams : {
action : 'get_basket_files'
},
root : 'rows',
id : 'filename',
fields : ['filename', 'filepath', 'filesize', 'fileclass']
});
this.filesTemplate = new Ext.XTemplate(
'<div class="files_container"><tpl for=".">',
'<div id="{filename}" class="basket-fileblock"><div class="{fileclass}"></div>',
'<div class="filetext">{filename}</div></div> ','</tpl></div>');
this.filesTemplate.compile();
this.filesDataView = new Ext.DataView({
itemSelector : 'div.basket-fileblock', //Required
style : 'overflow:auto',
multiSelect : true,
store : this.store,
tpl : this.filesTemplate
});
var panel = new Ext.Panel({
layout : 'fit',
items : [this.filesDataView]
});
Here XTemplate is the HTML template of each of the items. Have a look at the ExtJS documentation which provides a number of examples for XTemplate.
And for an example, ExtJS each function can be used this way:
Suppose an array of items is myItems. So,
Ext.each(myItems, function(eachItem){
//Do whatever you want to do with eachItem
}, this);
It sounds like you want an Ext.DataView.
DataView use Template or XTemplate to create a rendering of data in a store.
So you instantiate a configured dataview, including a reference to your store, and the template to use, and add that DataView to your panel.