I have an accordion layout in a window. I don't want the second panel to be expanded.
I've tried with
var intermodPanel = {
xtype : 'panel',
title : 'unexpandable panel',
listeners : {
beforeactivate : function(){
return false;
}
}
}
But it doesn't work. I'm working on Extjs 4.2.
Also, my "plus" and "minus" icons at the right of the header are not displayed, is there something I've missed?
var winPort = Ext.create('widget.window', {
id: 'win' + pointcode,
title: 'a Window' ,
autoScroll: true,
header: {
titlePosition: 2,
titleAlign: 'center'
},
closable: true,
closeAction: 'hide',
width: 822,
height: 533,
layout: 'accordion',
layoutConfig : {
animate : true
},
items : [expandablePanel, unexpandablePanel, expandablePanel]
}).show();
Thank you
Please note that beforeactivate is only valid for Card layout, not for accordion layout: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.AbstractComponent-event-beforeactivate
So, how to make an accordion layout that prevents a card from being opened?
Easy as cake: Just use the correct event.
listeners : {
beforeexpand : function(){
return false;
}
}
Related
I have added a tab panel in Extjs. When i click on second tab i would like to see a component in header area of tab panel,
at red mark, below in the image.
For a tabpanel component follows another suggestion:
Ext.application({
name : 'TabPanelHeaderButton',
launch : function() {
Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.body,
items: [{
title: 'Foo'
},{
title: 'Foo 1'
}],
tabBar: {
items: [{
xtype: 'tbfill'
},{
xtype: 'button',
text: 'Button',
padding: '3px',
margin: '2px 5px 2px 2px',
handler: function(){
alert ('Button click')
}
}]
}
});
}
});
I am not sure whether you can insert button inside tab panel or not.
I have an alternative. Create a floating panel with required button inside it and show this floating panel at required position .
showButtonNextToLastTab : function(){
var me = this;
var lastTab = me.getLastTabInTabPanel();
var tabWidth = lastTab.getWidth();
var tabHeight = lastTab.getHeight();
var btnContainer = Ext.getCmp('btnContainer');
if(btnContainer == null) {
btnContainer = Ext.create('Ext.panel.Panel',{
id: 'btnContainer',
cls: 'btnContainerCls',
floating: true,
shadow : false,
height : 50,
items : [
{
xtype : 'button',
id : 'myRequiredButton',
text:'Button',
cls:'requiredBtnCls',
minWidth : tabWidth,
height : tabHeight
}
]
});
}
btnContainer.showBy(lastTab,'tl-tr',[-2,0]);
},
getLastTabInTabPanel : function(){
var me = this;
var tabPanel = Ext.getCmp('myTabPanel');
if(tabPanel){
var tabBar = tabPanel.getTabBar();
var noOfTabs = tabBar.items.items.length;
return tabBar.items.get(noOfTabs-1);
}
return null;
}
destroyButtonContainerPanel : function(){
var btnContainer = Ext.getCmp('btnContainer');
if(btnContainer != null)
btnContainer.destroy();
}
Call showButtonNextToLastTab method when you want to show this button to show up and call destroyButtonContainerPanel method when you want to hide this button.
Note : 'myTabPanel' is id of tabPanel in which you want to insert this button.
See if this helps..
`I have added a custom button in htmleditor which will change the background color of the preview area.I have tried everything but can't seem to get it
Ext.onReady(function () {
Ext.tip.QuickTipManager.init(); // enable tooltips
new Ext.panel.Panel({
title: 'HTML Editor',
renderTo: Ext.getBody(),
width: 550,
height: 250,
frame: true,
layout: 'fit',
items: {
xtype: 'htmleditor',
enableColors: false,
enableAlignments: false,
listeners:{
render:function(){
this.getToolbar().add({
xtype:'button',
scope: this,
tooltip:'Set background color',
iconCls : 'btn-charttheme',
menu : {
xtype : 'colormenu',
listeners : {
select :function(picker,selColor) {
}
}
}
});
}
}
}
});`
`
I found another solution to this for posterity. You can use the getEditorBody() method available on the HTMLeditor class to get the preview area, then dynamically style it.
In ExtJS 6:
{
xtype: 'htmleditor',
listeners: {
initialize: 'onEditorInitialize'
}
}
onEditorInitialize: function (editor) {
const bodyArea = editor.getEditorBody();
bodyArea.style.backgroundColor = '#333';
}
I was hoping I could use this solution, but it looks like that only worked in Ext JS 3, unless I was doing something wrong. I started poking around with the editor's textareaEl and came up with a very ugly solution... mainly because they're using an iframe under the hood. Here's my code:
Ext.onReady(function () {
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.tip.QuickTipManager.init(); // enable tooltips
var myEditor = Ext.create('Ext.form.field.HtmlEditor', {
enableColors: false,
enableAlignments: false,
listeners: {
render: onRenderEditor
}
});
function onRenderEditor(editor) {
this.getToolbar().add({
xtype: 'button',
scope: this,
tooltip: 'Set background color',
iconCls: 'btn-charttheme',
menu: {
xtype: 'colormenu',
listeners: {
select: function (picker, selColor) {
if (editor.iframeEl) {
/* This is very hacky... we're getting the textareaEl, which
* was provided to us, and getting its next sibling, which is
* the iframe... and then we're probing the iframe for the
* body and changing its background-color to the selected hex */
var iframe = editor.iframeEl.dom;
if (iframe) {
var doc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;
if (doc && doc.body && doc.body.style) {
doc.body.style['background-color'] = '#' + selColor;
/*txtTextarea = Ext.fly(rb).down('textarea');
txtTextarea.dom.style.color = 'yellow';
txtTextarea.dom.style.cssText += 'background: olive !important';*/
}
}
}
}
}
}
});
}
new Ext.panel.Panel({
title: 'HTML Editor',
renderTo: Ext.getBody(),
width: 550,
height: 250,
frame: true,
layout: 'fit',
items: [myEditor]
});
}
});
});
Like I said, I don't like this solution, but it's a solution... I'd love to hear the proper way... I tried messing around with CSS classes, but didn't produce anything there.
It's not the answer on the original question. But I found this thread when I googled how to set background color for html editor in ExtJS (just static one).
For those who got here with the same question, the following styles did the trick for me:
.x-html-editor-wrap textarea {
background: #eee
}
I'm new in extjs.
Currently a panel have been created and set to north region.
Ext.create('Ext.panel.Panel', {
layout: {
type: 'border'
},
bodyStyle: 'background: yellow;',
height : 700,
width : '100%',
renderTo: Ext.get("example"),
items : [{
title: 'navigationBar',
header: false,
region: 'north',
xtype: 'panel',
//margins: '5,5,5,5',
items: [
MenuBar
]
}
And I also create a toolbar in my child class, which ready to call from my parent class and place to the north region panel.
Ext.define('adminInterface', {
extend: 'Ext.toolbar.Toolbar',
items: [{
xtype: 'tbbutton',
text: 'Button',
},{
xtype: 'tbbutton',
text: 'Button1',
menu: [{
text: 'Good',
},{
text: 'Better',
},{
text: 'Best',
}]}]
});
Once I execute the code, the toolbar variable from child class was call, but it not show out the interface.
Thanks for anyone share their information.
Hi refer my sample example
Ext.create('Ext.panel.Panel', {
title: 'Hello',
width: 200,
html: '<p>World!</p>',
renderTo: Ext.getBody(),
tbar: new Ext.Toolbar({
//your Toolbar config options
})
});
Still we can able to see more sample from existing post as shown below
How do i add a toolbar to my layout in extjs?
Extjs 4 add toolbar to panel dockeditems run-time
var myBtnHandler = function(btn) {
Ext.MessageBox.alert('You Clicked', btn.text);
},
fileBtn = Ext.create('Ext.button.Button', {
text : 'File',
handler : myBtnHandler
}),
editBtn = Ext.create('Ext.button.Button', {
text : 'Edit',
handler : myBtnHandler
}),
tbFill = new Ext.toolbar.Fill();
var myTopToolbar = Ext.create('Ext.toolbar.Toolbar', {
items : [
fileBtn,
tbFill,
editBtn
]
});
var myBottomToolbar = [
{
text : 'Save',
handler : myBtnHandler
},
'-',
{
text : 'Cancel',
handler : myBtnHandler
},
'->',
'<b>Items open: 1</b>'
];
var myPanel = Ext.create('Ext.panel.Panel', {
width : 200,
height : 150,
title : 'Ext Panels rock!',
collapsible : true,
renderTo : Ext.getBody(),
tbar : myTopToolbar,
bbar : myBottomToolbar,
html : 'My first Toolbar Panel!'
});
how to reuse the same item in multiple tab so that when that item change, other tab will reflect the changes
i try this code but the label in first tab not shown:
var label = Ext.create('Ext.form.Label', {
text : 'mylabel'
});
Ext.onReady(function() {
Ext.create('Ext.tab.Panel', {
width : 200,
height : 200,
renderTo : Ext.getBody(),
items : [{
title : 'tab1',
items : [label, {
xtype : 'button',
handler : function() {
label.setText('changed from tab1');
}
}]
}, {
title : 'tab2',
items : [label, {
xtype : 'button',
handler : function() {
label.setText('changed from tab2');
}
}]
}]
});
});
i'm sorry, what i mean is to use the label globally(like global variable) so that the same instance of label can be displayed and changed from every tab
you can define your label component:
Ext.define('MyLabel', {
extend: 'Ext.form.Label',
alias: 'widget.mylabel',
text : 'mylabel'
});
the alias property is an alias for the class name (in this case MyLabel) and that is why you can use "mylabel" as an xtype
in this way you can reuse the component, like this
var panel = Ext.create('Ext.tab.Panel', {
width : 200,
height : 200,
renderTo : Ext.getBody(),
items : [{
title : 'tab1',
items : [{
xtype: 'mylabel',
itemId: 'item1'
}, {
xtype : 'button',
handler : function(button) {
panel.down('#item2').setText('changed from tab1');
}
}]
}, {
title : 'tab2',
items : [{
xtype: 'mylabel',
itemId: 'item2'
}, {
xtype : 'button',
handler : function(button) {
panel.down('#item1').setText('changed from tab2');
}
}]
});
You can't do exactly what you want here. You see, when you create a label, it has underlying DOM, and naturally that DOM can only exist in one place (so it can't show the same thing on both tabs).
If there is a component that you are wanting to show on both tabs, it seems like it is "higher up" from a data hierarchical perspective. Perhaps it belongs outside the tab panel?
If the label truly belongs in both tabs and should be "the same", you are either going to need to fake it or manually move it between the tabs.
Option 1: Fake It
You can get the most code reuse here by creating a custom Label class, like laurac posted. You still need to keep the label text in sync, so you are going to need to update one when the other's text is changed:
var label1 = Ext.create('Ext.form.Label', {
text : 'mylabel'
});
var label2 = Ext.create('Ext.form.Label', {
text : 'mylabel'
});
Ext.onReady(function() {
Ext.create('Ext.tab.Panel', {
width : 200,
height : 200,
renderTo : Ext.getBody(),
items : [{
title : 'tab1',
items : [label1, {
xtype : 'button',
handler : function() {
label1.setText('changed from tab1');
label2.setText('changed from tab1');
}
}]
}, {
title : 'tab2',
items : [label2, {
xtype : 'button',
handler : function() {
labe2.setText('changed from tab2');
labe1.setText('changed from tab2');
}
}]
}]
});
});
Clearly that doesn't feel to "clean".
Option 2: Manual Control
This might be hacky, but slightly less hacky than option 1. Basic idea is to move the label between to two tabs when they are activated:
var label = Ext.create('Ext.form.Label', {
text : 'mylabel'
});
Ext.onReady(function() {
Ext.create('Ext.tab.Panel', {
width : 200,
height : 200,
renderTo : Ext.getBody(),
items : [{
title : 'tab1',
items : [{
xtype : 'button',
handler : function() {
label.setText('changed from tab1');
}
}],
listeners: {
scope: this,
activate: function(panel) {
panel.insert(0, label);
panel.doLayout();
}
}
}, {
title : 'tab2',
items : [{
xtype : 'button',
handler : function() {
label.setText('changed from tab2');
}
}],
listeners: {
scope: this,
activate: function(panel) {
panel.insert(0, label);
panel.doLayout();
}
}
}]
});
});
Note: I haven't started using Ext4 yet, so some of the code I added might need to be changed for Ext4 (I think maybe doLayout went away?).
Anyway, those are the only two ways I can think of to solve your problem.
Good luck!
Is there a way to attach an OnClick event to a tab switch in EXTJS?
I make the grid like this:
var simple = new Ext.FormPanel({
labelWidth: '100%',
border:false,
width: '100%',
style:
{
height: '291px'
},
items: {
xtype: 'tabpanel',
activeTab: 0,
//labelWidth: 75, // label settings here cascade unless overridden
items:[{
url:'save-form.php',
title: 'Tab 1',
...
Thanks!
I added in a listener after the tabs were defined like this:
//define all tabs, and after the ] from the tab panel JSON:
listeners: {
'tabchange': function(tabPanel, tab) {
alert("tab changed");
}
}
This just alerts when the tab changed, which is sufficient for my purposes. I'm not sure though how to find out which tab is the current tab.
Hope this helps someone in the future.
There is a tabchange event that fires when the active tab changes: http://www.sencha.com/learn/Ext_FAQ_TabPanel
There is no event for tab click in TabPanel, however you can bind into click event on each tab. You can add custom event.
Following example help to you.
{
xtype : 'tabpanel',
items : [{
xtype : 'panel',
title: 'ABC'
},{
xtype : 'panel',
title : 'XYZ'
}],
listeners: {
render: function() {
this.items.each(function(panel){
// Added tabclick event for tabpanel
panel.tab.on('click', function(){
panel.addEvents('tabclick'); // addded event to panel
panel.fireEvent('tabclick', panel);
});
});
}
}
}