Develop Reference

Tab/Vbox layout

I have an app that uses a Tab layout with the same grid panel shared as an xtype widget between each form panel bound to each tab.
My Main tab layout is as follows:
Ext.define('cardioCatalogQT.view.main.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main-view',
controller: 'main-view',
requires: [
'cardioCatalogQT.view.main.MainController',
'cardioCatalogQT.view.main.MainModel',
'Ext.ux.form.ItemSelector',
'Ext.tip.QuickTipManager',
'Ext.layout.container.Card'
],
style: 'background-color:#dfe8f5;',
width: '100%',
height: 400,
layout: 'vbox',
defaults: {
bodyPadding: 5
},
items: [{
title:'Main',
region: 'south',
xtype: 'form',
itemId: 'Ajax',
flex: 1,
styleHtmlContent: true,
items:[{
xtype: 'image',
src: 'resources/images/R3D3.png',
height: 50,
width: 280
},{
title: 'Ad Hoc Sandbox for Cohort Discovery'
}] ,
lbar:[{
text: 'Initiate advanced request',
xtype: 'button',
handler: function(button){
var url = 'https://url_here';
//cardioCatalogQT.service.UtilityService.http_auth(button);
window.open(url);
}
}]
},
/*{
xtype: 'resultsGrid'
//disabled: true
},*/
/*{
xtype: 'searchGrid'
//disabled: true
},*/
{
xtype: 'demographicGrid'
//disabled: true
},
{
xtype: 'vitalGrid'
//disabled: true
},
{
xtype: 'labGrid'
//disabled: true
},
{
xtype: 'diagnosisGrid'
//disabled: true
},
{
xtype: 'medicationGrid'
//disabled: true
},
{
xtype: 'procedureGrid'
//disabled: true
},
{
xtype: 'queryGrid'
//disabled: true
}
]
});
The individual tabs that share the same grid widget (specifically, demographicGrid, vitalGrid, labGrid, diagnosisGrid, procedureGrid and medicationGrid, each referenced by xtype in the main view) look like:
/**
* Widget with template to render to Main view
*/
Ext.define('cardioCatalogQT.view.grid.DemographicGrid', {
extend: 'Ext.form.Panel',
alias: 'widget.demographicGrid',
itemId: 'demographicGrid',
store: 'Payload',
requires: [
'cardioCatalogQT.view.main.MainController'
],
config: {
variableHeights: false,
title: 'Demographics',
xtype: 'form',
width: 200,
bodyPadding: 10,
defaults: {
anchor: '100%',
labelWidth: 100
},
// inline buttons
dockedItems: [ {
xtype: 'toolbar',
height: 100,
items: [{
xtype: 'button',
text: 'Constrain sex',
itemId: 'showSex',
hidden: false,
listeners: {
click: function (button) {
button.up('grid').down('#sexValue').show();
button.up('grid').down('#hideSex').show();
button.up('grid').down('#showSex').hide();
}
}
}, {
xtype: 'button',
text: 'Hide sex constraint',
itemId: 'hideSex',
hidden: true,
listeners: {
click: function (button) {
button.up('grid').down('#sexValue').hide();
button.up('grid').down('#sexValue').setValue('');
button.up('grid').down('#hideSex').hide();
button.up('grid').down('#showSex').show();
}
}
},{ // Sex
xtype: 'combo',
itemId: 'sexValue',
queryMode: 'local',
editable: false,
value: 'eq',
triggerAction: 'all',
forceSelection: true,
fieldLabel: 'Select sex',
displayField: 'name',
valueField: 'value',
hidden: true,
store: {
fields: ['name', 'value'],
data: [
{name: 'female', value: 'f'},
{name: 'male', value: 'm'}
]
}
}, {
xtype: 'button',
text: 'Constrain age',
itemId: 'showAge',
hidden: false,
listeners: {
click: function (button) {
button.up('grid').down('#ageComparator').show();
button.up('grid').down('#ageValue').show();
button.up('grid').down('#hideAge').show();
button.up('grid').down('#showAge').hide();
}
}
}, {
xtype: 'button',
text: 'Hide age',
itemId: 'hideAge',
hidden: true,
listeners: {
click: function (button) {
button.up('grid').down('#ageComparator').hide();
button.up('grid').down('#ageValue').hide();
button.up('grid').down('#upperAgeValue').hide();
button.up('grid').down('#ageComparator').setValue('');
button.up('grid').down('#ageValue').setValue('');
button.up('grid').down('#upperAgeValue').setValue('');
button.up('grid').down('#hideAge').hide();
button.up('grid').down('#showAge').show();
}
}
}, { // Age
xtype: 'combo',
itemId: 'ageComparator',
queryMode: 'local',
editable: false,
value: '',
triggerAction: 'all',
forceSelection: true,
fieldLabel: 'Select age that is',
displayField: 'name',
valueField: 'value',
hidden: true,
store: {
fields: ['name', 'value'],
data: [
{name: '=', value: 'eq'},
{name: '<', value: 'lt'},
{name: '<=', value: 'le'},
{name: '>', value: 'gt'},
{name: '>=', value: 'ge'},
{name: 'between', value: 'bt'}
]
},
listeners: {
change: function(combo, value) {
// use component query to toggle the hidden state of upper value
if (value === 'bt') {
combo.up('grid').down('#upperAgeValue').show();
} else {
combo.up('grid').down('#upperAgeValue').hide();
}
}
}
},{
xtype: 'numberfield',
itemId: 'ageValue',
fieldLabel: 'value of',
value: '',
hidden: true
},{
xtype: 'numberfield',
itemId: 'upperAgeValue',
fieldLabel: 'and',
hidden: true
},{
xtype: 'button',
text: 'Constrain race/ethnicity',
itemId: 'showRace',
hidden: false,
listeners: {
click: function (button) {
button.up('grid').down('#raceValue').show();
button.up('grid').down('#hideRace').show();
button.up('grid').down('#showRace').hide();
}
}
}, {
xtype: 'button',
text: 'Hide race/ethnicity constraint',
itemId: 'hideRace',
hidden: true,
listeners: {
click: function (button) {
button.up('grid').down('#raceValue').hide();
button.up('grid').down('#raceValue').setValue('');
button.up('grid').down('#hideRace').hide();
button.up('grid').down('#showRace').show();
}
}
},{ // Race
xtype: 'combo',
itemId: 'raceValue',
queryMode: 'local',
editable: false,
value: 'eq',
triggerAction: 'all',
forceSelection: true,
fieldLabel: 'Select race',
displayField: 'name',
valueField: 'value',
hidden: true,
store: {
fields: ['name', 'value'],
data: [
{name: 'female', value: 'f'},
{name: 'male', value: 'm'}
]
}
},{
//minWidth: 80,
text: 'Add to search',
xtype: 'button',
itemId: 'searchClick',
handler: 'onSubmitDemographics'
}]
},
{
xtype:'searchGrid'
}
]
}
});
The only difference between each of the form panels in the tabs are the item components. Each of these form panels references an xtype of 'searchGrid' and renders it like in the attached image:
The problem is that I have 6-instances of this same grid. This works for the most part, but it is causing some issues related to getting control of the checkboxes in my grid along with some bizarre grid store load behaviors, and honestly, keeping track of components using this anti-pattern is a PITA.
I would like to somehow have a single instance of my searchGrid in a lower vertical panel, while an upper vertical panel has the item components I need to change according to the requirements for each tab. An example of how the item controls vary is
My desired behavior is that when I click on a tab, the upper item components would take me to a different form panel, while the lower panel stay fixed on the search grid.
However, I currently have the searchGrid bound to each tab's form panel, since that is the only way I could get this to work.
The searchGrid grid panel looks like:
Ext.define('cardioCatalogQT.view.grid.Search', {
extend: 'Ext.grid.Panel',
xtype: 'framing-buttons',
store: 'Payload',
itemId: 'searchGrid',
requires: [
'cardioCatalogQT.view.main.MainController'
],
columns: [
{text: "ID", width: 50, sortable: true, dataIndex: 'id'},
{text: "Type", width: 120, sortable: true, dataIndex: 'type'},
{text: "Key", flex: 1, sortable: true, dataIndex: 'key'},
{text: "Criteria", flex: 1, sortable: true, dataIndex: 'criteria'},
{text: "DateOperator", flex: 1, sortable: true, dataIndex: 'dateComparatorSymbol'},
{text: "When", flex: 1, sortable: true, dataIndex: 'dateValue'},
{text: "Count", flex: 1, sortable: true, dataIndex: 'n'}
],
columnLines: true,
selModel: {
type: 'checkboxmodel',
listeners: {
selectionchange: 'onSelectionChange'
}
},
// When true, this view acts as the default listener scope for listeners declared within it.
// For example the selectionModel's selectionchange listener resolves to this.
defaultListenerScope: false,
// This view acts as a reference holder for all components below it which have a reference config
// For example the onSelectionChange listener accesses a button using its reference
//referenceHolder: true,
// inline buttons
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
layout: {
pack: 'center'
}
}, {
xtype: 'toolbar',
items: [{
//reference: 'andButton',
text: 'AND',
itemId: 'andButton',
tooltip: 'Add the selected criteria as AND',
iconCls: 'and',
disabled: true,
handler: 'onCriterionAnd'
},'-',{
//reference: 'orButton',
text: 'OR',
itemId: 'orButton',
tooltip: 'Add the selected criteria as OR',
iconCls: 'or',
disabled: true,
handler: 'onCriterionOr'
},'-',{
//reference: 'notButton',
text: 'NOT',
itemId: 'notButton',
tooltip: 'Add the selected criteria as NOT',
iconCls: 'not',
disabled: true,
handler: 'onCriterionNot'
},'-',{
//reference: 'removeButton', // The referenceHolder can access this button by this name
text: 'Remove',
itemId: 'removeButton',
tooltip: 'Remove the selected item',
iconCls: 'remove',
disabled: true,
handler: 'onCriterionRemove'
},'-', { // SaveQuery
//reference: 'SaveQuery',
text: 'Save',
itemId: 'saveQuery',
tooltip: 'save the current filter',
iconCls: 'save',
disabled: true,
handler: 'onFilterSave'
}]
}],
height: 1000,
frame: true,
iconCls: 'icon-grid',
alias: 'widget.searchGrid',
title: 'Search',
initComponent: function() {
this.width = 750;
this.callParent();
}
});
I messed around with using a Vbox layout to get my desired behavior, but was rather unsuccessful. This does not seem like that uncommon of a use case to have an upper Vbox panel change to different form panels based on a Tab click, while the lower Vbox panel remains fixed. Any insight would be most welcome.

