This code is working:
Ext.application({
name: 'WebClient',
autoCreateViewport: true,
launch: function() {
Ext.apply(Ext.form.field.VTypes, {
IPAddress: function(v) {
return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(v);
},
IPAddressText: 'Некорректный IP Адресс',
IPAddressMask: /[\d\.]/i
});
Ext.apply(Ext.form.field.VTypes, {
port: function(v) {
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
if (!isNumber(v)) return false;
return (v>=0 && v<=65535)
},
portText: 'Порт 2 байта 0..65535',
portMask: /[\d\.]/i
});
},
models: ['Request','RPCLog','Connection']
});
But if I comment line autoCreateViewport: true, or set this property to false, the browser produces an error: Uncaught TypeError: Cannot read property 'field' of undefined. How to make Ext.form.field.VTypes available without autoCreateViewport:true?
I had the same issue, except that I was defining the custom VType in the view.
Defining the VType inside the initComponent helped resolve the issue.
initComponent : function(){
// Add the additional 'advanced' VTypes
Ext.apply(Ext.form.field.VTypes, {
daterange: function(val, field) {
Related
I'm trying to use the Jodit editor and wish to use the image uploading capabilities to specify a folder and path of where to upload it to using a PHP script.
I'm trying to put in some console.log statements to check my values, but when I select an image, I receive this error in the console which I don't know how to fix.
The code I've used in the page is:
<script>
var editor = new Jodit('#editor_Jodit',{
enableDragAndDropFileToEditor: true,
uploader: {
url: 'connector/upload.php',
format: 'json',
pathVariableName: 'path',
filesVariableName: 'images',
prepareData: function (data) {
return data;
},
isSuccess: function (resp) {
return !resp.error;
},
getMsg: function (resp) {
return resp.msg.join !== undefined ? resp.msg.join(' ') : resp.msg;
},
process: function (resp) {
return {
files: resp[this.options.uploader.filesVariableName] || [],
path: resp.path,
baseurl: resp.baseurl,
error: resp.error,
msg: resp.msg
};
},
error: function (e) {
this.events.fire('errorPopap', [e.getMessage(), 'error', 4000]);
},
defaultHandlerSuccess: function (data, resp) {
var i, field = this.options.uploader.filesVariableName;
if (data[field] && data[field].length) {
for (i = 0; i < data[field].length; i += 1) {
this.selection.insertImage(data.baseurl + data[field][i]);
}
}
},
defaultHandlerError: function (resp) {
this.events.fire('errorPopap', [this.options.uploader.getMsg(resp)]);
}
}
});
editor.value = '<p>start</p>';
</script>
Try to remove the following line:
filesVariableName: 'images'
Replace with a function
filesVariableName: function (r) {
return 'images'
},
I have filter on my component
filters: {
formatStatus (value) {
let status = {
active: {
text: this.$t('general.successful'),
class: 'secondary--text'
},
processing: {
text: this.$t('general.processing'),
class: 'tertiary--text'
},
waiting: {
text: this.$t('general.pending'),
class: 'tertiary--text'
}
}
return status[value]
}
}
but i got an error
TypeError: Cannot read property '$t' of undefined
but on methods,
$t is working fine.
Rearraing your code like this. it will work
filters: {
formatStatus (value,self) {
let status = {
active: {
text: self.$t('general.successful'),
class: 'secondary--text'
},
processing: {
text: self.$t('general.processing'),
class: 'tertiary--text'
},
waiting: {
text: self.$t('general.pending'),
class: 'tertiary--text'
}
}
return status[value]
}
}
call filter like :
{{yourvalue | formatStatus(this)}}
I am working on filtering my subsection selection to display only subSections that are related to the current mainNavigationSection. Each of these subsections also has a mainNavigation section. For some reason the current implementation is not returning any results.
Here is my Page Model:
Page.add({
name: { type: String, required: true },
mainNavigationSection: { type: Types.Relationship, ref: 'NavItem', refPath: 'key', many: true, index: true },
subSection: { type: Types.Relationship, ref: 'SubSection', filters: { mainNavigationSection:':mainNavigationSection' }, many: true, index: true, note: 'lorem ipsum' },
state: { type: Types.Select, options: 'draft, published, archived', default: 'draft', index: true },
author: { type: Types.Relationship, ref: 'User', index: true }
}
Here is my subSectionModel:
SubSection.add({
name: { type: String, required: true, index: true },
mainNavigationSection: { type: Types.Relationship, ref: 'NavItem', many: true, required: true, initial: true},
showInFooterNav: { type: Boolean, default: false },
defaultPage: { type: Types.Relationship, ref: 'Page' },
description: { type: Types.Html, wysiwyg: true, height: 150, hint: 'optional description' }
});
From what it seems, you have the possibility of many mainNavigationSections on your model. You'd have to iterate over each of them on the current Page, and find the related SubSections. You'll need to use the async Node module to run all the queries and get the results from each.
var async = require('async');
var pID = req.params.pid; // Or however you are identifying the current page
keystone.list('Page').model.findOne({page: pID}).exec(function (err, page) {
if (page && !err) {
async.each(page.mainNavigationSection, function (curMainNavigationSection, cb) {
keystone.list('SubSection').model
.find({mainNavigationSection: curMainNavigationSection._id.toString()})
.exec(function (err2, curSubSections) {
if (curSubSections.length !== 0 && !err2) {
// Do what you need to do with the navigation subSections here
// I recommend using a local variable, which will persist through
// every iteration of this loop and into the callback function in order
// to persist data
return cb(null)
}
else {
return cb(err || "An unexpected error occurred.");
}
});
}, function (err) {
if (!err) {
return next(); // Or do whatever
}
else {
// Handle error
}
});
}
else {
// There were no pages or you have an error loading them
}
});
ExtJS4: I am having problems while upgrading my application ExtJs version from 3.4.0 to 4.1.1a.
My 3.4.0 version code:
this.jsonStore = new Ext.data.JsonStore({
proxy : new Ext.data.HttpProxy({
url: 'rs/environments',
disableCaching: true
}),
restful : true,
storeId : 'Environments',
idProperty: 'env',
fields : [
'ConnectionName', 'Type'
]
});
this.colmodel = new Ext.grid.ColumnModel({
defaults: {
align: 'center'
},
columns: [{
header: Accero.Locale.text.adminlogin.connectionsHeading,
width : 140,
dataIndex: 'ConnectionName'
},
{
header: Accero.Locale.text.adminlogin.connectionTypeHeader,
width : 120,
dataIndex: 'Type'
}]
});
config = Ext.apply({
enableHdMenu: false,
border : true,
stripeRows : true,
store : this.jsonStore,
view : new Ext.grid.GridView(),
header : false,
colModel : this.colmodel,
sm : new Ext.grid.RowSelectionModel({singleSelect: true}),
loadMask: {
msg: Accero.Locale.text.adminlogin.loadingmask
}
}, config);
I made below changes to make application work with ExtJs4.1.1:
var sm = new Ext.selection.CheckboxModel( {
listeners:{
selectionchange: function(selectionModel, selected, options){
// Must refresh the view after every selection
myGrid.getView().refresh();
// other code for this listener
}
}
});
var getSelectedSumFn = function(column){
return function(){
var records = myGrid.getSelectionModel().getSelection(),
result = 0;
Ext.each(records, function(record){
result += record.get(column) * 1;
});
return result;
};
}
var config = Ext.create('Ext.grid.Panel', {
autoScroll:true,
features: [{
ftype: 'summary'
}],
store: this.jsonStore,
defaults: { // defaults are applied to items, not the container
sortable:true
},
selModel: sm,
columns: [
{header: Accero.Locale.text.adminlogin.connectionsHeading, width: 140, dataIndex: 'ConnectionName'},
{header: Accero.Locale.text.adminlogin.connectionTypeHeader, width: 120, dataIndex: 'Type'}
],
loadMask: {
msg: Accero.Locale.text.adminlogin.loadingmask
},
viewConfig: {
stripeRows: true
}
}, config);
With these changes, I am getting the error at my local file 'ext-override.js' saying 'this.el is not defined'.
I debug the code and found that, in the current object this, there is no el object.
ext-override.js code:
(function() {
var originalInitValue = Ext.form.TextField.prototype.initValue;
Ext.override(Ext.form.TextField, {
initValue: function() {
originalInitValue.apply( this, arguments );
if (!isNaN(this.maxLength) && (this.maxLength *1) > 0 && (this.maxLength != Number.MAX_VALUE)) {
this.el.dom.maxLength = this.maxLength *1;
}
}
}
);
})();
Kindly suggest where am I going wrong?
Thanks in advance...
Seriously, use more lazy initialization! Your code is a hell of objects, all unstructured.
First of all, you can override and use the overridden method more easily with something like that (since 4.1)
Ext.override('My.Override.for.TextField', {
override : 'Ext.form.TextField',
initValue: function() {
this.callOverridden(arguments);
if (!isNaN(this.maxLength) && (this.maxLength *1) > 0 && (this.maxLength != Number.MAX_VALUE)) {
this.el.dom.maxLength = this.maxLength *1;
}
}
});
But: The method initValue is called in initField (and this in initComponent) so that you cannot have a reference to this.me because the component is actually not (fully) rendered.
So, this should help (not tested):
Ext.override('My.Override.for.TextField', {
override : 'Ext.form.TextField',
afterRender: function() {
this.callOverridden(arguments);
if (!isNaN(this.maxLength) && (this.maxLength *1) > 0 && (this.maxLength != Number.MAX_VALUE)) {
this.el.dom.maxLength = this.maxLength *1;
}
}
});
But I'm strongly recommend not to use such things within overrides. Make dedicated components which will improve code readibility.
I'm still trying to work through this tutorial, but with mixed success. In my controller script, I have the following:
config: {
refs: {
notesListContainer: 'noteslistcontainer',
noteEditor: 'noteeditor'
},
control: {
notesListContainer: {
newNoteCommand: 'onNewNoteCommand',
editNoteCommand: 'onEditNoteCommand'
}
}
},
onEditNoteCommand: function(list, record) {
console.log('onEditNoteCommand');
this.activateNoteEditor(record);
},
activateNoteEditor: function(record) {
var noteEditor = this.getNoteEditor();
noteEditor.setRecord(record);
Ext.Viewport.animateActiveItem(noteEditor, this.slideLeftTransition);
},
When I run this in Chromium 18.0.1025.168, I get
Uncaught TypeError: Cannot call method 'setRecord' of undefined Notes.js:37`.
`this.getNoteEditor()'
does not return the noteEditor, but returns undefined.
The entire project's source is available here.
The important thing is to specify the ref as autoCreated using autoCreate : true
config: {
refs: {
notesListContainer: 'noteslistcontainer',
noteEditor: {
selector: 'noteeditor',
xtype: 'noteeditor',
autoCreate: true // missing
}
},
},
...
}