Background: I am developing an application using the senchatouch 2 MVC framework.
I am working on a screen which uses a tabpanel with two tabs.
Issue: In first tab, I want to display a titleBar and a List. I am able to display the titleBar but not the list inside the tab. When I inspected the element using Google Chrome, the list is shown as empty. I am using a sample List code from the sencha website. I am able to display list in another panel but it is not displayed when I am placing it as an item in tabPanel.
This is the code I am using:
Ext.define('POC.view.WUHomePage', {
extend: 'Ext.TabPanel',
requires: ['Ext.TitleBar', 'Ext.dataview.List', 'Ext.data.proxy.JsonP'],
alias: 'widget.wuHomePageView',
config: {
fullscreen: true,
tabBarPosition: 'bottom',
cardSwitchAnimation: 'slide',
defaults: {
styleHtmlContent: true
},
items: [{
// This is first tab
title: 'Home',
iconCls: 'home',
items: [{
xtype: 'titlebar',
title: 'Hello',
docked: 'top',
items: [{
xtype: 'button',
text: 'LogOut',
ui: 'action',
itemId: 'newButton',
align: 'right'
}]
}, {
xtype: 'list',
title: 'Sample',
fullscreen: true,
itemTpl: '{title}',
data: [{
title: 'Item 1'
}, {
title: 'Item 2'
}, {
title: 'Item 3'
}, {
title: 'Item 4'
}]
}]
},
// This is second tab
{
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen'
}]
},
});
Do not set the list to fullscreen. Only one component should be set to fullscreen, in your case it is the TabPanel. Instead set the list to height 100% and the parent component with a fit layout.
Related
I am currently working on ExtJs and I am stuck at a place where I want to iterate through all components and find the parent tab of each component.
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.tab.Panel', {
width: 300,
height: 200,
activeTab: 0,
items: [
{
title: 'Tab 1',
bodyPadding: 10,
items : [{
xtype: 'fieldset',
itemId: 'fieldsetId',
items: [{
xtype: 'checkbox',
fieldLabel: 'Check 1'
},{
xtype: 'checkbox',
fieldLabel: 'Check 2'
},{
fieldLabel: 'Combo 1',
xtype: 'combobox',
store: ['value1','value2','value3']
}]
},
{
xtype: 'button',
text: 'Reset',
}]
},
{
title: 'Tab 2',
html : 'Another one',
items: [{
xtype: 'button',
text: 'Test',
}]
}
],
renderTo : Ext.getBody()
});
}
});
In above code, when I iterate through all components and log name of the parent tab whether it is Tab 1 or Tab 2
Whenever you are iterating through all the components, just do
field.up().up()
where field is the component of your tab and above statement will return you the parent tabpanel and so with
field.up().up().title
will return you "Tab 1"
In the same way for tab 2 components it will be
field.up() only.
If you have only one loop or something to go through all components then you can put a condition that
if(field.up()) returns you the panel then read it\'s title
else do field.up().up() and then read the title.
I hope this solves you issue.
You can use , field.up('tabPanel') to get the reference of the tabPanel, and then from the reference you can get name,title for the tabPanel
I have a problem with ExtJS modern toolkit's Form component.
I create a form with no buttons (you can test it in sencha fiddle). The only button is in the titlebar and it isn't working at the moment.
The problem is :
Form submission on pressing Enter. My form is empty, default method is POST, but my page is reloading when I press Enter while the focus is on any of my fields. Url address string in browser complemented form field names, but the form's method is POST.
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
requires: [
'Ext.form.FieldSet',
'Ext.field.Text',
'Ext.field.TextArea',
'Ext.TitleBar'
],
items: [{
xtype: 'titlebar',
docked: 'top',
title: 'Searching',
items: [{
iconCls: 'fa fa-search',
iconAlign: 'right',
text: 'Search',
align: 'right',
handler: function() {
//
}
}]
}, {
xtype: 'fieldset',
border: false,
shadow: 'true',
defaults: {
value: ''
},
items: [{
xtype: 'numberfield',
label: 'Some ID',
allowBlank: true,
name: 'id'
},
{
xtype: 'textfield',
label: 'Some Article',
name: 'article'
}
]
}]
});
How to prevent page reloading?
I've never seen this behaviour in ExtJS form's by default.
Just replace id with something else could be Id in field name, it is conflicting with Ext id property
{
xtype: 'numberfield',
label: 'Some ID',
allowBlank: true,
name: 'Id'
},
I am trying to create a simple example of admin dasboard with Triton theme. But can't manage how to make it right. So I need a simple example of slide menu for desktop and to change content in a content area. Now my hamburger button is streched and left menu itself is not like that one in triton theme.
Ext.define('KitchenSink.view.Menus',
{
extend: 'Ext.Container',
xtype: 'app-main',
//controller: 'main',
requires: [
'Ext.Menu'
],
layout: {
type: 'card'
},
items: [
{
/*xtype: 'toolbar',
docked: 'top',
title: 'Slider Menu',*/
//docked: 'top',
xtype: 'panel',
styleHtmlContent: true,
html: ['<b>Plan'].join(''),
items: [
{
xtype: 'button',
handler: function() {
if(Ext.Viewport.getMenus().left.isHidden()){
Ext.Viewport.showMenu('left');
} else {
Ext.Viewport.hideMenu('left');
}
}
}
]
}],
initialize: function(){
Ext.Viewport.setMenu(this.createMenu(),{
side: 'left',
reveal: true
});
},
createMenu: function(){
var menu = Ext.create('Ext.Menu', {
width: 250,
scrollable: 'vertical',
items: [
{
xtype: 'button',
text: 'Option 1',
},{
xtype: 'button',
text: 'Option 2',
}
]
});
return menu;
}
});
Ext.application({
name: 'Foo',
mainView: 'KitchenSink.view.Menus'
});
it's the treelist component, which is used in the admin dashboard.
Take a look at the example :
http://examples.sencha.com/extjs/6.0.1/examples/kitchensink/#tree-list.
You don't have to download it. It is already in your kitchensink-example of your ext-6.x.x folder.
I wish to have the same form panel in each tab of the tabbed pannel. Is there a way that the same code is run for each tab without having to copy the code in the items list since that would be redundant.
Here is one way to do it -
You'll normally define a tabpanel and you give multiple panels as an array of items. For each of the panel inside the item, give the same panel container that you define below as the item.
{
xtype: 'tabpanel',
itemId: 'myTabPanel',
activeTab: 0,
plain: true,
items: [{
xtype: 'panel',
itemId: 'tab1',
layout: 'fit',
title: 'Strategies',
items: [{
xtype: 'myTabContainer'
}],
tabConfig: {
xtype: 'tab',
closable: false
}
}, {
xtype: 'panel',
itemId: 'tab2',
layout: 'fit',
title: 'Action Sets',
items: [{
xtype: 'myTabContainer'
}]
}],
listeners: {
tabchange: 'tabChangeListener' // define this and handle the actions for your tab change event
}
}
And here is a sample definition of the container/content for the tab. You can note that I'm using the alias for this container "myTabContainer" as xtype in each of the tabs above. This will make sure that the same view is linked to both the tabs.
Ext.define('MyTabContainer', {
extend: 'Ext.panel.Panel',
alias: 'widget.myTabContainer',
requires: [
// give all required classes
],
viewModel: {
type: 'dfstrategiesmaincontainer'
},
itemId: 'tabContent',
layout: 'border'
// Define all other required items and contents
}
Define a form and set that form as an item in each tab.
//Define the form
Ext.define('App.view.MyForm', {
extend:'Ext.form.Panel',
alias: 'widget.myform',
bodyPadding:10,
items: [....]
});
//Use the form as an item in each tab
Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.body,
items: [{
title: 'Tab1',
xtype: 'myform'
}, {
title: 'Tab2',
xtype: 'myform'
}]
});
I have an ExtJS 4.2.1 accordion layout with three panels.
When the app is first launched, the first panel is open and the 2nd/3rd are closed.
I can open and close the 2nd and 3rd, but I can never close the first panel.
Ext.define('MyAccordion', {
extend: 'Ext.container.Container',
alias: 'widget.myAccordion',
padding: 0,
margin: 0,
width: 200,
layout: {
type: 'accordion',
align: 'stretch',
animate: true,
hideCollapseTool: true
},
items: [{
xtype: 'panel',
title: 'Test Volumes',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'label',
text: 'volume one'
},{
xtype: 'label',
text: 'volume two'
},{
xtype: 'label',
text: 'volume three'
}]
}, {
xtype: 'panel',
title: 'Production Volumes',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'label',
text: 'volume one'
},{
xtype: 'label',
text: 'volume two'
},{
xtype: 'label',
text: 'volume three'
}]
}, {
xtype: 'panel',
title: 'Extra Volumes',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'label',
text: 'volume one'
},{
xtype: 'label',
text: 'volume two'
},{
xtype: 'label',
text: 'volume three'
}]
}]
});
In the following code leveraged from the 4.2.1 examples layout browser example, if the first thing you do after launching the app is click the first header, is does close, but then re-open it and it never closes again:
Ext.onReady(function() {
Ext.create('Ext.container.Viewport', {
renderTo: Ext.getBody(),
items: [{
xtype: 'panel',
title: 'Accordion Layout',
layout: 'accordion',
defaults: {bodyStyle: 'padding:15px'},
items: [{
title: 'Introduction',
tools: [{type:'gear'},{type:'refresh'}],
html: '<p>Here is some accordion content. Click on one of the other bars below for more.</p>'
},{
title: 'Basic Content',
html: '<br /><br /><p>More content. Open the third panel for a customized look and feel example.</p>',
items: {
xtype: 'button',
text: 'Show Next Panel',
handler: function(){
Ext.getCmp('acc-custom').expand(true);
}
}
},{
id: 'acc-custom',
title: 'Custom Panel Look and Feel',
cls: 'custom-accordion', // look in layout-browser.css to see the CSS rules for this class
html: '<p>Here is an example of how easy it is to completely customize the look and feel of an individual panel simply by adding a CSS class in the config.</p>'
}]
}]
});
});
Even more strange, if I do show the collapse/expand tool, the tool for the first panel stops working.
Amazing but true, but this happens because the accordion layout container does not have a height set.
Because I can't have a fixed height, this fixes the issue: flex: 1
But this seems really strange, because why should not having a height (or flex, etc) break closing the first container? Just seems weird.
An easy solution would be to add _isLayoutRoot: true to panel with accordion layout.
Ext.define('myAccordion',{
extend: 'Ext.Panel',
alias: 'widget.myAccordion',
layout: 'accordion',
_isLayoutRoot: true,
items: myItems
});
Example: http://jsfiddle.net/38mx9hs9/1/
Also it seems that this issue is fixed in 4.2.2:
https://www.sencha.com/forum/showthread.php?267163-4-2-1-Accordion-Layout-in-Panel&p=1169533#post1169533