I have written custom validations like below
Ext.apply(Ext.form.field.VTypes, {
valInt: function(v) {
return /^(\d+(,\d+)*)?$/.test(v);
},
valIntText: 'Must be in the form #,#',
valIntMask: /[\d\,]/i
});
It works. But i want to make all such custom validation in a single file and then load it or auto load it. How do i do it?
I can do like below in app.js
Ext.onReady(function() {
Ext.apply(Ext.form.field.VTypes, {
valInt: function(v) {
return /^(\d+(,\d+)*)?$/.test(v);
},
valIntText: 'Must be in the form #,#',
valIntMask: /[\d\,]/i
});
});
But then the app.js file will become big after all validations.
According to the documentation you can create an override, like:
Ext.define('Override.form.field.VTypes', {
override: 'Ext.form.field.VTypes',
valInt: function(v) {
return /^(\d+(,\d+)*)?$/.test(v);
},
valIntText: 'Must be in the form #,#',
valIntMask: /[\d\,]/i
});
In your app.json there is a overrides key that declares the override directories, it looks like:
/**
* Comma-separated string with the paths of directories or files to search. Any classes
* declared in these locations will be automatically required and included in the build.
* If any file defines an Ext JS override (using Ext.define with an "override" property),
* that override will in fact only be included in the build if the target class specified
* in the "override" property is also included.
*/
"overrides": [
"overrides",
"${toolkit.name}/overrides"
],
According to #CD..
1) I've found the overrides folder in my app
2) put this VTypes.js file in the root of overrides folder:
Ext.override(Ext.form.field.VTypes, {
digitsOnly: function (value) {
return this.digitsOnlyRe.test(value);
},
digitsOnlyRe: /\\d*$/,
digitsOnlyText: 'Use digits only!'
});
Now all works, thnx all
Related
I'm working on Ext JS MVC app, that needs to be localized. Trying to reproduce official docs (http://docs.sencha.com/extjs/6.2.0/guides/core_concepts/localization.html).
Locale file load correctly.
Console message:
[W] Overriding existing mapping: 'viewmodel.users' From
'clt.locale.en.view.users.UsersModel' to 'clt.view.users.UsersModel'.
Is this intentional?
but overriding values don't display (they should be grid columns headers.
Model looks like this:
Ext.define('clt.view.users.UsersModel', {
extend: 'Ext.app.ViewModel',
requires:[
// something
],
// singleton: true,
data: {
key1: 'value1',
key2: 'value2',
keyN: 'valueN',
},
stores: {
// something
}
});
Values binding to view like this:
bind: { text: '{key1}' }
If I make this model singleton, localization starts working (grid headers displayed localized values), but grid data is empty.
So, what's the problem? Help me understanding it.
Update. Problem resolved. I found thread on Sencha forum with solution: add localized elements in config object in localization file. Example:
Ext.define('clt.locale.en.view.users.UsersModel', {
override: 'clt.view.users.UsersModel',
config: {
data: {
key1: 'value1',
// some other keys
}
}
});
Warnings are not a good sign. In your case, you don't apply an override like you should. The message
[W] Overriding existing mapping: 'viewmodel.users' From 'clt.locale.en.view.users.UsersModel' to 'clt.view.users.UsersModel'. Is this intentional?
says that first, clt.locale.en.view.users.UsersModel (your localized version) is loaded, and after that, clt.view.users.UsersModel (non-localized version) is loaded and completely replaces the localized version.
What you want to do is the following:
Ext.define('clt.view.users.UsersModel', {
extend: 'Ext.app.ViewModel', // <- EXTEND ViewModel class
// define your locale-agnostic user model here
});
Ext.define('clt.locale.en.view.users.UsersModel', {
override: 'clt.view.users.UsersModel', // <- OVERRIDE implementation in the overridden class
// define your localized properties here.
});
This should remove the warning. Then you can instantiate the UsersModel
Ext.create('clt.view.users.UsersModel', {
but you get a localized version of it.
I want to create a custom property editor, that makes use of the media picker. Right now my controller looks like this:
angular.module("umbraco").controller("My.MediaCropperController",
function($scope, dialogService) {
$scope.mediaPicker = {
view: 'mediapicker',
value: null, // or your value
config: { disableFolderSelect: true, onlyImages: true }
};
});
And my view looks like this:
<umb-editor ng-controller="My.MediaCropperController" model="mediaPicker" ng-if="mediaPicker">
</umb-editor>
As I understand it, I need to create config object for built-in editors, then use in the template to show the editor. However when i bring my property editor into my backoffice, nothing is being shown. What am I doing wrong here?
This is my package manifest file:
{
//you can define multiple editors
propertyEditors: [
{
/*this must be a unique alias*/
alias: "My.MediaCropper",
/*the name*/
name: "My Media Cropper",
/*the html file we will load for the editor*/
editor: {
view: "~/App_Plugins/MediaCropper/mediacropper.html"
}
}
]
,
//array of files we want to inject into the application on app_start
javascript: [
'~/App_Plugins/MediaCropper/mediacropper.controller.js'
]
}
dialogService.mediaPicker rather than $scope.mediapicker ?
May be what is causing your error, just from comparing my script to yours.
I am thinking of creating a file called MyTextField.js in views and its contents are
Ext.define('MyTextField',
{
override: 'Ext.field.Input',
xtype: 'mytextfield',
updateValue: function(newValue) {
var input = this.input;
if (input && input.dom.value != newValue) {
input.dom.value = newValue;
}
}
});
And then use this in my other view FormView.js
Ext.define('AnotherScreen', {
extend: 'Ext.form.Panel',
xtype: 'anotherscreen',
controller: 'controllerx',
viewModel: 'viewmodelx',
requires: [
'MyTextField'
],
layout: 'vbox',
items: [
{ xtype : mytextfield}
]
});
But this is not working, it returns an error
**
Uncaught Error: [Ext.create] Unrecognized class name / alias:
MyTextField
**
Any idea is very welcome.
You have at least three issues, one of them is missing quotes around the xtype (should be xtype : 'mytextfield').
override tells Ext to override the old component. So Ext.field.Input is overridden with the updateValue function you defined. This changes every existing input field because they all derive from Ext.field.Input (e.g. textfield, combo etc.), but it does not create a new xtype by the name of "mytextfield". To create a new xtype, you extend an existing class (extend:'Ext.field.Input').
At last, the idea when using requires is that the path and name of the file and the qualified name of the view match. If you have an application called MyAppName, you define in app/view/MyTextField.js the component MyAppName.view.MyTextField. When you then use requires:['MyAppName.view.MyTextField'], the file path should be correctly resolved and you can reference the component by xtype from there on.
I believe you should be using extend to create your custom class.
And in order for your class to be created using an xtype you should supply an alias.
Something like shown below should work:
Ext.define('MyTextField', {
extend: 'Ext.field.Input',
alias: 'widget.mytextfield',
updateValue: function(newValue) {
var input = this.input;
if (input && input.dom.value != newValue) {
input.dom.value = newValue;
}
}
});
I believe this should work. Whenever we are defining any class,
we should extend the parent class rather than overriding it.Please change the xxxx to the package names. when defining a class, it should always be a fully qualified name.
Ext.define('xxx.xxxx.xxxx.MyTextField', {
extend: 'Ext.field.Input',
alias: 'widget.mytextfield',
xtype: 'mytextfield',
updateValue: function(newValue) {
var input = this.input;
if (input && input.dom.value != newValue) {
input.dom.value = newValue;
}
}
});
Is it possible to change xtype and user defined xtypes config options programmatically? After doing so, all instances of xtype would have these config options.
I want to be able to define defaults to certain xtypes before being instantiated. These defaults depend on an application setting (maxLength,visible,vtype)
I dont want to iterate through instantiated components and set the property.
Thanks.
It looks like you can as long as you didn't override the defaults as part of the object's instantiation. See http://jsfiddle.net/WteqQ/2/
Ext.define('Custom', {
xtype: 'custom',
defaultProp: 'default',
defaultProp2: 'default2',
customFn1: function () {
alert(1);
}
});
var a = new Custom();
a.defaultProp2 = 'overridden default';
a.customFn1(); //alerts 1
alert(a.defaultProp); //alerts default
alert(a.defaultProp2);//alerts overridden default
//a.customFn2(); //would throw error
Ext.define('Custom.Override', {
override: 'Custom',
defaultProp: 'new default',
customFn1: function () {
alert(2);
},
customFn2: function () {
alert(3);
}
});
a.customFn1(); //alerts 2
a.customFn2(); //alerts 3
alert(a.defaultProp); //alerts new default
alert(a.defaultProp2);//alerts overridden default
Although this works, I think it would be better to have your application settings applied before you instantiate your components.
i want to change a tooltip's position to show it upon a button. I tried the method below as mentioned in ExtJs's forum. It doesn't work, i can't override the getTargetXY method, the tooltip is shown always in the same position. Do you have any solution ?
this.desktopButton = new Ext.Button({
icon: "arrow_in.png",
scope: this,
handler: this.desktopButtonHandler,
tooltip: new Ext.ToolTip({
text: 'Message',
getTargetXY: function () {
return [100, 100];
}
})
});
Ext elements can only be passed configuration options as specified in the documentation; getTargetXY is not one of those options.
If you want to override that method, you have two choices:
Override all Ext Tooltips to use your new function
Extend the existing Tooltip class to support overriding that method
I would not recommend overriding the method, as that could have other consequences. I will, however, explain how to do both.
To override the tooltip:
Ext.override(Ext.Tooltip, {
getTargetXY: function() {
return [100, 100]
}
});
To extend the tooltip:
MyToolTip = Ext.Extend(Ext.Tooltip, {
constructor: function(config) {
var config = config || {};
if (config.getTargetXY) {
this.getTargetXY = config.getTargetXY;
}
MyToolTip.superclass.constructor.call(this, config);
}
});
Note that setting 'targetXY' may prove unhelpful, as Ext JS may override this setting (depending on the view size).
Overriding the "showAt" method can prevent this:
showAt:function() {
var xy = [this.getTargetXY()[0],this.getTargetXY()[1]-this.height]
MyTooltip.superclass.showAt.call(this, xy);
}