In this code, there are many existing function, but I have to start to make some extended ExtJS class using that functions.
How can I add an existing function to a listener of a class?
For example:
Ext.define("My.Grid", {
extend: 'Ext.grid.Panel',
//...
initComponent: function() {
//...
Ext.apply(this, {
//...
tbar: [{
xtype: 'button',
icon: 'img/x.png',
handler: function(){
// need to call randomOtherFunction here
}
}]
});
}
});
function randomOtherFunction () {
// ...
}
Yessss, it works! :) ... and I hope, it will be good until the old other functions go to an object.
function randomOtherFunction () {
// ...
}
My.functions = {
randomOtherFunction: function () {
randomOtherFunction();
}
};
Ext.define("My.Grid", {
extend: 'Ext.grid.Panel',
//...
initComponent: function() {
//...
Ext.apply(this, {
//...
tbar: [{
xtype: 'button',
icon: 'img/x.png',
handler: function(){
My.functions.randomOtherFunction();
}
}]
});
}
});
You have to check the scope and use it to call the handler function.
Try the below
Ext.define("My.Grid", {
extend: 'Ext.grid.Panel',
//...
initComponent: function() {
//...
Ext.apply(this, {
//...
tbar: [{
xtype: 'button',
icon: 'img/x.png',
scope:this,
handler:this.randomOtherFunction
}]
});
}
});
function randomOtherFunction () {
// ...
}
Hope it helps you.
Related
I tried to write multiple defines like this:
Ext.define('ExtDoc.views.extfields.ExtDocPanel', {
extend: 'Ext.panel.Panel',
mixins: ['ExtDoc.views.extfields.ExtDocField'],
listeners: {
afterrender: function(){
this.updateAfterRender();
}
}
});
Ext.define('ExtDoc.views.extfields.ExtDocTextField', {
extend: 'Ext.form.TextField',
mixins: ['ExtDoc.views.extfields.ExtDocField'],
listeners: {
afterrender: function(){
this.updateAfterRender();
}
}
});
in the page ExtDoc/views/extfields/ExtDocPanel, but I got error: object expected. And now I tried like this:
Ext.define('ExtDoc.views.extfields.ExtDocPanel', {
extend: 'Ext.panel.Panel',
alias: ['ExtDoc.views.extfields.ExtDocField'],
listeners: {
afterrender: function(){
this.updateAfterRender();
}
}
});
Ext.define('ExtDoc.views.extfields.ExtDocPanel', {
extend: 'Ext.form.TextField',
alias: ['ExtDoc.views.extfields.ExtDocField'],
listeners: {
afterrender: function(){
this.updateAfterRender();
}
}
});
but got same error. How can I do that?
I have a window(Ext.window.Window) in which I have pane in card layout. I am adding grid dynamically to the panels item as:
Ext.define('Example.view.ProcessInfoLayout',{
extend: 'Ext.window.Window',
requires: [
'Ext.layout.container.Card',
'Example.view.SubProcessController',
'Example.view.Info'
],
xtype: 'app--processinfolayout',
controller: 'main-content-subprocesscontroller',
layout: 'fit',
initComponent: function(){
this.callParent();
this.header = {
titlePosition: 0,
items:[{
xtype: 'button',
text: 'Resubmission',
glyph: 'xf0e2#FontAwesome',
tooltip: 'Resubmit',
listeners: {
click: 'ResubmissionClick'
}
}]
};
console.log('thisw')
this.items = []
this.add({
xtype: 'panel',
frame: false,
border: false,
itemId: 'v6panel',
layout: {
type:'card',
deferredRender: true
},
defaultListenerScope: true,
bbar: ['->',
{
itemId: 'card-prev',
text: '« Previous',
handler: 'showPrevious',
disabled: true
},
{
itemId: 'card-next',
text: 'Next »',
handler: 'showNext'
}
],
items: [],
initComponent: function() {
var me = this;
me.callParent();
me.store = Ext.getStore('app-main-store-' + me.up('app-main-processinfolayout').processData.id);
if (!me.store) {
me.store = Ext.create('Example.store.ProcessInfo', {
storeId: 'app-main-store-' + me.up('app-main-processinfolayout').processData.id,
room: me.up('app-main-processinfolayout').processData.id
});
me.store.proxy.url = Ext.String.format(me.store.proxy.url,
me.up('app-main-processinfolayout').processData.id);
}
me.store.on('load', function(store, records, successful, eOpts) {
console.log('####')
me.fireEvent('refreshProcessInfoLayoutView', me, records);
});
},
listeners:{
beforerender: function(obj) {
console.log('Hey Australia')
obj.store.load();
},
refreshProcessInfoLayoutView: 'refreshProcessInfoLayoutView',
scope: 'this'
},
refreshProcessInfoLayoutView: function(obj, records) {
console.log('thise')
console.log(records[0].data.processes)
if (records[0].data.v6_processes) {
for (elem in records[0].data.processes) {
var subprocessInfo = {
xtype: 'app-main-cycle-info',
processId: records[0].data.processes[elem],
itemId: 'card-' + elem
};
obj.add(subprocessInfo);
}
}
},
showNext: function () {
this.doCardNavigation(1);
},
showPrevious: function (btn) {
this.doCardNavigation(-1);
},
doCardNavigation: function (incr) {
var me = this;
var l = me.getLayout();
var i = l.activeItem.id.split('card-')[1];
var next = parseInt(i, 10) + incr;
l.setActiveItem(next);
me.down('#card-prev').setDisabled(next===0);
me.down('#card-next').setDisabled(next===this.down('#v6panel').store.getCount() - 1);
}
})
}
})
It prints console log upto thisw . After that it gives error as...Uncaught TypeError: me.items.insert is not a function. What I am doing wrong. Please suggest.
Don't do this.callParent(); in your initComponent before specifying this.header and this.items. Do it after. This is because once you've called this.callParent(); your component is instantiated, therefore trying stuff like this.items = [] just screws things up.
Also, instead of:
this.items = [];
this.add({stuff});
do:
this.items = [{stuff}];
When dealing with nested items and initComponent functions, you can use the xhooks config so that callParent() can work properly :
Ext.define('Example.view.ProcessInfoLayout', {
// ...
xhooks: {
initComponent: function(){
this.callParent();
// ...
this.add({
xtype: 'panel',
// ...
items: [],
initComponent: function() {
// ...
}
});
}
}
});
Have a look at the Ext.Component constructor method.
The problem is in redirectTo calling onLoad method twice. From my main viewport extra views are loading dynamically.
Having main viewport
Ext.define('MyApp.main.view.MainView', {
extend: 'Ext.container.Container',
id: 'mainViewPort',
requires: [
'MyApp.main.controller.MainViewController',
],
xtype: 'app-main',
controller: 'main',
viewModel: {
type: 'main'
},
layout: {
type: 'border'
},
items: [{
region: 'center'
}]
});
viewport controller
Ext.define('MyApp.main.controller.MainViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.main',
onClickQueryResponses: function() {
var panelToAddName = Ext.create('MyApp.requests.view.QueryResponsesGridView', {});
var mainViewPort = Ext.getCmp('mainViewPort');
var centerRegion = mainViewPort.down('[region=center]');
centerRegion.removeAll();
centerRegion.add(panelToAddName);
}
});
view 'MyApp.requests.view.QueryResponsesGridView'
Ext.define('MyApp.requests.view.QueryResponsesGridView', {
extend: 'Ext.grid.Panel',
requires: [
'MyApp.requests.controller.QueryResponsesGridViewController'
],
controller: 'queryResponsesGrid',
dockedItems: [{
xtype: 'toolbar',
items:[{
xtype: 'button',
margin: '0 30 0 4',
handler: 'onClickQuerySearch'
}]
}]
});
});
controller of view 'MyApp.requests.view.QueryResponsesGridView'
Ext.define('MyApp.requests.controller.QueryResponsesGridViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.queryResponsesGrid',
routes : {
'responses': {
action : 'onLoad'
}
},
onLoad: function() {
this.redirectTo('responses');
alert('!');
},
onClickQuerySearch: function() {
this.onLoad();
},
});
When I click button with handler onClickQuerySearch alert('!') is running twice, do anyone know why?
here is the fiddle https://fiddle.sencha.com/#fiddle/oqb
I don't think you need to call redirectTo in the onLoad method. You are basically creating a self-referencing loop. redirectTo is then calling onLoad again.
I think possibly you want the redirectTo in the onClickQuerySearch instead of calling onLoad directly:
Ext.define('MyApp.controller.QueryResponsesGridViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.queryResponsesGrid',
routes : {
'responses': {
action : 'onLoad'
}
},
onLoad: function() {
alert('!');
},
onClickQuerySearch: function() {
this.redirectTo('responses');
}
});
Here is what I am doing:
Ext.define('NG.view.taxinvoice.Widget', {
extend: 'NG.code.portal.Portlet',
alias: 'widget.taxinvoicewidget',
layout: 'card',
tools: [{
type: 'gear',
scope: this,
callback: 'onGearToolClick'
}],
items: [{
xtype: 'taxinvoicelist'
}, {
html: 'taxinvoicegraph'
}],
onGearToolClick: function (panel) {
alert('1111') This is not invoked!
}
});
The alert statement is never fired...
can you tell me why?
Update
Ok the way it worked was using the accepted answer by #kevhender like this:
Ext.define('NG.view.taxinvoice.Widget', {
extend: 'NG.code.portal.Portlet',
alias: 'widget.taxinvoicewidget',
layout: 'card',
items: [{
xtype: 'taxinvoicelist'
}, {
html: 'taxinvoicegraph'
}],
initComponent: function () {
this.tools = [{
type: 'gear',
scope: this,
callback: 'onGearToolClick'
}];
this.callParent(arguments);
},
onGearToolClick: function (panel) {
alert('1111') Now it fires :)
}
});
I don't believe that the framework supports using strings to specify the name of the callback function here, you should use the actual function. If you want to use the member function, you'll have to define tools within initComponent:
initComponent: function() {
this.tools = [{
type: 'gear',
scope: this,
callback: this.onGearToolClick
}];
this.callParent(arguments);
}
You could also do it the way you have it now if you use an anonymous function:
Ext.define('NG.view.taxinvoice.Widget', {
extend: 'NG.code.portal.Portlet',
alias: 'widget.taxinvoicewidget',
layout: 'card',
tools: [{
type: 'gear',
scope: this,
callback: function() {
//define fn here
}
}],
...
});
I wrote two grid classes.
BaseUsuarios.js:
Ext.define('CRUDManantiales.view.grid.BaseUsuarios', {
extend: 'Ext.grid.Panel',
alias: 'widget.gridBaseUsuarios',
title: 'Usuarios',
initComponent: function(){
...
this.callParent(arguments);
}
});
And FullUsuarios.js
Ext.define('CRUDManantiales.view.grid.FullUsuarios', {
extend: 'CRUDManantiales.view.grid.BaseUsuarios',
alias: 'widget.gridFullUsuarios',
title: 'Usuarios',
initComponent: function(){
...
this.callParent(arguments);
}
BaseUsuarios.js have a toolbar with 3 buttons, then FullUsuarios.js also. But i want add
some buttons in FullUsuarios.js toolbar.
How i can do ?.
Any idea ?.
Thanks !
I would do something like this:
Ext.require('*');
Ext.onReady(function() {
Ext.define('MyBase', {
extend: 'Ext.panel.Panel',
initComponent: function() {
this.tbar = this.getTbarItems();
this.callParent();
},
getTbarItems: function() {
return [{
text: 'Base'
}]
}
});
Ext.define('MySub', {
extend: 'MyBase',
getTbarItems: function() {
var items = this.callParent();
items.push({
text: 'Sub'
});
// Could also insert etc
return items;
}
});
new MySub({
renderTo: document.body
});
});