We Keep Coding

ExtJS Can I use an IF statement inside the same component

I'm managing a software with a framework ExtJS 3.3.1.
My problem is that I want to use a component depending by the caller.
I have a region of a tabpanel and I want to use this pseudo-code:
items: [{
region: 'center',
title: 'List of Transmissions',
// PSEUDO CODE START
IF (RECEIVE A CALLER BY THIS COMPONENT) {
id: 'idTab1'
xtype: 'typeA'
}
ELSE IF(RECEIVE A CALLER BY THIS COMPONENT) {
id: 'idTab2'
xtype: 'typeB'
}
// PSEUDO CODE END
}]
Could someone help me to translate it in ExtJS 3.3.1 ?
Thank you

You can used binding function for hide/show typeA and typeB with a caller variable.
You can used afterrender or boxready listener for create you'r cmp after the load of the parent panel.
I can't create fiddle cause i don't have forum sencha account yet but you can tried with this code on this https://fiddle.sencha.com/ :
var callerVar = false;
new Ext.Panel({
renderTo: document.body,
items: [
{
xtype: 'panel',
html: 'firstPanel',
hidden: callerVar
},
{
xtype: 'panel',
html: 'scndPanel',
hidden: !callerVar
}
]
});
You to decide how to update callerVar, i don't how you want to do this.

Thanks to Enzo BLACHON and his idea.
I'm trying to solve using the layout:'card' and add/remove the ID. According to me even if it solve my problem, it's too compicated, I would like to ask if there is a manner less complicated and more useful to improve the quality of the code:
id: 'flip_ID',
region: 'center',
layout: 'card',
activeItem: 0,
items: [
{
itemId: 'idTab1',
xtype: 'typeA'
},
{
itemId: 'idTab2',
xtype: 'typeB'
}]
When there is a call to the first component I added this code:
var center = Ext.getCmp('flip_ID');
center.add(Ext.ComponentMgr.create({
itemId: 'idTab1',
xtype: 'typeA'
}));
center.getLayout().setActiveItem('idTab1');
center.remove('idTab2', true);
When there is a call to the second component I added this code:
var center = Ext.getCmp('flip_ID');
center.add(Ext.ComponentMgr.create({
itemId: 'idTab2',
xtype: 'typeB'
}));
center.getLayout().setActiveItem('idTab2');
center.remove('idTab1', true);

Rendering custom xtype widget to a container

I create a custom xtype widget from a promooted class. When I want to render the widget to a container I get an error Cannot read property 'dom' of null.
cont is my container
var d = Ext.widget('MultiViewComponent', {
renderTo: cont
});
I have tried renderTo:cont.getLayout().
I have also tried using cont.add and then cont.doLayout();
For 'renderTo' documentation states:
Do not use this option if the Component is to be a child item of a Container. It is the responsibility of the Container's layout manager to render and manage its child items.
When using add to add multiple times. All components are visible on the screen but only one is inside cont.items.items(last one added) So when using cont.removeAll() only one is removed.
What am I missing here or doing wrong? Please help and advise.
UPDATE: If try to remove the widgets from container using container.removeAll()
only one of the widgets is deleted. Looking into container.items.items only one was there even if multiple components were added.
var d = Ext.widget('MultiViewComponent', {
});
cont.add(d);
cont.doLayout();
//later
cont.removeAll();
MultiViewComponent
Ext.define('myApp.view.MultiViewComponent', {
extend: 'Ext.container.Container',
alias: 'widget.MultiViewComponent',
requires: [
'Ext.form.Label',
'Ext.grid.Panel',
'Ext.grid.View',
'Ext.grid.column.Date',
'Ext.grid.column.Number'
],
height: 204,
itemId: 'multiViewComponent',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
xtype: 'label',
itemId: 'multiViewLabel',
text: 'My Label'
},
{
xtype: 'gridpanel',
itemId: 'multiViewGrid',
width: 498,
title: 'My Grid Panel',
store: 'Document',
columns: [
{
xtype: 'datecolumn',
dataIndex: 'dateCreated',
text: 'DateCreated'
},
{
xtype: 'gridcolumn',
dataIndex: 'documentType',
text: 'DocumentType'
},
{
xtype: 'gridcolumn',
dataIndex: 'description',
text: 'Description'
},
{
xtype: 'gridcolumn',
dataIndex: 'name',
text: 'Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'creator',
text: 'Creator'
},
{
xtype: 'numbercolumn',
dataIndex: 'fileId',
text: 'FileId'
},
{
xtype: 'numbercolumn',
dataIndex: 'metaFileId',
text: 'MetaFileId'
},
{
xtype: 'gridcolumn',
dataIndex: 'uid',
text: 'Uid'
}
]
}
]
});
me.callParent(arguments);
}
});

