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?
Related
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');
}
});
My code structure is as follows->
MyApp-> app -> controller, model, store, shared (util-> Utility.js), view
I have created the following Utility Class
Ext.define('MyApp.shared.util.Utilities', {
myFunction : function (val, meta, rec) {
//do something
return val;
}
});
I am trying to call the myFunction while rendering a column in my grid as follows ->
Ext.define('MyApp.view.MyGrid', {
extend: 'Ext.grid.Panel',
initComponent: function() {
var rendererFn = Ext.create('MyApp.shared.util.Utilities');
this.columns = [{
text: 'Col1',
dataIndex: 'col1'
renderer: rendererFn.myFunction
};
this.store = new MyApp.store.MyStore();
this.store.load();
this.callParent(arguments);
}
});
This works fine but I want to know if this is the correct way of using global functions.
A better way would be to declare your class a singleton:
Ext.define('MyApp.shared.util.Utilities', {
singleton: true,
myFunction : function (val, meta, rec) {
//do something
return val;
}
});
Ext.define('MyApp.view.MyGrid', {
extend: 'Ext.grid.Panel',
initComponent: function() {
this.columns = [{
text: 'Col1',
dataIndex: 'col1'
renderer: MyApp.shared.util.Utilities.myFunction
}];
this.store = new MyApp.store.MyStore();
this.store.load();
this.callParent(arguments);
}
});
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.
I define a gridpanel like
Ext.define('Example', {
extend: 'Ext.grid.Panel',
alias: 'myGrid',
store:Ext.create('Ext.data.Store', {
fields: [
{name: 'name'}
]
}),
initComponent: function() {
alert(this.up('window').title); //but error like this.up(...) is undefined
this.callParent(arguments);
}
...
And I create a window have a item above
items: {
xtype: 'myGrid'
}
I want to get some thing in parent componet. How to up to parent component in initComponent function. Thanks
initComponent: function() {
var me = this;
this.callParent(arguments);
me.on('render', function() {
alert(me.up('window').title);
});
}
You can't. The component must first be instantiated before it is added to the container. You can override the onAdded template method, which will get called when the component is added to a container:
Ext.define('Foo',
extend: 'Ext.Component',
onAdded: function(ct) {
this.callParent(arguments);
console.log('Added to', ct);
}
});
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
});
});