Hi I am using the Extjs 6.0.1 version for my project.
There is a requirement to show the grid panel into the tab panel in my project.
I want to show the some title for the particular tab of tab panel and different title for grid panel. below is code I have try out for the same thing.
1st Grid panel:
Ext.define('com.SomeName', {
extend: 'Ext.grid.Panel',
xtype: 'GridPanelXtype',
id: 'GridPanel',
controller: 'GridPanelController',
title: 'GridPanel <span style ="margin-left: 620px"><img class="Some class" src> Accept</span>',
flex: 1,
layout: 'fit',
columns: [{
header : 'column1',
sortable : true,
flex:1,
menuDisabled: true
},{
header : 'column2',
sortable : true,
flex:1,
menuDisabled: true
},{
header: 'column3',
flex: 1,
sortable: true,
format: 'm/d/y',
menuDisabled: true
},{
header: 'column4',
flex: 1,
sortable: true,
menuDisabled: true
}]
});
2nd tab panel:
Ext.define('com.HomeScreen', {
extend: 'Ext.form.Panel',
xtype: 'newHomePage',
controller: 'tabpanelController',
items: [{
xtype: 'tabpanel',
id: 'advertiseHomeContainer',
anchor: '100% 100%',
border: 2,
layout: 'column',
controller: 'tabpanelController',
items: [{
id: 'tab1',
title: 'Tab Panel title',
xtype : 'GridPanelXtype',
}],
}]
});
Above code only show the tab title(Tab Panel title) and girdpanel with the columns means I can not able to show the "GridPanel"(with image) title or header part. I want to show the tab title and the girdpanel title inside the tabpanel.
Please show me the way to do this thing.
The tab panel title must be defined on tabpanel, not on the item.
xtype: 'tabpanel',
id: 'advertiseHomeContainer',
title: 'Tab Panel title',
anchor: '100% 100%',
border: 2,
layout: 'column',
controller: 'tabpanelController',
items: [{
id: 'tab1',
xtype : 'GridPanelXtype',
}],
Fiddle
As per your comment, you have to use overnesting:
xtype: 'tabpanel',
id: 'advertiseHomeContainer',
anchor: '100% 100%',
border: 2,
layout: 'column',
controller: 'tabpanelController',
items: [{
xtype:'panel',
title: 'Tab title',
items:[{
id: 'tab1',
xtype : 'GridPanelXtype',
}]
}],
Fiddle
Related
How can I put panel with some text inside navigation view, like here http://joxi.ru/E2pyDJQC9MLnyA
I tried past panel in navigation treelist but panel not displayed.
Also I united my treelist and panel in joint container:
{
xtype: 'maincontainerwrap',
id: 'main-view-detail-wrap',
reference: 'mainContainerWrap',
flex: 1,
items: [
{
xtype: 'container',
reference: 'leftContainer',
itemId: 'leftContainer',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
xtype: 'treelist',
reference: 'navigationTreeList',
itemId: 'navigationTreeList',
ui: 'navigation',
store: 'NavigationTree',
width: 64,
micro: true,
expanderFirst: false,
expanderOnly: false,
listeners: {
itemclick: 'onNavigationItemClick',
selectionchange: 'onNavigationTreeSelectionChange'
}
},
{
xtype: 'panel',
header: false,
layout: 'fit',
height: 100,
hidden: checkSubscription().hidden,
width : 64,
userCls: 'sidebar-purchase-wrapper',
renderTo: Ext.get("leftContainer"),
html :
'My text Here'
},
{
xtype: 'container',
flex: 1,
reference: 'mainCardPanel',
cls: 'sencha-dash-right-main-container',
itemId: 'contentPanel',
layout: {
type: 'card',
anchor: '100%'
}
}
]
}
Panel displayed, but when I'm click button onToggleNavigation animation not work correct.
I'm trying to build a FormPanel in my application, made by a field and two buttons.
The problem is that, while textfield is shown, Buttons are not shown on the view!
This is the Login.js view:
Ext.define('appTrial.view.Login',{
extend: 'Ext.form.Panel',
xtype: 'Login',
alias: 'widget.Login',
config : {
id : 'LoginId',
title : 'Welcome',
resizable : false,
collapsible : true,
bodyPadding : '5',
buttonAlign : 'center',
border : false,
trackResetOnLoad : true,
items : [{
docked: 'top',
xtype: 'titlebar',
title: 'Welcome to My New App!!!'
},
{
xtype: 'container',
name: 'mainContainer',
layout: {
type: 'vbox',
align: 'center',
pack: 'center'
},
//width : '100%',
items : [{
layout: {
pack: 'center'
},
html :'Associa attivita',
margin: '80 0 0 0'
},{
xtype: 'fieldset',
items: [{
xtype: 'textfield',
name: 'codAttivita'
}]
}],
buttons :[{
text : 'Associa',
itemId : 'btnAssocia',
formBind : true,
ui: 'confirm'
},{
text : 'Reset',
itemId : 'btnReset',
formBind : true,
ui: 'decline'
}]
}]
}
});
Does anyone have any idea?
Thanks in advance
Containers doesn't have the button config. You must define the button config into the formpanel object.
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
I am using ExtJS 4 and trying to add button on a tab panel header. Please have a look at this jsfiddle:
http://jsfiddle.net/ramarajuv/Sadnj/7/ . You can see it working fine with just the two tabs. Now, modify the same code by adding a tabBar as below:
Ext.create('Ext.panel.Panel',{
renderTo : Ext.getBody(),
id : 'testPanel',
height : 200,
width : 300,
items: [{
xtype : 'tabpanel',
activeTab : 1,
tabBar:[{
dockedItems:[{
xtype: 'button',
text : 'Test Button'
}]
}],
items: [{
title: 'tab1'
},{
title: 'tab2'
}]
}]
});
No Javascript error is thrown, but the button that I want to see to the right of the tab panel header is not coming up. Could you please help how I can bring up a button on the tab panel?
If I understand your question it seems you want the button to be in the tabBar itself and not in its own toobar? If that's the case then you can use the following code available in this fiddle.
http://jsfiddle.net/Sadnj/15/
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
id: 'testPanel',
height: 200,
width: 200,
items: [{
xtype: 'tabpanel',
activeTab: 1,
tabBar: {
items: [{
xtype: 'tbfill'
}, {
xtype: 'button',
text: 'Test Button'
}]
},
items: [{
title: 'tab1',
}, {
title: 'tab2',
}]
}]
});
you can use this:
Ext.create('Ext.panel.Panel',{
renderTo : Ext.getBody(),
id : 'testPanel',
height : 200,
width : 200,
items: [{
xtype : 'tabpanel',
activeTab : 1,
tbar:[{
text : 'txtButton'
}],
items: [{
title: 'tab1'
},{
title: 'tab2'
}]
}]
});
this will make buttons for your tabpanel.
Add button to tabpanel header simply with this:
tabBar: {
items: [
{ xtype: 'tbfill' },//fill the empty space between left and right
{
xtype: 'button',
text: 'Button 1'
}
]
}
I have a tabpanel. In the tab, i have a panel which includes a toolbar and 3 items: [ fieldset, a gridpanel, and another fieldset (or some buttons)]. I cannot get the gridpanel to show scroll bar. It only works if i set the maxheight/minheight of the gridpanel.
I also tried wrapping gridpanel inside a container. No luck.
In the example, i use fit layout. I tried "anchor" layout, and assigned anchor:'100% 50%' to gridpanel, hoping that it would resize when i resize browser. No luck.
Alternatively, if gridpanel is the ONLY item in the tab, autoscroll would work. So it appears when it's inside another panel, autoscroll/ resizing does not work.
Did I miss something here ?
Ext.application({
name: 'MyApp',
launch: function () {
// create the data store
var d = ['company', 100];
var myData = [];
for (var i = 0; i < 50; i++) {
myData[i] = d;
}
var store = Ext.create('Ext.data.ArrayStore', {
fields: [{
name: 'company'
}, {
name: 'price',
type: 'float'
}],
data: myData
});
Ext.create("Ext.container.Viewport", {
layout: {
type: 'border'
},
items: [{
xtype: 'toolbar',
id: 'headerbar',
region: 'north',
height: 30
}, {
xtype: 'toolbar',
id: 'menubar',
region: 'north',
height: 30
}, {
xtype: 'tabpanel',
itemId: 'maintabpanel',
activeTab: 0,
region: 'center',
plain: true,
margins: '5 5 5 5',
layout: 'fit',
items: [{
closable: false,
title: 'Tab',
margins: '0 0 0 0',
items: [{
xtype: 'panel',
title: 'Panel',
layout: 'fit',
tools: [{
type: 'help',
tooltip: 'Help'
}, {
type: 'close',
tooltip: 'Close'
}],
items: [{
xtype: 'fieldset',
title: 'Field Set',
layout: 'hbox',
items: [{
xtype: 'textfield',
fieldLabel: 'Input'
}]
}, {
xtype: 'gridpanel',
autoScroll: true,
store: store,
columns: [{
text: 'Company',
flex: 1,
sortable: true,
dataIndex: 'company'
}, {
text: 'Price',
flex: 1,
sortable: true,
dataIndex: 'price'
}],
viewConfig: {
autoFit: true
}
}, {
xtype: 'fieldset',
title: 'Field Set 2',
layout: 'hbox',
items: [{
xtype: 'textfield',
fieldLabel: 'Output'
}]
}]
}]
}]
}, {
xtype: 'box',
id: 'footer',
region: 'south',
html: '<h1> Copyright 2012</h1>',
height: 30
}]
});
}
});
Note that the parent panel of the gridpanel has fit layout, yet it has more than 1 item (the fieldset, the gridpanel, and another fieldset). A fit layout can only have 1 child.
Also, the parent of that fit panel (the one with closable : false - the tab) has no layout definition.
Here's a JsFiddle modified version of your code that works.