cont.items is an Ext.util.MixedCollection, not an array. The underlying array is at cont.items.items. Anyway, you don't want to touch that. Use Ext.container.Container#remove to remove your child component afterward.
Your docs quote says it all... Containers do plenty of things with their components, most notably rendering, layout, and ComponentQuery wiring. You can't just change their DOM elements or javascript member variable and expect them to work. They have to be aware of when their state change to react accordingly, that's why you should always use the documented public methods to manipulate them. To let them know something happen and give them the chance to act on it.
Update
Given your feedback, it seems apparent that you're doing something funky with your code. Can't say because you haven't posted it... But here's a complete working example of what you want to do. Check your own code against it.
Ext.define('My.Component', {
extend: 'Ext.Component'
,alias: 'widget.mycmp'
,html: "<p>Lorem ipsum dolor sit amet et cetera...</p>"
,initComponent: function() {
if (this.name) {
this.html = '<h1>' + this.name + '</h1>' + this.html;
}
this.callParent();
}
});
Render a container with two initial children:
var ct = Ext.widget('container', {
renderTo: Ext.getBody()
,items: [{
xtype: 'mycmp'
,name: 'First static'
},{
xtype: 'mycmp'
,name: 'Second static'
}]
});
Adding a child dynamically post creation:
// Notice that layout is updated automatically
var first = ct.add({
xtype: 'mycmp'
,name: 'First dynamic'
});
// Possible alternative:
var firstAlt = Ext.widget('mycmp', {
name: 'First dynamic (alternative)'
});
ct.add(firstAlt);
And so on...
var second = ct.add({
xtype: 'mycmp'
,name: 'Second dynamic'
});
Removing a given child by reference:
ct.remove(first);
Removing a component by index:
ct.remove(ct.items.getAt(1));
Removing all components:
ct.removeAll();
Update 2
Your error is the itemId. One container must not have two items with the same itemId.

I don't know your app's architecture, but i think you could try show the widget when some container's event fired (beforerender for example).

ExtJS MVC adding a toolbar

I have the following situation, I am trying to add a toolbar (Ext.toolbar.Toolbar) to a grid (Ext.panel.grid). The grid is inside of a Ext.window.Window which is in my main app.js looking something like this:
Ext.application({
name: 'FileBrowser',
appFolder: '/Scripts/dashboard/FileBrowserApp',
controllers:['BrowserController'],
launch: function() {
win = Ext.create('Ext.window.Window', {
title: 'Document Library',
width: 700,
height: 500,
layout: 'border',
bodyStyle: 'padding: 5px;',
items: [
{
xtype:'tree_dir'
},
{
xtype:'grid_file',
}
]
});
win.show();
}
})
My question is, how do I do that? Do I dynamically add the toolbar in the controller? If so how do I access the above grid_file from the controller? Should I somehow add it inside my grid_file view? Then how do I access the toolbar view?

myPanel.addDocked({
xtype: 'toolbar',
dock: 'top',
items:[
{
xtype:'button',text:'Open Win1',ref:'win1Button'
},{
xtype:'button',text:'Open Win2',ref:'win2Button'
}]
});

Column layout in EXTJS

I am new to ExtJs. I need to create an entry form in 2 columns using column layout.
My code is as follows:
Ext.onReady(function(){
var patientForm = new Ext.FormPanel({
renderTo: "patientCreation",
frame: true,
title: 'Search Criteria',
labelAlign: 'left',
labelStyle: 'font-weight:bold;',
labelWidth: 85,
width: 900,
items: [
{
layout:'column',
items:[
{ // column #1
columnWidth: .33,
layout: 'form',
items: [
{ xtype: 'textfield',
fieldLabel: 'FirstName',
name: 'firstName',
vtype : 'alpha',
allowBlank:false
},{
xtype: 'textfield',
fieldLabel: 'MiddleName',
name: 'middleName',
vtype : 'alpha'
}
] // close items for first column
}]
}]
});
var win = new Ext.Window({
layout:'form',
closable: false,
resizable: false,
plain: true,
border: false,
items: [patientForm]
});
win.show();
});
But when I run the code, I got h is undefined error. How to design a form in column layout? Is there any procedure, steps or links which give a clear idea?

I have run the same code with ExtJs 3.2.2 and got a similar error. But when I removed renderTo: "patientCreation"
code worked:
That part is not necessary 'cause you are placing the form in a the window.

I do not know anything about ExtJS 3. If you are using ExtJS 4, then you have specified layout config at wrong place. You have specified it inside items config, it should not be inside items config.
Layout can be specified as follows in ExtJS 4:
Ext.define('your_domain_name.viewName', {
extend : 'Ext.panel.Panel',
alias : 'widget.any_name_you_want',
layout : 'column',
initComponent : function() {
this.items = [
// all items inside form/panel will go here
];
this.callParent(arguments);
}
});
You can get sample code about all the panels here

try applying renderTo config to window instead of form
check example

GridPanel as item of tabPanel

I'm having trouble knowing if I syntactically have this setup right. From another thread, I understand to add the GridPanel to the tabBar items, which I do so below. In my App.js, I define a grid copied from the ExtJS example (here).
var grid = new Ext.grid.GridPanel({
// Details can be seen at
// http://dev.sencha.com/deploy/ext-3.4.0/docs/?class=Ext.Component?class=Ext.grid.GridPanel
});
Below that, I create an instance of my app:
appname.App = Ext.extend(Ext.TabPanel, {
fullscreen: true,
tabBar: {
ui: 'gray',
dock: 'bottom',
layout: { pack: 'center' }
},
cardSwitchAnimation: false,
initComponent: function() {
if (navigator.onLine) {
// Add items to the tabPanel
this.items = [{
title: 'Tab 1',
iconCls: 'tab1',
xtype: 'tab1',
pages: this.accountPages
}, {
title: 'Tab 2',
iconCls: 'tab2',
xtype: 'tab2',
pages: this.accountPages
},
grid];
} else {
this.on('render', function(){
this.el.mask('No internet connection.');
}, this);
}
appname.App.superclass.initComponent.call(this);
}
});
The app normally loads just fine, but with the addition of grid, it breaks and nothing loads.
Syntactically, should I be defining grid inside the app instantiation like A) grid: ..., B) this.grid = new ..., or C) as I have it as a regular var named grid?
Many thanks.

There is no inbuilt GridPanel comes with Sencha Touch. So, that Ext.grid.GridPanel will not work here. However, you can use Simoen's TouchGrid extension from here.
All the source codes are available here.