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);
}
});
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');
}
});
I'm trying to look up a reference to one of my components in the ViewController's beforeInit, so I can set some variables on myComponent before it's created, but lookupReference does not find my component in the beforeInit call... it's found in the ViewController's init method, but I'm assuming because the view hasn't actually been rendered, the reference hasn't been created.
So I figured I'd try initComponent, but once again, the lookupReference doesn't work in there... I know I could create an itemId and look for this in initComponent, but that's last resort for me... I'd rather use the reference. See this Fiddle example and code:
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.define('MyViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.myview',
beforeInit: function() {
console.log('beforeInit: I want this to exist before myComponent is rendered', this.lookupReference('myComponent'));
},
init: function() {
console.log('init', this.lookupReference('myComponent'));
}
});
Ext.define('MyView', {
extend: 'Ext.panel.Panel',
controller: 'myview',
title: 'My View',
height: 400,
width: 400,
items: [{
xtype: 'textfield',
reference: 'myComponent',
fieldLabel: 'My Component'
}],
initComponent: function() {
// I want this to happen before myComponent is rendered
console.log('initComponent: I want this to exist before myComponent is rendered', this.lookupReference('myComponent'));
this.callParent();
console.log('initComponent callParent', this.lookupReference('myComponent'));
}
});
Ext.create('MyView', {
renderTo: Ext.getBody()
});
}
});
Does anyone have any guidance on how to accomplish something like this?
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
});
});
I have got the tabpanel - it's the main form (view).
In this tabpanel I define the different tabs - xtype:'panel'.
So, I have one main(controller) , main view and some tabs views.
The tab's views are referenced in main view.
I want to define listener of activate event of some child's panel in main controller.
How can I do that?
the main controller :
Ext.define('KP.controller.account.apartment.Main', {
extend: 'Ext.app.Controller',
views: ['account.apartment.Main',
'account.apartment.Requisites'
],
models: ['account.apartment.Requisites'
],
stores: ['account.apartment.Requisites'
],
init: function () {
}
});
The main view:
Ext.define('KP.view.account.apartment.Main', {
extend: 'Ext.window.Window',
alias: 'widget.ApartmentData',
height: 566,
width: 950,
activeItem: 0,
layout: {
type: 'fit'
},
autoShow: false,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'tabpanel',
activeTab: 0,
deferredRender: true,
items: [
{
xtype: 'RequisitesApartment'
}
]
}
]
});
me.callParent(arguments);
}
});
The child panel RequisitesApartment (view):
Ext.define('KP.view.account.apartment.Requisites', {
extend: 'Ext.panel.Panel',
alias: 'widget.RequisitesApartment',
id: 'panel_accountrequisites',
height: 350,
width: 1124,
autoScroll: true,
layout: {
type: 'fit'
},
listeners: {
activate: function () {
....load data....
...this listeners I want to push in 'main' controller...
}
},
initComponent: function () {
var me = this;
var grid_store = Ext.create('KP.store.account.apartment.Requisites');
Ext.applyIf(me, {
dockedItems: [
{
xtype: 'gridpanel',
height: 260,
autoScroll: true,
dock: 'bottom',
store: grid_store,
id: 'r_gridFlatParams',
forceFit: true,
columns: [
...some columns....
],
viewConfig: {
}
}
]
});
me.callParent(arguments);
}
});
Register it directly as control within the responsible controller
Here is a example with a working query. For sure you just will need the query, but I think it's a good example. The custom cfg property ident make it easy find each tab. As in the example below you will have specify a tabConfig within each panel and define the ident there.
Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.body,
items: [{
title: 'Foo',
tabConfig: {
ident: 'foo'
},
}, {
title: 'Bar',
tabConfig: {
ident: 'bar',
title: 'Custom Title',
tooltip: 'A button tooltip'
}
}]
});
console.log(Ext.ComponentQuery.query('tabpanel tabbar tab[ident=foo]')[0]);
console.log(Ext.ComponentQuery.query('tabpanel tabbar tab[ident=bar]')[0]);
Another way is to use css id's which can be queried like '#my-name' but I recommend to use a custom one as in the example above
Well, I should put this code in 'main'(controller):
this.control({
'ApartmentData tabpanel RequisitesApartment': {
activate: function () {
console.log('hello!');
}
}
});
The problem was in wrong selector , that I used.
The correct selector is :
'ApartmentData tabpanel RequisitesApartment'
There 'ApartmentData'(define like a alias: 'widget.ApartmentData') - is the 'window' xtype -the main form.
tabpanel - panel with tabs in 'window', and 'apartServList'(define like alias: 'widget.RequisitesApartment') - the some panel.
Thanks for sra!
the correct thing to do is to pass a config object to the member function control into controller init function. From Sencha documentation : The control function makes it easy to listen to events on your view classes and take some action with a handler function.
A quick example straight from extjs docs:
Ext.define('MyApp.controller.Users', {
extend: 'Ext.app.Controller',
init: function() {
this.control({
'viewport > panel': {
render: this.onPanelRendered
}
});
},
onPanelRendered: function() {
console.log('The panel was rendered');
}
});
Hope this helps.
Cheers
I want to display a popout window with some values displayed on it fetched from a PHP server file. I have no clue how to display the items on the window.
I don't know why but the console.log message 'method call' in the controller doesn't get displayed when the view is rendered. I think this is because i have added click: this.methodcall (which gets called only when a button click is made, but i want the log statement to print when the view is rendered)
Nothing gets displayed on the View, i think this is because i have not added any code to display it in the View.
Can someone help me solve this problem ?
My Pop out window VIEW code;
Ext.define('Project.view.user.Popupwin', {
extend: 'Ext.window.Window',
alias: 'widget.popupwin',
layout:'fit',
autoShow: true,
initComponent: function() {
this.store = 'Popupwin';
this.items = [
{
xtype: 'form',
items: [
]
}
];
this.callParent(arguments);
}
});
STORE
Ext.define('Project.store.Popupwin',{
extend:'Ext.data.Store',
model:'App.model.Popupwin',
proxy: {
actionMethods : {
read : 'POST'
},
type: 'ajax',
url : 'loaddata.php',
autoLoad: true
}
});
CONTROLLER
Ext.define('Project.controller.Popupwin',{
extend: 'Ext.app.Controller',
stores:['Popupwin'],
models:['Popupwin'],
views:['DoctorView'],
init: function(){
console.log('executed');
this.control({
'popupwin': {
click: this.methodcall
}
});
},
methodcall: function() {
console.log('method call');
this.getShowPopupwinStore().load();
}
});
Model
Ext.define ('Project.model.Popupwin',{
extend: 'Ext.data.Model',
fields:['fname','lanme']
});
Window has no click event, so you can't listen for it.
Ext.define('MyWindow', {
extend: 'Ext.window.Window',
afterRender: function(){
this.callParent(arguments);
this.el.on('click', this.fireClick, this);
},
fireClick: function(e, t){
this.fireEvent('click', this, e);
}
});