elmasse / elmasse-bundle Goto Github PK
View Code? Open in Web Editor NEW[UNMAINTAINED] A Resource bundle implementation for ExtJS
[UNMAINTAINED] A Resource bundle implementation for ExtJS
This bundle should use a custom prefix.
It is assumed that all classes prefixed by Ext are internally written Sencha classes. (community standard)
should be renamed to something like:
Elmasse.ux.i18n bundle
We should load the files in the following order:
Application.properties
Application_xx.properties //1
Application_xx-YY.properties //2
1 if lang is specified as 'xx' or 'xx-YY' (for instance: 'en', 'en-US');
2 if lang is specified as 'xx-YY'
Load order should be reversed as from today. Load the bottom-up from less to more specific and override the keys.
Hey,
This might be more of an example to put into the demo, but if you were build a Single Page App, then you would need the ability to change the language after the app is initialized.
The trivial approach is to set a cookie or local storage and then reload the page. But if the preference is stored in the user model (because you also send server generated notifications in the preferred language, perhaps) then you will get the language after everything is initialized. This is a normal usecase, I would think.
Reloading the page once you get a different language from the user (and using cookies et. al.) is a bad approach. There should be a better solution.
If it changes how you create your app, so be it, but that should be demonstrated at least.
It ist posibile that the bundle already has loaded all files, when the following onReady(fn)-Function is called.
I fixed this problem with an additiional attribute "isReady". Here is the code-snipped:
/**
* @method: onReady
* The fn will be called when the Bundle file is loaded.
* @param: fn {Function}
*/
onReady: function(fn){
this.readyFn = fn;
this.on('loaded', this.readyFn, this);
if(this.isReady)
{
this.readyFn.call(this);
}
},
/**
* @private
*/
onBundleLoad: function(store, record, success, op) {
if(success){
this.isReady = true;
this.fireEvent('loaded');
}
},
I’ve noticed that the bundle tries to look for something like “MyApp_en-.properties” if the language code doesn’t have “-US” or “-CN”, so it would have problem if the language is just “en” or “ja”. Can you please take a look?
Thanks.
Need to add some formal unit test.
Currently, the check only does "if (values)" but it should do "if (values.length)" to make sure values were passed in. Sometimes we need a tokenized stringed translated but we want to leave the token placeholders in place for other downstream processing.
I took a look at your bundles cause I think it's what I need as far as organizing resources goes, but I'm not sure. the clone was severely lacking examples and use cases.
I'm building a language that dynamically generates MVCS/W based on data sets from multiple sources (aws rds/aurora, dynamo, mongo, postgre, etc.) and uses those to create ExtJS code, and Swagger APIs. Anyhow, I like the idea of bundling apps together in a way where the resources are accessible and less disorganized. You don't state your rationale in the Readme.md ... if you have time hit me up on hc:irc(freenode:disruptive) or [email protected] https://www.hipchat.com/invite/513222/8ed949451ff5a195079c84e1bd1e633b?utm_campaign=company_room_link
Here's the project I've been barely starting, much of the code is crypto and/or written in go/php/ruby/bash and designed for docker/heroku with elastic beanstalk or EC2 AMI.
https://github.com/largesoft/skel
I'm still at odds as to whether or not to generate columns & fields from JSON and load them with the Ext.Loader, or if I should just have the server-side language create the models and corresponding stores, grids, etc.
For instance: right now I can generate columns in JSON or array
http://a.badasscrm.com/skel/make.columns.php?c=contacts
http://a.badasscrm.com/skel/make.columns.php?c=contacts&f=array
It has become apparent to me that it's not common to pull the fields/columns/associations/validations from JSON, but rather to write the models. So I guess I'm leaning more towards just creating the models dynamically and linking it to an api. But I'm gonna make my own shorthand for it using functions like this:
function createModel(fields) {
return Ext.define('Rex.store.reading.Skel' + Ext.id(), {
extend: 'Ext.data.Model',
fields: fields,
proxy: {
type: 'memory',
reader: {
type: 'json',
totalProperty: 'tc',
root: 'Result'
}
}
}
});
The end result would allow the user to create sophisticated apps, because the software is designed to allow them to manage fields/columns across a broad spectrum or applications.
https://www.lucidchart.com/documents/edit/4a9babed-a1be-46e6-8f18-aebefcbbca0e?shared=true&
I've been doing web a long time, and it's a very fun project cause of the end goal for me. I love AWS and am devout ;)
.... So I'm not sure if this fits in with what you are doing... but yours is the closest thing I've found to a packaged solution that can be distributed for ExtJS open source with software like mine in container apps for the purpose of rapid deployment.
Cheers!
<< sorry for the long rant... I do that.... haha >>
I started an app with ExtJS 5 and checked that this plugin does not work on it.
First I deleted this snippet of code and it started working again.
But with json format I had issues again:
Error: Uncaught TypeError: undefined is not a function at line 29 of Json.js:
record = new Model(undefined, me.getId(node), node, convertedValues = {});
I tried to solve this issue but failed.
Just for curiosity, I checked that it does not show any error with property format but it always shows value my.property.undefined
.
Hi,
Is there any way I can switch between different languages at runtime??
Thanks In Advance.
Hello elmasse:
First, i was implementation Ext.i18n.Bundle in a simple environment it's running.
But when i do this again in MVC architecture, it doesn't run. I will find the problem? but i want to know, the Ext.i18n.Bundle is support MVC ?
We should be able to load not only .properties files but as well json using the same rules as for properties keys load and override.
Hi,
I tried to use the i18n bundle, but it failed to work and shows me the below error in chrome.
I followed the steps as mentioned in Readme, except that I placed the properties file in resources/i18n folder.
Ext.Loader.setConfig({
enabled: true,
paths: {
'Ext.i18n': '<%=request.getContextPath()%>/resources/i18n'
}
});
Ext.onReady(function(){
Ext.application({
requires: ['Ext.i18n.Bundle'],
name: 'Mot',
bundle: {
bundle: 'Application',
lang: 'en-US',
path: 'resources/locale',
noCache: true,
format: 'json'
},
launch: function() {
var myForm =Ext.create('Ext.FormPanel',{
width:350,
height:200,
id:'loginForm',
title: Mot.getApplication().bundle.getMsg('app.name'),
cls:'loginform',
//style: 'margin:7cm 1cm 4cm 14cm;',
layout:'vbox',
items:[{
xtype: 'textfield',
fieldLabel:'User Name', //bundle.getMsg('username'),
cls:'alignment',
//style:'margin:10px 10px 10px 10px',
name: 'username',
id:'username',
maxLength:20,
minLength:5,
allowBlank: false
}, {
xtype: 'textfield',
fieldLabel: 'Password',
cls:'alignment',
//style:'margin:10px 10px 10px 10px',
name: 'password',
id:'password',
maxLength:20,
minLength:5,
allowBlank: false
}],
buttons: [{
text: 'Login',
id: 'btnLogin',
handler: function () {
//console.dir(Ext.getCmp('loginForm'));
var form = Ext.getCmp('loginForm').getForm();
alert(' form ');
if (form.isValid()) {
var login=Ext.create('resources.controllers.LoginController');
login.submitLoginForm();
form.reset();
}
}
}]
});
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region:'center',
items:myForm
}]
});
}
});
});
I am using ext-4.1.1a build.
Am I missing anything?
Thanks,
Madan Narra
When using Ext JS 6.2, an error is thrown when me.getConfigurator() is called in the Bundle.js file.
Hi,
I have run into a problem while using elmasse-bundle with Sencha Ext JS v6.2.1 application. I am aware that currently there is no support for MVC architecture, but I was still able to somehow use this bundle in an MVC application having Sencha Ext JS version 6.0.2 with a few compromises, that I was OK with. But now I am unable to run the same MVC application having Sencha Ext JS version 6.2.1.
I didn't use 'sencha app upgrade' cmd for upgrading my application, instead I generated a fresh Sencha Ext JS v6.2.1 application and copied all MVC files. I followed all the steps in the documentation to install a fresh copy of elmasse-bundle. But I am getting the following error while running the app in the browser.
Uncaught TypeError: me.getConfigurator is not a function(…) Bundle.js?_dc=1480744665177:278
No idea whats's going wrong!!
Thanks In Advance.
bundle property inside bundle is less descriptive, name could be a better approach.
Dear elmasse:
I have a problem here. I create a combobox and use "Ext.i18n.Bundle" to set the value of displayfield. I found the renderer always get displayfield value, not valuefield. And this is only occur in IE, it is correct in firefox. Do you know why happen about this problem?
this is a part of code:
...
{ header: "Policy", dataIndex:'policy', flex: 1, sortable: true, align:'center',
renderer:function(value){
return (value.indexOf('ro') > -1 )?
Ext.i18n.appBundle.getMsg('Sharev.READY_ONLY'):
Ext.i18n.appBundle.getMsg('Sharev.READY_WRITE');
},
editor:{
xtype:'combobox',
mode: 'local',
triggerAction: 'all',
forceSelection:true,
displayField:'label',
valueField:'policy',
store:{
xtype: 'jsonstore',
fields:[ 'label', 'policy' ],
data:[
{label: Ext.i18n.appBundle.getMsg('Sharev.READY_ONLY'), policy: 'ro'},
{label: Ext.i18n.appBundle.getMsg('Sharev.READY_WRITE'), policy: 'rw'}
]
}
}//eo editor
}
Hi,
My app is based on simple MVC architecture.
How do I change the language dynamically in the controller?
I find that the latest elmasse-bundle(version 1.1.0) examples are based on MVVM architecture.
Thanks In advance.
One feature that would be exceptionally useful is internal property references.
Lets say I have the properties for OK and Cancel buttons. So I'm going to put them in app.common.button.ok.label and app.common.button.cancel.label.
So for all my alerts and what not, I'm going to use those two for the buttons. Great. Except that when I don the "Send Message" window, what I want is "Send" and "Cancel" So now, do I use app.sendmessage.button.send.label?
So far its not to onerous. Simply create new properties for the exceptions.
Invariably, you run into some situation where for most of the languages you can use the "common" value but in this one, there is a better choice that can be used. So you end up with several languages where the value is the same as elsewhere and one where it is different.
It would be nice if we could refer to other properties in some property. So in my exmaple, I'd have:
app.sendmessage.button.send.label:Send
app.sendmessage.button.cancel.label:@app.common.button.cancel.label
I would take the same approach as Android, and make it all or nothing. If the entire value (trimmed of leading and following white space) is the name of a property, replace that string with the value of the property.
When requesting a localized value the call stack is:
-> i18n.getMsg(key)
-> Store.getById(key)
-> Record.getId()
In Ext-JS 4.2 beta Record.getId() was:
getId: function() {
return this.get(this.idProperty);
}
and is now replaced by:
getId: function() {
return this.get(this.idField.name);
}
Setting idProperty in Property.js and Json.js is not enough as it just override the property and does not reinitialize idField (which remained set to 'id')
Doing this will do the trick:
Ext.merge(Model.prototype, {
idProperty: this.getIdProperty(),
idField: new Ext.data.Field(this.getIdProperty()),
idgen:{
getRecId : function(rec){
return rec.internalId;
}
}
});
Hope this help ;)
This does not seem to work:
Ext.create(Ext.define(null, {
extend: 'Ext.button.Button',
text: { type: 'bundle', key: 'Contact' }
}), { renderTo: document.body })
Getting error message as posted per PM.
Add support for messages like "The value is {0}" with getMsg('key', [values])
using Test sample included with Bundle getting this in 4.1
me.createFieldAccessExpression is not a function
[Break On This Error] code.push(' dest', ...on(field, varName, 'source'), ';\n');
ext-all-debug.js (line 19350)
4.0.7 works fine
When I use the .properties file which contains simple chinese, it shows messy code on the page. could you please see it?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.