If I understand correctly, this small test of mine should do exactly what you want, using a border layout with regions north and center.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="ext-theme-gray.css">
<title>Test app</title>
<script type="text/javascript" src="ext-all-dev.js"></script>
<script>
Ext.onReady(function() {
var Viewport = Ext.create('Ext.container.Viewport',{
layout:'border',
items:[{
xtype:'tabpanel',
region:'north',
items:[{
xtype:'panel',
title:'A',
items:[{xtype:'button',text:'Clickme'}]
},{
xtype:'panel',
title:'B',
items:[{xtype:'textfield'}]
}]
},{
xtype:'gridpanel',
title:'center',
region:'center',
columns:[{
dataIndex:'A',
text:'A'
},{
dataIndex:'B',
text:'B'
}]
}]
})
Ext.create('Ext.app.Application',{
name:'TestApp',
autoCreateViewport: true,
views:[
Viewport
]
});
});
</script>
</head>
<body>
</body>
</html>
PS: I used ExtJS 4.2.2, but it should work in other Ext versions as well.

Multi Line Text Area In Editor ExtJs

I have a comment text area in an editor in the grid, but if i write some text and then i push the enter it just complete edit and not create new line. What i want is if i hit enter key, its create new line like this:
Example :
" Wrong list:
asdasdasd
asdasdasdas"
Now i just write in comment like this : "Wrong list: 1.asdasd 2.asdasdasd"
What i must to do with my js?
This is the grid i have:
This is the code :
var chat_grid = Ext.create('Ext.grid.Panel', {
id: 'chatGrid',
store: SuratPesananChatDetailStore,
height: 350,
title: 'Comment Grid',
viewConfig: {
emptyText: '<P ALIGN="CENTER"><font color="red"><U> Tidak ada data </U></font></P>',
getRowClass: function (record, rowIndex, rp, store) {
return 'rowgridspdetailnonstd-height';
}
},
plugins: Ext.create('Ext.grid.plugin.RowEditing', { clicksToEdit: 2, pluginId: 'rowEditingID' }),
frame: true,
loadMask: true,
stripeRows: true,
autoScroll: true,
selModel: GridChatSelectionModel,
cls: 'rowgridspdetailnonstd-height',
tbar:
[
{
id: "IdAddCommentLookUp",
text: "Add Comment",
iconCls: "icon-grid-add",
listeners:
{
'click': function () {
AddCommentListener();
}
}
},
{
id: "IdDeleteChat",
text: "Delete Comment",
iconCls: "icon-cancel",
disabled: true,
listeners:
{
'click': function () {
DeleteChatListener();
}
}
},
{
id: "IdInviteUser",
text: "Invite User",
iconCls: "icon-grid-add",
hidden: true,
listeners:
{
'click': function () {
InviteUserLookUp();
}
}
}
],
columns:
[
{
header: 'Date',
dataIndex: 'CreatedOn',
width: 120,
hidden: false,
sortable: false,
sortableColumn: false
},
{
header: 'Comment',
dataIndex: 'Comment',
editor: { xtype: 'textareafield', allowblank: false, maxLength: 165, enforceMaxLength: true, height: 100, grow: true, completeOnEnter: false },
hidden: false,
width: 370,
sortable: false,
sortableColumn: false
},
{
header: 'Created By',
dataIndex: 'CreatedBy',
width: 120,
hidden: false,
sortable: false,
sortableColumn: false
},
{
header: 'Department',
dataIndex: 'Department',
width: 120,
hidden: false,
sortable: false,
sortableColumn: false
},
{
header: 'Document Name',
dataIndex: 'FileName',
width: 150,
hidden: false,
sortable: false,
sortableColumn: false
},
{
header: 'Upload Document',
dataIndex: 'Panel',
width: 120,
hidden: false,
sortable: false,
sortableColumn: false,
renderer: function (v, m, r, row) {
if (r.data.Panel == 'Download') {
var fileName = r.data.FilePath;
return "" + v + "";
}
else if (r.data.Panel == 'Upload') {
return "" + v + "";
}
else {
return v;
}
}
}
]
});
I have try all the way in google but i can't solve this case.

