We Keep Coding

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

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.

How to completely hide the dockedItems toolbar

I'm able to hide items among the dockedItems of a TabPanel, but am wanting to temporarily hide the entire dock, because the toolbar itself still takes up space and the rest of the content does not fill the screen.
So far, I do like so:
myApp.views.productList.dockedItems.items[0].removeAll(true);
myApp.views.productList.doComponentLayout();
Alternatively:
myApp.views.productList.getComponent('search').removeAll(true);
myApp.views.productList.doComponentLayout();
But neither removes the dockedItems toolbar itself.
I've even tried to give the dockedItems individually and collectively an id: to remove the whole component, but without luck. I've also tried moving the toolbar in question out from the docked items and into the items: property of the containing panel, but this breaks other things in my app that I'd rather not change at present.
Any clues on how to do this?

If I understand you correctly you want to temporally remove tabBar from a tabPanel. I was able to accomplish this through giving and id to my tabBar and then using removeDocked and addDocked methods. I'm new to sencha-touch so most likely there is a better way of doing this
The code below removes tabBar from tabPanel and then adds it back again.
Ext.setup({
onReady: function() {
var tabpanel = new Ext.TabPanel({
ui : 'dark',
sortable : true,
tabBar:{
id: 'tabPanelTabBar'
},
items: [
{title: 'Tab 1',html : '1',cls : 'card1'},
{title: 'Tab 2',html : '2',cls : 'card2'},
{title: 'Tab 3',html : '3',cls : 'card3'}
]
});
var paneltest = new Ext.Panel({
fullscreen: true,
dockedItems:[
{
xtype: 'button',
text: 'Disable TabBar',
scope: this,
hasDisabled: false,
handler: function(btn) {
console.log(btn);
if (btn.hasDisabled) {
tabpanel.addDocked(Ext.getCmp('tabPanelTabBar'), 0);
btn.hasDisabled = false;
btn.setText('Disable TabBar');
} else {
tabpanel.removeDocked(Ext.getCmp('tabPanelTabBar'), false)
btn.hasDisabled = true;
btn.setText('Enable TabBar');
}
}}
],
items:[tabpanel]
});
paneltest.show()
}
})

в dockedItems добавить button, которая будет обращаться к элементу panel.dockedItems и изменять/скрывать сам dockedItems
function f_create_accord(P_el_id, P_el_params) {
P_el = Ext.create
(
'Ext.panel.Panel',
{
id: P_el_id
, border: false
, x: P_el_params.left
, y: P_el_params.top
, id_el: P_el_params.id_el
, layout: 'accordion'
, dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
P_el_id: P_el_id,
xtype: 'button',
text: 'добавить',
}, {
id_el: P_el_id,
xtype: 'button',
text: 'скрыть',
vision: true,
listeners: {
click: function (el, v2, v3) {
if (el.vision) {
Ext.getCmp(el.id_el).dockedItems.items[0].setHeight(5);
Ext.getCmp(el.id_el).dockedItems.items[0].items.items[0].hide();
Ext.getCmp(el.id_el).dockedItems.items[0].items.items[1].setWidth(Ext.getCmp(el.id_el).getWidth());
el.vision = false
}
else {
Ext.getCmp(el.id_el).dockedItems.items[0].setHeight('15px');
Ext.getCmp(el.id_el).dockedItems.items[0].items.items[0].show();
Ext.getCmp(el.id_el).dockedItems.items[0].items.items[1].setWidth(60);
el.vision = true
}
// Ext.getCmp(el.id_el).dockedItems.items[i].hide();
}
}
}]
}]
}
);
P_el.setStyle('position', 'absolute');
P_el.setStyle('box-shadow', ' 0px 0px 0px 1px green');
P_el.setStyle('background', 'border-box');
return P_el;
}