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

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.

Related

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

How to get panel within vbox layout to fill container?

I'm having trouble getting a panel to fill the space within its container panel. The container is a panel with a vbox layout having two child panels. I looked at Extjs how to set 100% height for vbox panel
and have something similar but it doesn't seem to work.
Screenshots:-
http://i.imgur.com/nAbCr.png
The screenshot is from when i use a 'fit' layout or dont even have the combobox or optionsview in a containing panel. So, what i want is for the 'options' panel to extend all the way down till the 'results' panel.
with the present vbox layout this is what i get - http://i.imgur.com/cB0k1.png
Ext.define('PA.view.CreateReportView', {
extend: 'Ext.panel.Panel',
alias: 'widget.createreportview',
id: 'createreport-panel',
requires: [
'PA.view.OptionsView', // options panel
'PA.common.Connection'],
title: 'Create Report',
items: [{
xtype: 'panel',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'panel',
border: false,
height: '50px',
items: [{
xtype: 'combobox',
....
}]
}, {
xtype: 'panel',
border: false,
flex: 1,
items: [{
xtype: 'optionsview', // options panel
style: {
paddingTop: '10px'
}
}]
}]
}]
});
The value of height: should be a number, not a string. So use height: 50 instead.
I think you have it close to what you need. Couple of observations:
1. Heights need to be set as integers (no px suffix)
2. Each container that will have children should have a layout defined for them, even though there is default - it might not be what you want.
Here is your layout working reasonably well http://jsfiddle.net/dbrin/NJjhB/
One other suggestion I would add is to use a tool like Illuminations for Developers - a firebug plugin that knows about ExtJS framework.

Adding tabs to an existing toolbar in ExtJS

I have an existing toolbar and would like to add tabs to it that would flip between two panels that use a card layout. What would be my best option and are there any examples of doing so?
Is it possible to add the tabs to my existing toolbar? Changing the xtype on my existing buttons didn't provide me with the tabs I was hoping to see.
Create a tab panel which would contain my two cards, mapping each tab to its panel. With this option, can I add additional buttons and menus to the tab panel?
Here's a sample of my existing toolbar code, can message_button and attachments_button simply have an xtype of tab and then somehow emulate the tab functionality?
Ext.define('MyArchive.Toolbar', {
alias: 'myarchive.toolbar',
extend: 'Ext.toolbar.Toolbar',
dock: 'top',
width: '100%',
items: [
// Pretty straight forward buttons with a listener, nothing fancy
messages_button,
attachments_button,
'->',
{ xtype: 'button', id: 'forward-button', text: 'Forward' },
'-',
{ xtype: 'button', id: 'recover-button', text: 'Recover' },
'-',
{
text: 'Download',
menu: {
xtype: 'menu',
id: 'download-menu',
items: [
{xtype: 'menuitem', id: 'download-original', text: 'Original', iconCls: 'download-icon'},
{xtype: 'menuitem', id: 'download-pdf', text: 'PDF', iconCls: 'pdf-icon'}
]
}
}
]
Is it possible to add the tabs to my existing toolbar? Changing the
xtype on my existing buttons didn't provide me with the tabs I was
hoping to see.
I've tried it. But no luck.
Create a tab panel which would contain my two cards, mapping each tab
to its panel. With this option, can I add additional buttons and menus
to the tab panel?
It is possible. But result looks ugly (you can decorate it with CSS).
Use tabpanel.tabBar.add() to add buttons and menus (Here is demo):
tabpanel.tabBar.add({
xtype: 'button',
text: 'hallo, I\'m a button'
});
tabpanel.tabBar.add({
xtype: 'splitbutton',
text: 'Download',
menu: {
xtype: 'menu',
id: 'download-menu',
// ans so on ...

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.

Categories