Enable keyevents of your comment editor, and stopEvent() in Enter key
Sample config:
editor: {
xtype: 'textareafield',
allowblank: false,
maxLength: 165,
enforceMaxLength: true,
height: 100,
grow: true,
completeOnEnter: false,
enableKeyEvents: true, //Listen to keyevents
listeners: {
keydown: function(field, e) {
if (e.getKey() == e.ENTER) {
e.stopEvent(); // Stop event propagation
}
}
}
}
Ref: https://www.sencha.com/forum/showthread.php?293592-Stop-RowEditing-plugin-from-completing-the-edit-on-keypress-enter

Panel Close Action destroy all tabs

I have two opened tabs like this:
On bottom there's an iframe (a Panel) but when i close one, the other tabs disappear:
And got this error:
Uncaught TypeError: Cannot read property 'parentNode' of undefined
The view code:
Ext.define('tls.modulos.repservfact.view.Reporte', {
extend: 'Ext.panel.Panel',
iconCls: 'icon-report',
alias: 'widget.reporte',
closeAction: 'destroy',
name: 'tbReportes',
layout: {
type: 'border'
},
title: 'Resumen Servicios Facturados',
region: 'north',
flex: 1,
initComponent: function() {
var me = this;
var storeGenCar = Ext.create('tls.modulos.repservfact.store.Empresa');
storeGenCar.proxy.extraParams = {IdTipoEmpresa: 'GenCar'};
storeGenCar.load();
var storeTransp = Ext.create('tls.modulos.repservfact.store.Empresa');
storeTransp.proxy.extraParams = {IdTipoEmpresa: 'Transp'};
storeTransp.load();
var storeTipoCarga = Ext.create('tls.modulos.repservfact.store.TipoCarga');
storeTipoCarga.load();
Ext.applyIf(me, {
items: [
{
xtype: 'form',
region: 'center',
layout: 'column',
bodyPadding: 10,
defaults: {
width: 300,
padding: 2
},
items: [
{
xtype: 'datefield',
format: 'Y-m-d',
showToday: true,
fieldLabel: 'Fecha Inicial',
name: 'FechaInicial',
editable: false,
allowBlank: false
},
{
xtype: 'datefield',
format: 'Y-m-d',
showToday: true,
fieldLabel: 'Fecha Final',
name: 'FechaFinal',
editable: false,
allowBlank: false
},
{
xtype: 'combo',
store: storeGenCar,
name: 'cmbGenCar',
fieldLabel: 'Generador de Carga',
displayField: 'RazonSocial',
valueField: 'IdEmpresa',
editable: false,
labelWidth: 130
},
{
xtype: 'combo',
store: storeTransp,
name: 'cmbTransp',
fieldLabel: 'Transportadora',
displayField: 'RazonSocial',
valueField: 'IdEmpresa',
editable: false
},
{
xtype: 'textfield',
name: 'txtPlaca',
fieldLabel: 'Placa'
},
{
xtype: 'combo',
store: storeTipoCarga,
name: 'cmbTipoCarga',
fieldLabel: 'Tipo de Carga',
displayField: 'ValorParametro',
valueField: 'IdValorParametro',
editable: false
},
{
xtype: 'textfield',
name: 'txtProducto',
fieldLabel: 'Producto'
}
],
buttons: [
{
xtype: 'button',
name: 'btnMostrar',
text: 'Ver Reporte',
formBind: true
},
{
xtype: 'button',
name: 'btnExcel',
text: 'Exportar a Excel',
formBind: true,
iconCls: 'icon-xls'
},
{
xtype: 'button',
name: 'btnPDF',
text: 'Exportar a PDF',
formBind: true,
iconCls: 'icon-pdf'
},
{
xtype: 'button',
name: 'btnBorrar',
formBind: true,
text: 'Borrar'
}
]
},
// This is the panel for iframe.
{
xtype: 'panel',
region: 'south',
height: '80%',
html: '',
name: 'ifReporte',
id: 'ifReporte'
}
]
});
me.callParent(arguments);
}
});
If I delete the panel for iframe, works perfectly. But i need it to show a report.
Some help?

