We have js files writen in Extjs 4. I have to migrate theese to Extjs 6. Almost everything is fine, but when we create own classes (extended extjs classes), we have a problem. (Unfortunately there's no mvc, just classes and create). In the ext-all-debug:
create: function(config, defaultType) {
if (typeof config === 'string') {
return Ext.widget(config);
}
if (config.isComponent) {
return config;
}
if ('xclass' in config) { // **config is true**
return Ext.create(config.xclass, config);
}
return Ext.widget(config.xtype || defaultType, config);
},
The config is true except an object, and we got the following error message in the console: "Cannot use 'in' operator to search for 'xclass' in true"
What is the problem with our classes or creating?
This is a class:
Ext.define("My.component.TrunkListGrid", {
extend: "My.component.Grid",
// config
viewConfig: {
enableTextSelection: true
},
initComponent: function () {
// ...
Ext.apply(this, {
// ...
});
this.callParent();
this.addListener('render', function () {
// ...
}, this);
}
});
This is a create:
var g = Ext.create('My.component.TrunkListGrid', {
// config
});
I think, I have to call something another way...
Oah, I found it! We used the buttons: true in the config
Related
I cannot find examples for how to translate objects inside of functions, only examples for translating html content.
Inside the function are system button labels that need to be translated. I have provided the actual en.json and th.json files to show what needs to be translated. I can find no examples for angular-translate that translate non-html objects like in this function. I have managed to get translation working on all other areas of my application, but not this function. The documentation http://angular-translate.github.io/docs/#/guide/03_using-translate-service does not provide a good example that fits my code. I have seen others ask this same type of question, and just be pointed to the documentation (i.e. https://github.com/angular-translate/angular-translate/issues/1466).
en.json
{
"CHOOSE_IMAGE": "Choose image source",
"CAMERA": "Camera",
"LIBRARY": "Library",
"CANCEL": "Cancel"
}
th.json
{
"CHOOSE_IMAGE": "เลือกที่มาของภาพ",
"CAMERA": "กล้อง",
"LIBRARY": "คลังรูปภาพี่ี",
"CANCEL": "ยกเลิก"
}
feedback.controller.js
...
function getImageSource() {
var deferred = $q.defer();
$ionicActionSheet.show({
buttons: [
{ text: 'CAMERA' },
{ text: 'LIBRARY' }
],
titleText: 'CHOOSE_IMAGE',
cancelText: 'CANCEL',
cancel: function () {
deferred.reject();
},
buttonClicked: function (index) {
if (index === 0) {
deferred.resolve(Camera.PictureSourceType.CAMERA);
} else {
deferred.resolve(Camera.PictureSourceType.PHOTOLIBRARY);
}
return true;
}
});
return deferred.promise;
}
...
Well, apparently all the necessary information are in the docs. But let me do your work..
You have to inject $translate service in your controller. Assuming you have your translations already loaded the most convinient way to translate your labels is to use $translate.instant() method. What does it do?
According to docs http://angular-translate.github.io/docs/#/api/pascalprecht.translate.$translate it:
Returns a translation instantly from the internal state of loaded translation. All rules regarding the current language, the preferred language of even fallback languages will be used except any promise handling. If a language was not found, an asynchronous loading will be invoked in the background.
So your code should look like that:
feedback.controller.js
...
function getImageSource() {
var deferred = $q.defer();
$ionicActionSheet.show({
buttons: [
{ text: $translate.instant('CAMERA') },
{ text: $translate.instant('LIBRARY') }
],
titleText: $translate.instant('CHOOSE_IMAGE'),
cancelText: $translate.instant('CANCEL'),
cancel: function () {
deferred.reject();
},
buttonClicked: function (index) {
if (index === 0) {
deferred.resolve(Camera.PictureSourceType.CAMERA);
} else {
deferred.resolve(Camera.PictureSourceType.PHOTOLIBRARY);
}
return true;
}
});
return deferred.promise;
}
...
Or you can use asynchronous loading with:
feedback.controller.js
....
$translate(['CAMERA',
'LIBRARY',
'CHOOSE_IMAGE',
'CANCEL']).then(function (translations) {
$ionicActionSheet.show({
buttons: [
{ text: $translate.instant('CAMERA') },
{ text: $translate.instant('LIBRARY') }
],
....
Hope it helps.
Use filter function
.controller(["$filter",....],function($filter,....){
var translateFilter=$filter("translate");
...
buttons: [
{ text: translateFilter('CAMERA') },
{ text: translateFilter('LIBRARY') }
]
...
})
or when translations isn't loaded already
.controller(["$q","$translate",....],function($q,$translate,....){
var translateFilter=$filter("translate");
$q.all({
CAMERA:$translate('CAMERA'),
LIBRARY:$translate('CAMERA')
}).then(function(translations){
...
buttons: [
{ text: translations.CAMERA },
{ text: translations.LIBRARY }
]
...
})
})
Is there any forum/Issue tracking website for backbone.js ?
I have an Issue that click event triggers multiple times. I had found a work around using Underscore.js , debounce method.
Is the problem addressed in latest backbone.js ?
Please suggest me on this .
Raja K
define([
'jquery', 'underscore','backbone',], function($, _, Backbone,Marionette) {
var Sample = Backbone.Marionette.ItemView.extend({
template: 'sample/sample',
model : new Model(),
render: function() {
id = utils.getStorage('some_id');
if(parseInt(id) > 0 ) {
this.model.set({some_id:id});
this.rendersome(id);
} else {
data = new Model().toJSON();
this.renderdata(data);
}
},
events: {
"click #some" : "someinfo"
},
someinfo : function() {
var self = this;
$.ajax({
url: API_URL + "sample/sampleinfo",
type: 'POST',
crossDomain: true,
cache: true,
data: JSON.stringify({ 'code1': this.model.get('code1'),
'code2' : this.model.get('code2'),
"auth" : init.auth, "user_id" : init.user_id }),
contentType: 'application/json',
success: function(data,response,jqXHR) {
if('SUCCESS' == data._meta.status && data.records.message.me == 'positive') {
self.model.set(data.records);
self.renderdata(data.records);
} else {
console.log(data.records.message);
return false;
}
},
error: function (request, status, error) {
console.log(request);
}
});
},
change: function (event) {
var target = event.target;
var change = {};
change[target.name] = target.value;
this.model.set(change);
},
});
return Sample;
});
Router Init code below,
routeaction : function() {
var Header = new HeaderView({'el': '#header'});
Header.render();
var test = new Tview({'el': '#content'});
test.render();
}
UPDATE : I am using backbone.subroute and the view got destroyed but not rendering after that. Becuase both old and current object referring the same element. But why it is not rendering again ? Can you please suggest me what I am missing here ?
render: function () {
// remove the existing header object
if(typeof gheader == "object") gheader.close();
// render the object
self.$el.html(tmpl(data));
},
UPDATE : I guess view.remove() is working fine. I have reused the container at $el and view.remove() removed the container element and stopped rendering the other views. Should I recreate the container ?
I can use "tagName" but suggest me how do I apply the stylesheet ?
undelegateEvents() Removes all of the view's delegated events. Useful if you want to disable or remove a view from
the DOM temporarily.
http://backbonejs.org/#View-undelegateEvents
For example I have 5 dataViews with elements (simple rows). Does ability exist to realize multiselection between this dataView (all of this dataViews have different data-stores)? I mean non-algorithmic realization... Of course, I can write some logic to implement this, but maybe some standard solution exist?
You can try something like this, maybe this can work :
Ext.define('MyApp.controller.DataViews', {
extend : 'Ext.app.Controller',
init : function() {
this.views = {};
this.listen({
component: {
'dataview-1' : {
'render' : this.onDataViewRender,
'itemclick' : this.onItemClick
},
'dataview-2' : {
'render' : this.onDataViewRender,
'itemclick' : this.onItemClick
}
}
});
},
onDataViewRender: function(view){
this.views[view.getXType()] = view;
},
onItemClick: function(view, record, items, index, e){
//If Ctrl is not pressed when clicking an item, clear the selection of all views before proceeding
if(!e.ctrlKey)
{
Ext.Object.each(this.views, function(xtype, viewObj){
viewObj.getSelectionModel().deselectAll();
});
}
}
});
Ext.define('MyApp.view.DataView1', {
extend: 'Ext.view.View',
xtype: 'dataview-1',
multiSelect: true,
});
Ext.define('MyApp.view.DataView2', {
extend: 'Ext.view.View',
xtype: 'dataview-2',
multiSelect: true,
});
I using extensible-1.5.1 and i run app in
extensible-1.5.1/examples/calendar/TestApp/test-app.html
I try to custom Event Form window by add a new textfield into this form. Here is form default
But i can't find file to edit.
I think that in extensible-1.5.1\src\calendar\form\EventWindow.js. But when i remove src folder then project still working and nothing change?
How to do that thanks
Edit
I found that in extensible-all-debug.js file. But that file is really complex
How to config to use data in extensible-1.5.1\src\ like calendar at extjs example
You are correct in that the class you need to use is Extensible.calendar.form.EventWindow. However, instead of editing that file, you should extend that class and make your own version of it. You can use that file as a guide, and override the getFormItemConfigs function to modify the form as you need it:
Ext.define("MyApp.view.EventWindow", {
extend: "Extensible.calendar.form.EventWindow",
modal: true,
enableEditDetails: false,
initComponent: function()
{
this.callParent();
},
getFormItemConfigs: function() {
var items = [/*your form items here */];
return items;
},
//... other stuff here maybe...
});
Then, you can override the Extensible.calendar.view.AbstractCalendar to use the class you just made:
Ext.define("MyApp.view.AbstractCalendarOverride", {
override: 'Extensible.calendar.view.AbstractCalendar',
getEventEditor : function()
{
this.editWin = this.ownerCalendarPanel.editWin;
if(!this.editWin)
{
//Change this line:
this.ownerCalendarPanel.editWin = Ext.create('MyApp.view.EventWindow', {
id: 'ext-cal-editwin',
calendarStore: this.calendarStore,
modal: this.editModal,
enableEditDetails: this.enableEditDetails,
listeners: {
'eventadd': {
fn: function(win, rec, animTarget) {
//win.hide(animTarget);
win.currentView.onEventAdd(null, rec);
},
scope: this
},
'eventupdate': {
fn: function(win, rec, animTarget) {
//win.hide(animTarget);
win.currentView.onEventUpdate(null, rec);
},
scope: this
},
'eventdelete': {
fn: function(win, rec, animTarget) {
//win.hide(animTarget);
win.currentView.onEventDelete(null, rec);
},
scope: this
},
'editdetails': {
fn: function(win, rec, animTarget, view) {
// explicitly do not animate the hide when switching to detail
// view as it looks weird visually
win.animateTarget = null;
win.hide();
win.currentView.fireEvent('editdetails', win.currentView, rec);
},
scope: this
},
'eventcancel': {
fn: function(win, rec, animTarget){
this.dismissEventEditor(null, animTarget);
win.currentView.onEventCancel();
},
scope: this
}
}
});
}
// allows the window to reference the current scope in its callbacks
this.editWin.currentView = this;
return this.editWin;
}
});
This may not give you exactly what you need, but hopefully it puts you on the right track.
I am trying to apply a patch using overrides, but I am getting "Uncaught TypeError: Cannot read property 'Table' of undefined " because the Ext.view.Table file has not finished loading by the time the script gets called. How do I make sure the required files gets loaded before this is called?
Ext.define('CSnet.overrides.Table', {
override: 'Ext.view.Table',
getRowStyleTableElOriginal: Ext.view.Table.prototype.getRowStyleTableEl,
getRowStyleTableEl: function() {
var el = this.getRowStyleTableElOriginal.apply(this, arguments);
if (!el) {
el = {
addCls: Ext.emptyFn,
removeCls: Ext.emptyFn,
tagName: {}
}
}
return el;
}
});
You can define a class which handles all your overrides, e.g.
Ext.define('YourApp.Overrider',{
requires: ['TargetClass'],
doOverride: function() {
Ext.define('CSnet.overrides.Table', {
override: 'Ext.view.Table',
// snip
});
}
});
You can requires this class in your app.js and call doOverride in app.launch(), after the framework has been loaded. Additionally, you can require the specific TargetClass that you want to override in the require-config of the Overrider.