var tabs = Ext.widget('tabpanel', {
renderTo: 'tabs',
resizeTabs: true,
enableTabScroll: true,
width: 600,
height: 250,
defaults: {
autoScroll: true,
bodyPadding: 10
},
items: [{
title: 'Tab 1003',
iconCls: 'tabs',
//ref:'http://www.yahoo.com',
//hrefTarget:'_self',
html: '<div style="width:100%; height:100%; background-color:#cccccc;"><iframe src="http://www.w3schools.com" frameborder=0 style="width:100%; height:100%;"></iframe></div>',
closable: true,
focusOnToFront : true
}],.........................
how to focus on the first tab, when having a few tabs?
i use focusOnToFront,but it's seen doesn't working.
Seeing that you already have your tabpanel defined in the variable tabs, if you want to make your first tab visible the easiest way would be this:
tabs.setActiveTab(0);
As covered here in the docs.
Add the activeTab property:
var tabs = Ext.widget('tabpanel', {
activeTab: 0,
...
Related
How to allow scrolling in extjs but only to some other component. For example, in the code below, the html component shouldn't go away from the screen.
Ext.create('Ext.Container', {
renderTo: Ext.getBody(),
scrollable: true,
items:[
{
xtype: 'datefield',
label: 'From',
},
{
xtype: 'datefield',
label: 'To',
},
{
padding: 50,
html: 'This should stick to the top',
height: 550,
},
{
xtype: 'grid',
height: 600,
scrollable: true
}
]
});
There is a few issues with your code. First, the container you add to the body is set to scrollable, set it to false if you don't want it scrolling.
Then you add it to the body element, even if it is not scrollable, its height will be the sum of its children, if that is taller than your body element, scrollbar will appear. But it is important to notice in this case what is scrolling is the body, not the component.
Then you said you want it to stick that html component on top, but what do you exactly mean by that? Make it appear above the two inputs? If you want that, add docked: 'top' to it.
Adding your container into a viewport instead of directly to body is a better approach, you can test this in sencha fiddle:
Ext.application({
name: 'Fiddle',
launch: function () {
const container = Ext.create('Ext.Container', {
scrollable: true,
items: [{
xtype: 'datefield',
label: 'From',
}, {
xtype: 'datefield',
label: 'To',
}, {
padding: 50,
html: 'This should stick to the top',
height: 550,
}, {
xtype: 'grid',
height: 600,
scrollable: true,
data: Array.from(Array(100).keys()).map(value=>({value})),
columns: [{text: 'value',dataIndex: 'value'}]
}]
});
Ext.Viewport.add(container);
}
});
Anyways, I don't really understand what are you trying to achieve, because if you set the outer component non-scrollable and put it into a component smaller than ~500px, how do you expect to see your grid? I suggest to take a
I have a Viewport with a Borderlayout. Between center and west there is a splitter. When I move the splitter to the right, it gets a new position, but it scrambles my whole layout:
Before moving it looks like this:
After moving (not while moving!), the splitter is "hidden" and only visible when I hover over the new position. Look at the right - there is a new unwanted margin:
When I move the splitter to the left (just a few pixels), the new layout is applied correctly!
In case you need code, here I have the panel with the border-layout. If you need more, I'll provide it immediately.
Ext.define('MyApp.view.Main', {
extend: 'Ext.container.Container',
requires: [ // ...
],
layout: {type: 'border'},
items: [{
region: 'north',
height: 50,
collapsible: false,
frameHeader: false,
html: 'Main'
},{
region: 'west',
xtype: 'panel',
title: 'west',
collapsible: true,
resizable: true,
frame: true,
border: false,
width: 250,
layout: 'fit',
tools: [ // ...
],
items: [{
xtype: 'workoutlist'
}]
},{
region: 'center',
title: 'center',
xtype: 'centerView'
}]
});
Thanks to #Evan Trimboli I've replaced resizable: true with split: true, which helped in another problem.
The real cause of the problem was in the centerView:
Ext.define('MyApp.view.CenterView', {
extend: 'Ext.tab.Panel',
alias: 'widget.centerView',
enableTabScroll: true,
layout: 'fit',
// constrain: true, <-- this configuration option caused the weird behaviour
autoShow: true,
// ...
});
I don't know how the option constrain: true came to this view (probably some silly copy and paste error). Without, it works like a charm.
I'm writing an app in Sencha-touch. I have 3 tabs in a tab panel. I'd like each one to take up 33% of the width of the tab panel. I've tried using resizeTabs, tabWidth, and even added a class to each item and then referenced it in css to change the width.
Then I also tried using a span element in the html and referencing that. But none of it works. My code is below. How do I change the width of the tabs in a tab panel?
{
xtype: 'tabpanel',
fullscreen: true,
tabBarPosition: 'top',
resizeTabs: true,
tabWidth: '33%',
items:[
{
//title: 'Campus List',
html: '<span class="headerTab">Campus List</span>',
width: '33%',
cls: 'headerTab'
},
{
title: 'Meter List',
html: 'Meter List',
width: '33%',
cls: 'headerTab'
},
{
title: 'Meter',
html: 'Meter',
width: '33%',
cls: 'headerTab'
}
]
}
I figured it out. If you reference the xtype of the tab, not the tabpanel, in your css then it will resize the tabs. Here's what worked.
.x-tab{
width: 33%;
}
{
xtype: 'tabpanel',
tabBarPosition: 'top',
**
defaults: {
flex: 1 //set the width of each item to be equal, in this case => 100%/numberOfItems = 100%/3 = 33.33333%
}
**
items:[
{
title: 'Campus List'
},
{
title: 'Meter List'
},
{
title: 'Meter'
}
]
}
have you tried using "flex" config ?
this the solution that I use
{
xtype: 'tabpanel' ,
fullscreen: true,
tabBarPosition: 'top',
resizeTabs: true,
// use this it helps
minTabWidth : 75,
//*********
items:[
{
//title: 'Campus List',
html: '<span class="headerTab">Campus List</span>',
width: '33%',
cls: 'headerTab'
},
{
title: 'Meter List',
html: 'Meter List',
width: '33%',
cls: 'headerTab'
},
{
title: 'Meter',
html: 'Meter',
width: '33%',
cls: 'headerTab'
}
]
}
var tabs = Ext.widget('tabpanel', {
renderTo: 'tabs',
resizeTabs: true,
enableTabScroll: true,
width: 600,
height: 250,
defaults: {
autoScroll: true,
bodyPadding: 10
},
items: [{
title: 'Tab 1003',
iconCls: 'tabs',
href:'http://www.yahoo.com',
//hrefTarget:'_self',
//html: 'Tab Body<br/><br/>' + Ext.example.bogusMarkup,
closable: true
}],
.....
i have add a code href:'http://www.yahoo.com' into items inside, but still can't work,
how to open www.yahoo.com page in the Tab Panel?
You could add a new panel to the tab-panel with an iframe in the html attribute.
Lets suppose i have the following code snippet:
Ext.create('Ext.container.Viewport', {
layout: 'border',
renderTo: Ext.getBody(),
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>',
autoHeight: true,
border: false,
margins: '0 0 5 0'
}, {
region: 'west',
collapsible: true,
title: 'Navigation',
width: 150
// could use a TreePanel or AccordionLayout for navigational items
}, {
region: 'south',
title: 'South Panel',
collapsible: true,
html: 'Information goes here',
split: true,
height: 100,
minHeight: 100
}, {
region: 'east',
title: 'East Panel',
collapsible: true,
split: true,
width: 150
}, {
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items: {
title: 'Default Tab',
html: 'The first tab\'s content. Others may be added dynamically'
}
}]
});
What i want to do is to have the north toolbar to be hidden automatically when the mouse is moved away from the north region and unhidden when the mouse is hovered on north region(exactly like autohide in windows start menu)
You could use the collapse functionality to achieve this. Create a placeholder that replaces the standard Header:
var placeHolder = Ext.create('Ext.panel.Panel', {
height: 5,
listeners: {
mouseover : {
element : 'el',
fn : function(){
//Expand the north region on mouseover
Ext.getCmp('region-north').expand();
}
}
}
});
Configure the north region to be collapsible and use the placeholder above as Collapsed-header-replacement:
...
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>',
autoHeight: true,
border: false,
id: 'region-north',
margins: '0 0 5 0',
collapsible: true,
collapsed: true,
placeholder: placeHolder,
preventHeader: true,
listeners: {
mouseleave: {
element: 'el',
fn: function() {
Ext.getCmp('region-north').collapse();
}
}
}
},
...
This way you can let Ext worry about the layout and keep the collapse functionality.
create a panel that sets its height to 1px when the mouse is not on it, and sets its height to 300px when the mouse is on it.
Ext.create('Ext.panel.Panel',{
renderTo : 'summary-div',
height : 300,
listeners : {
mouseover : {
element : 'el',
fn : function(){
this.setHeight(300);
}
},
mouseleave : {
element : 'el',
fn : function(){
this.setHeight(1);
}
}
}
});