extjs4 get instance of view in controller?

I am trying to get an instance of my view within the controller. How can I accomplish this. The main reason I am trying to do this is that I have a grid in my view that I want to disable until a selection from a combobox is made so I need to have access to the instance of the view.
Help?
My controller:
Ext.define('STK.controller.SiteSelectController', {
extend: 'Ext.app.Controller',
stores: ['Inventory', 'Stacker', 'Stackers'],
models: ['Inventory', 'Stackers'],
views: ['scheduler.Scheduler'],
refs: [{
ref: 'stackerselect',
selector: 'panel'
}],
init: function () {
this.control({
'viewport > panel': {
render: this.onPanelRendered
}
});
},
/* render all default functionality */
onPanelRendered: function () {
var view = this.getView('Scheduler'); // this is null?
}
});
My view:
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', '/extjs/examples/ux');
Ext.require([
'Ext.ux.grid.FiltersFeature',
'Ext.ux.LiveSearchGridPanel']);
var filters = {
ftype: 'filters',
autoReload: false,
encode: false,
local: true
};
Ext.define('invtGrid', {
extend: 'Ext.ux.LiveSearchGridPanel',
alias: 'widget.inventorylist',
title: 'Inventory List',
store: 'Inventory',
multiSelect: true,
padding: 20,
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'invtGridDDGroup',
dropGroup: 'stackerGridDDGroup'
},
listeners: {
drop: function (node, data, dropRec, dropPosition) {
var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('ordNum') : ' on empty view';
}
}
},
features: [filters],
stripeRows: true,
columns: [{
header: 'OrdNum',
sortable: true,
dataIndex: 'ordNum',
flex: 1,
filterable: true
}, {
header: 'Item',
sortable: true,
dataIndex: 'item',
flex: 1,
filterable: true
}, {
header: 'Pcs',
sortable: true,
dataIndex: 'pcs',
flex: 1,
filterable: true
}]
});
Ext.define('stackerGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.stackerselect',
title: 'Stacker Select',
store: 'Stacker',
padding: 20,
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'stackerGridDDGroup',
dropGroup: 'invtGridDDGroup'
},
listeners: {
drop: function (node, data, dropRec, dropPosition) {
var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('ordNum') : ' on empty view';
}
}
},
columns: [{
header: 'OrdNum',
dataIndex: 'ordNum',
flex: 1
}, {
header: 'Item',
dataIndex: 'item',
flex: 1
}, {
header: 'Pcs',
dataIndex: 'pcs',
flex: 1
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
text: 'Submit',
action: 'submit'
}, {
text: 'Reset',
action: 'reset'
}]
}, {
xtype: 'toolbar',
dock: 'top',
items: [{
id: 'combo',
xtype: 'combobox',
queryMode: 'local',
fieldLabel: 'Stacker',
displayField: 'stk',
valueField: 'stk',
editable: false,
store: 'Stackers',
region: 'center',
type: 'absolute'
}]
}]
});
Ext.define('STK.view.scheduler.Scheduler', {
extend: 'Ext.panel.Panel',
alias: 'widget.schedulerview',
title: "Scheduler Panel",
layout: {
type: 'column'
},
items: [{
xtype: 'inventorylist',
width: 650,
height: 600,
columnWidth: 0.5,
align: 'stretch'
}, {
xtype: 'stackerselect',
width: 650,
height: 600,
columnWidth: 0.5
}]
});

