I'm using getRowClass function for custom grid row styling. In a panel component I have 2 similar grids which should have the same getRowClass logic. I would like to define the function body in the controller binded to the parent component. Below I placed some test code that illustrates the problem. In the example getRowClass is set to point to color function defined in the main controller, however this function cannot be seen in this scope. I don't have much experience in extJS and I don't know how to solve this kind of scope problems, any help will be appreciated.
Ext.define('Test.controller', {
extend: 'Ext.app.ViewController',
alias: 'controller.main',
color : function(row,index){
return 'green-row';
}
});
Ext.onReady(function() {
win = new Ext.Window({
title:'Test',
layout:'fit',
width:400,
closeAction:'close',
target : document.getElementById('buttonId'),
plain: true,
controller: 'main',
items: [{
xtype: 'grid',
store: Ext.create("testApp.store.Objects"),
selType: 'checkboxmodel',
columns : [{
text : 'Column1',
dataIndex : 'Column1'
},{
text : 'Column2',
dataIndex : 'Column2'
},{
text : 'Column3',
dataIndex : 'Column3'
}],
viewConfig : {
getRowClass : 'color'
}
}]
});
Ext.create('Ext.Button', {
renderTo: Ext.getElementById('buttonId'),
text: 'Click Me',
listeners: {
click: function() {
win.show();
}
}
});
});
All config objects are only relevant at instantiation time of a class and don't have any effect afterwards.
You can resolve you issue like this:
listeners : {
afterrender: function(p){
p.getView().getRowClass = this.up('window').getController().color;
}
}
Related
I have a Window class like this:
Ext.define('EMS.tf.alerts.alerts.view.AlertWindow', {
extend: 'Ext.window.Window',
alias: 'widget.ems-alerts-window',
height: 220,
width: 600,
alertTpl: undefined,
autoScroll: true,
selectedRecord: undefined,
title: undefined,
atext: undefined,
// #private
initComponent: function() {
var me = this;
Ext.apply(me, {
tpl: me.alertTpl,
listeners: {
show: function() {
Ext.create('Ext.Container', {
renderTo: 'alertContainer',
itemId: 'buttonContainer',
items : [{
xtype: 'button',
cls: 'ackbtn',
text : 'Acknowledge',
name: 'ackButton',
itemId: 'renderbutton'
},{
xtype: 'button',
cls: 'attchmntbtn',
text : 'Attachment',
name: 'attButton',
itemId: 'renderattachmntbutton'
}]
});
}
},
title: me.title
});
me.callParent();
}
});
I want to get reference to button "Attachment" using itemId "renderattachmntbutton". How to do this?
I tried windowobject.down('#renderattachmntbutton') but still it didn't work. I can get reference to the items placed before init function but not like this. Any idea on what needs to be done to get reference to this button?
That button is not an item (a child) of the window but of the button container. If you want to find it with down then you need to grab a reference to the container and call down on that.
Instead of
windowobject.down('#renderattachmntbutton') // WRONG
call
buttoncontainer.down('#renderattachmntbutton') // Correct
Try this
Ext.ComponentQuery.query('[itemId=renderattachmntbutton]')[0]
The itemId can be used with the getComponent() call on parent items, like container and panels. If you change your itemId on your container to just an id property. You can then get to your child items like so:
Ext.getCmp('buttonContainer').getComponent('renderattachmntbutton');
This is just one possible way, there are others!
You could try
windowobject.down('[itemId=renderattachmntbutton]') ;
I need some suggestions on the following aspect.
BackGround:
I am working on Sencha 2 MVC Application.
In my application, I have a toolbar on several screens.
Currently, I have created a class for the toolbar and then adding the toolbar using xType on the required views as xType: 'customizedToolbar'.
But instead of that,I want to declare a parent class where this toolbar is defined and then extend this parent class from all other child classes so I can avoid adding the toolbar everytime using xType.
For an example, below is the sample application,
Ext.application({
app:'testmixin',
autoCreateViewport: true,
launch: function() {
// Parent Class
Ext.define('MyParentClass', {
extend: Ext.Panel,
mixinConfig: {
id: 'myMixinIdentifier'
},
config: {
// Is there a way that the items defined in this class will be added in the child class
items:[
{
xtype : 'emailfield',
name : 'name',
id : 'userName',
placeHolder : 'Email',
},
]
},
});
// Main Class
Ext.define('MyMainClass', {
// Benefit of using mixins is that you can add to your class with one
// or more mixins, rather than by extending another class
extend: Ext.Panel,
mixins: {
myMixinIdentifier: 'MyParentClass'
},
constructor: function(config) {
this.callParent(arguments);
this.sample();
},
});
var panel = Ext.create('MyMainClass');
panel.test('abc');
panel.test1('abc');
Ext.Viewport.add(panel);
}
});
Is is possible to add an item in the Parent class and it will be added automatically in the child class thru inheritance?
Thanks
Gendaful
The following code does not use mixing but basic class inheritance :
Ext.Loader.setConfig({
enabled : true
});
Ext.application({
name : ('SF' || 'SenchaFiddle'),
launch : function() {
Ext.define('PanelWithToolbar', {
extend: 'Ext.Container',
xtype: 'panelwithtoolbar',
config: {
items: [{
xtype: 'toolbar',
docked: 'top'
}]
}
});
Ext.define('PanelA', {
extend: 'PanelWithToolbar',
xtype: 'panela'
});
Ext.define('PanelB', {
extend: 'PanelWithToolbar',
xtype: 'panelb'
});
Ext.create('Ext.TabPanel', {
fullscreen: true,
tabBarPosition: 'bottom',
defaults: {
styleHtmlContent: true
},
items: [
{
xtype: 'panela',
title: 'Home',
iconCls: 'home',
html: 'Home Screen'
},
{
xtype: 'panelb',
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen'
}
]
});
}
});
Here is the fiddle
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
how to reuse the same item in multiple tab so that when that item change, other tab will reflect the changes
i try this code but the label in first tab not shown:
var label = Ext.create('Ext.form.Label', {
text : 'mylabel'
});
Ext.onReady(function() {
Ext.create('Ext.tab.Panel', {
width : 200,
height : 200,
renderTo : Ext.getBody(),
items : [{
title : 'tab1',
items : [label, {
xtype : 'button',
handler : function() {
label.setText('changed from tab1');
}
}]
}, {
title : 'tab2',
items : [label, {
xtype : 'button',
handler : function() {
label.setText('changed from tab2');
}
}]
}]
});
});
i'm sorry, what i mean is to use the label globally(like global variable) so that the same instance of label can be displayed and changed from every tab
you can define your label component:
Ext.define('MyLabel', {
extend: 'Ext.form.Label',
alias: 'widget.mylabel',
text : 'mylabel'
});
the alias property is an alias for the class name (in this case MyLabel) and that is why you can use "mylabel" as an xtype
in this way you can reuse the component, like this
var panel = Ext.create('Ext.tab.Panel', {
width : 200,
height : 200,
renderTo : Ext.getBody(),
items : [{
title : 'tab1',
items : [{
xtype: 'mylabel',
itemId: 'item1'
}, {
xtype : 'button',
handler : function(button) {
panel.down('#item2').setText('changed from tab1');
}
}]
}, {
title : 'tab2',
items : [{
xtype: 'mylabel',
itemId: 'item2'
}, {
xtype : 'button',
handler : function(button) {
panel.down('#item1').setText('changed from tab2');
}
}]
});
You can't do exactly what you want here. You see, when you create a label, it has underlying DOM, and naturally that DOM can only exist in one place (so it can't show the same thing on both tabs).
If there is a component that you are wanting to show on both tabs, it seems like it is "higher up" from a data hierarchical perspective. Perhaps it belongs outside the tab panel?
If the label truly belongs in both tabs and should be "the same", you are either going to need to fake it or manually move it between the tabs.
Option 1: Fake It
You can get the most code reuse here by creating a custom Label class, like laurac posted. You still need to keep the label text in sync, so you are going to need to update one when the other's text is changed:
var label1 = Ext.create('Ext.form.Label', {
text : 'mylabel'
});
var label2 = Ext.create('Ext.form.Label', {
text : 'mylabel'
});
Ext.onReady(function() {
Ext.create('Ext.tab.Panel', {
width : 200,
height : 200,
renderTo : Ext.getBody(),
items : [{
title : 'tab1',
items : [label1, {
xtype : 'button',
handler : function() {
label1.setText('changed from tab1');
label2.setText('changed from tab1');
}
}]
}, {
title : 'tab2',
items : [label2, {
xtype : 'button',
handler : function() {
labe2.setText('changed from tab2');
labe1.setText('changed from tab2');
}
}]
}]
});
});
Clearly that doesn't feel to "clean".
Option 2: Manual Control
This might be hacky, but slightly less hacky than option 1. Basic idea is to move the label between to two tabs when they are activated:
var label = Ext.create('Ext.form.Label', {
text : 'mylabel'
});
Ext.onReady(function() {
Ext.create('Ext.tab.Panel', {
width : 200,
height : 200,
renderTo : Ext.getBody(),
items : [{
title : 'tab1',
items : [{
xtype : 'button',
handler : function() {
label.setText('changed from tab1');
}
}],
listeners: {
scope: this,
activate: function(panel) {
panel.insert(0, label);
panel.doLayout();
}
}
}, {
title : 'tab2',
items : [{
xtype : 'button',
handler : function() {
label.setText('changed from tab2');
}
}],
listeners: {
scope: this,
activate: function(panel) {
panel.insert(0, label);
panel.doLayout();
}
}
}]
});
});
Note: I haven't started using Ext4 yet, so some of the code I added might need to be changed for Ext4 (I think maybe doLayout went away?).
Anyway, those are the only two ways I can think of to solve your problem.
Good luck!
I need to render grid component with in the window(with close action destroy) so that i need to create new window and grid component instead of hide and show.
My code is working fine for the first time render but after closing window , i am unable to create it again, getting issue on layout.js
Line: 150
Error: Type mismatch.
************ getting issue in the below method and "dom" is undefined*********
moveItem : function(item, target, position) {
// Make sure target is a dom element
target = target.dom || target;
if (typeof position == 'number') {
position = target.childNodes[position];
}
target.insertBefore(item.el.dom, position || null); //dom is undefined
item.container = Ext.get(target);
this.configureItem(item);
this.childrenChanged = true;
}
************
My controller and view of(grid and window) i have attached .Please identify where i am going wrong
************
Code:
**************************************************************************
Window Controller
**************************************************************************
Ext.define('Adapt.controller.versionManager.verManWinCont', {
extend : 'Ext.app.Controller',
views : ['versionManager.verManWinView'],
init : function() {
this.control({
'verManWindow' : {
afterrender : this.verManWindowAfterRender
}
});
},
verManWindowAfterRender : function(win, options) {
});
**************************************************************************
window View
**************************************************************************
Ext.define('Adapt.view.versionManager.verManWinView' ,{
extend: 'Ext.window.Window',
requires: ['Adapt.controller.versionManager.versionCont','Adapt.view.versionManager.versionGrdView', 'Adapt.store.versionManager.versionStor'],
alias : 'widget.verManWindow',
constructor: function (config) {
this.callParent([config]);},
layout: 'fit',
closeAction :'destroy',
items: [{xtype: 'versionGrd'}],
autoShow :true,
width : 580,
height : 338,
closable : true,
plain : true
});
**************************************************************************
Grid Controller
**************************************************************************
Ext.define('Adapt.controller.versionManager.versionCont', {
extend : 'Ext.app.Controller',
views : ['versionManager.versionGrdView'],
stores : ['versionManager.versionStor'],
models : 'Adapt.model.versionManager.versionModl',
init : function() {
debugger;
this.control({
'versionGrd' : {
itemdblclick : this.versionGridDoubleClick,
afterrender : this.versionGridAfterRender
}
});
},
versionGridAfterRender : function(grid, options) {debugger;
}
});
**************************************************************************
Grid View
**************************************************************************
Ext.define('Adapt.view.versionManager.versionGrdView' ,{
extend: 'Ext.grid.Panel',
requires: ['Ext.grid.*','Adapt.view.versionManager.versionCreateView'],
alias : 'widget.versionGrd',
store: 'versionManager.versionStor',
columns:[
{header: 'Name', dataIndex: 'versionName', flex: 1},
{header: 'State', dataIndex: 'versionState', flex: 1}
],
constructor: function (config) {debugger;
this.callParent([config]);},
dockedItems: []
});
************************************************************************
(creating and showing in this handler)
In viewport Toolbar button handler(Controller)
this.getController('versionManager.verManWinCont');
this.getController('versionManager.versionCont');
new Adapt.view.versionManager.verManWinView();//.show();
Thanks for your time
vinod.P
I had exactly the same problem and solved it by changing the component creation to factory functions.
The reason is that objects in JavaScript are passed by reference, so in the snippet below every grid instance shares the same columns object:
Ext.define('Adapt.view.versionManager.versionGrdView' ,{
extend: 'Ext.grid.Panel',
columns:[
{ header: 'Name', dataIndex: 'versionName', flex: 1 },
{ header: 'State', dataIndex: 'versionState', flex: 1 }
]
});
With the factory function approach you create the grid view like this:
Ext.define('Adapt.view.versionManager.versionGrdView' ,{
extend: 'Ext.grid.Panel',
initComponent: function() {
config = Ext.apply({}, { items: this.buildColumns() });
Ext.apply(this, Ext.apply(this.initialConfig, config));
this.callParent();
}
buildColumns: function() {
return [
{ header: 'Name', dataIndex: 'versionName', flex: 1 },
{ header: 'State', dataIndex: 'versionState', flex: 1 }
]
});
Now every new instance get its own copy of the columns array, which solves the problem that a part of the configuration has been destroyed. As a nice side effect, I also noticed that the startup of the application has reduced since I use only factory methods.
Check your Column array which is sent to reconfigure.