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
});
});
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.
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'm quite new to Extjs and I can't figure this out:
I have a Container that requires a panel. Is there a way to dynamically initialise a component? This is my view:
Ext.define('Hello.view.index.Resume', {
extend: 'Ext.container.Container',
requires: [
'Hello.view.index.ValuesChart',
],
initComponent: function() {
this.leftZone = [{
margin: '0 0 5 0',
ui: 'hello-toggable',
xtype: 'hello_index_characteristics'
}];
Ext.apply(this, {
items: [{
xtype: 'container',
items: [{
xtype: 'hello_index_valueschart',
}, {
// ....
}]
}]
});
this.callParent();
}
});
The hello_index_valueschart panel has an initComponent function that defines several items:
initComponent: function() {
Ext.apply(this, {
border:false,
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
xtype: 'tbspacer',
width: 15
},
'->',
{
xtype:'button',
customproperty: this.id,
text:'I am a text',
tooltip: 'Hi there'
},
{
xtype:'button',
customproperty: this.id,
text:'I am another text',
tooltip: 'Hi here'
}
]
}]
})
}
Is there a way to dynamically pass the items to this panel? I mean for example: if a condition is verified in the controller pass an array items1 otherwise pass array items2.
A quick thought:
you can use the afterrender event on the panel, then add the components based on a condition in the controller. Something like:
Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',
onPanelAfterRender: function(component, eOpts) {
if(this.someCondition()) {
component.add( { ... });
}
},
someCondition: function() {
return true;
}
init: function(application) {
this.control({
"#mypanel": {
afterrender: this.onPanelAfterRender
}
});
}
});
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);
}
});