As I said, Extjs creates getter for your views (those listed in the controller's view array) and you get access to them:
var view = this.getSchedulerSchedulerView();
Once you have the view reference you can do this to get access to the contained grid:
var grid = view.down('.inventorylist');
grid.disable();

Ext Window with custom template

I'd like to create a popup window, that'll have some custom template. The basic functionality is to have some text in header, then form, progressbar and buttons. Problem is that my custom template is rendered at the very end and doesn't really fit in the popup. What is the proper approach for this ? Any examples available anywhere ?
My shortened code :
Ext.define('MyTooltip', {
extend : 'Ext.window.Window',
title: 'Mywindow',
closeAction: 'hide',
width: 300,
height: 300,
layout: 'fit',
resizable: false,
draggable: true,
modal: true,
items: [],
data: {
bar: 'foo'
},
tpl : Ext.create('Ext.XTemplate', '<div class="tooltip"><h1>{bar}</h1><div>{form}</div></div>', {compiled: true}),
initComponent: function(){
var me = this;
//Create items
var progressBar = Ext.create('Ext.ProgressBar', {
text: 'Progress...',
width: 250,
animate: true,
hidden: true,
id: 'widget-progressbar'
});
me.items = [
Ext.create('Ext.form.Panel',{
layout: {
type: 'vbox',
align: 'stretch'
},
border: false,
bodyPadding: 10,
fieldDefaults: {
labelAlign: 'top',
labelWidth: 100,
labelStyle: 'font-weight:bold'
},
items: [
{
width: 50,
xtype: 'combo',
mode: 'local',
value: 'Audi',
triggerAction: 'all',
forceSelection: true,
editable: false,
fieldLabel: 'Cars',
name: 'cars',
queryMode: 'local',
store: ["Audi", "BMW", "Citroen"]
},
progressBar
],
buttons: [
{
text: 'Start',
handler: function() {
},
scope: this
}
]
})
]
me.callParent(arguments);
}
});
EDIT
Following first answer tried to change my initComponent method, but how can I get my items rendered into tpl, or html ?
initComponent: function(){
(...)
me.callParent(arguments);
var tpl = Ext.create('Ext.XTemplate',
'<div>'+
'<div><h3>Available cars</h3>'+
'<div>{form}'+
'</div>'+
'</div>',
{compiled: true}
);
this.html = tpl.apply({
form: me.form.html
});
},

I would not go with using custom tpl property. It all depends on how are you planning to use this base class. In my projects I put common logic inside initComponent() constructor - like creating same toolbar for all child views.