We Keep Coding

Better understanding Ext.tab.Panel and explicitly setting the html

I want to use a third party image library that needs to be instantiated with a string value that was used for a corresponding div id.
With that, I would like to use Ext.tab.Panel to be able to switch between each instantiated instance of the third party image library.
I’m struggling with being able to set the div's id on the containers of each tab.
For example:
Ext.define('MYAPP.view.MainView', {
extend: 'Ext.panel.Panel',
xtype: 'mainview',
controller: 'mainviewcontroller',
layout: 'fit',
tbar: [{
xtype: 'somebuttons',
}],
items: [{
xtype: 'imagetab',
title: 'tab1',
items: [{
xtype: 'container',
html: '<div id="instance1"></div>'
}]
}, {
xtype: 'imagetab',
title: 'tab2',
items: [{
xtype: 'container',
html: '<div id="instance2"></div>'
}]
}]
});
Then in the MainView controller, I listen to onBoxReady event and instantiate each instance of the third-party image library with the names instance1 and instance2 (same as the tab containers div id’s).
The third-party image library is instantiated fine, but the images don't show. When I inspect each tab's corresponding containers, there div ids aren’t what I set them to be above.
i.e.:
html: '<div id="instance1"></div>' or id="instance2"></div>'
Does anyone have any thoughts in how to set the div's id of each tab's containers?
Thanks for the help!

Try this:
Ext.create('Ext.TabPanel', {
renderTo: Ext.getBody(),
items: [{
xtype: 'container',
id: 'instance1',
autoEl: {
id: 'instance1', // must be same as container id
......
}
}]
});
It will create div with an id.

Displaying components in Ext.form.Panel

I have a custom component (a grid), that i want to add to a panel, and then have a strip of components on the top.
All the examples on the internet look like this :
var extPanel = Ext.create('Ext.form.Panel', {
items: [{
fieldLabel: 'Send To',
name: 'to',
anchor:'100%'
},{
fieldLabel: 'Subject',
name: 'subject',
anchor: '100%'
},
I want to add my own custom component, called myGrid. I would expect some kind property called component passing in the items, but I have no idea, because there is no documentation on what this 'items' array can be.
var extPanel = Ext.create('Ext.form.Panel', {
items: [{
component : myGrid
anchor:'100%' // anchor width by percentage
}

You can use xtype to explicitly create already defined components.You can refer this fiddle : Demo

I solved my problem by nesting items in items, like so :
this.packageGrid = Ext.create('js.grid.PackageGrid', {
xtype: 'packageGrid',
// title: 'Packages',
width: '100%'
});
var extPanel = Ext.create('Ext.Panel', {
layout:'border',
bodyPadding: 5,
items:[{
region:'center'
,layout:'fit'
,border:false,
items:[
this.packageGrid
]
},{
region:'north'
,layout:'fit'
,border:false
,height:50
,collapsible:false,
items:[
button
]
}],
width: '979px',
height: '400px'
});

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).

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.

Ext js FormPanel is not showing panel items when toolbar is present

I seem to be having a weird issue here. An extended component has the following code:
MyApp.panels.RelationshipDetails = Ext.extend(Ext.FormPanel, {
closable: true,
relationshipId: null,
documentId: null,
title: 'Relationship',
initComponent: function () {
if (!this.verifyRequiredData()) {
MyApp.panels.RelationshipDetails.superclass.initComponent.call(this);
return;
}
// Build components
this.tbar = this.buildToolbar();
this.items = this.buildDetailItemArray();
MyApp.panels.RelationshipDetails.superclass.initComponent.call(this);
},
verifyRequiredData: function () {
// Verification code here
},
buildDetailItemArray: function () {
return [{
xtype: 'fieldset',
title: 'Details',
collapsible: true,
autoHeight: true,
items: [{
xtype: 'hidden',
name: 'Id'
}, {
xtype: 'textfield',
fieldLabel: 'Name',
name: 'Name'
}, {
xtype: 'textfield',
fieldLabel: 'Description',
name: 'Description'
}, {
xtype: 'button',
text: 'Save',
name: 'saveButton'
}]
}];
},
buildToolbar: function () {
return new Ext.Toolbar({
// Toolbar Config
});
}
});
The issue is that when this panel renders, the toolbar is the only thing that renders. Through debugging I can see that BuildDetailItemArray() is being called correctly and returning the correct result.
It gets even weirder when I comment out the this.tbar = line, because when the toolbar is not present, the fieldset and field renders correctly. This occurs even if I extend Panel instead of FormPanel. I also tried abstracting out the form fields into it's own component, and the same thing occurs.
Anyone have any idea why this doesn't seem to work?

What sort of layout are you trying to put this panel into? Also, are you setting a height for this panel?
Often, if you aren't specifying a height for the component to be added (in your case, this panel), or you're not setting an anchor if using an AnchorLayout, component content won't be shown, but the toolbar still will.
It'd be good to know the context of this panel in your overall layout.