I added "contextmenu" entry to the list of listeners in treepanel, but it seems that it doesn't work. ExtJS doesn't give the control to my event handler function. I also supressed browser default context menu event beforehand, but it doesn't help either.
Any code examples? I haven't found any working samples for ExtJS 4. Am I missing something?
Update 1: my code
var tree = Ext.create('Ext.tree.Panel', {
id: 'treePanel',
store: store,
renderTo: 'tree-div',
height: 300,
width: 250,
title: 'OrgTree',
useArrows: true,
listeners: {
render : {
fn : function() {
Ext.getBody().on("contextmenu", Ext.emptyFn, null, {preventDefault: true});
}
},
contextmenu : {
fn: function(node, evtObj) {
alert('here');
}
},
}
});
Update 2: this is the solution extjs tree panel context menu not working
Related
Following code
Ext.define('Fiddle.Panel', {
extend: 'Ext.Container',
layout: 'card',
items: [{
html: 'Check the console. Panel 2.1 fires activate event desipte the panel 1 being active',
xtype: 'panel',
listeners: {
activate: function (){
console.log('1 active');
}
}
},{
xtype: 'panel',
layout: 'card',
items: [{
xtype: 'panel',
// items: [... fieldpanel, fields here]
listeners: {
activate: function (){
console.log('2.1 active');
}
}
},{
xtype: 'panel',
listeners: {
activate: function (){
console.log('2.2 active');
}
}
}
}],
listeners: {
activate: function (){
console.log('2 active');
}
}
}]
});
Will immediately output.
1 active
2.1 active
I would like to focus a text field in the panel 2.1 on activation, but the event is fired even the field respectively whole 2.1 panel is not rendered yet as it is a child of inactive panel 2. Is this a feature or bug ? Should I use different approach ? Thank you for help.
Sencha Fiddle
https://fiddle.sencha.com/fiddle/39vc
Your two card layout panels (containers) will have an active item. So that is why they are both firing the activate event.
I would do the focus on the activeitemchange event and init. Here is a fiddle:
Fiddle
I had to do a defer in the init to be sure the field was rendered. there may be a better way to do this. See the buttons at the bottom to switch between the two panels.
`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 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;
}
}
var menu1 = new Ext.menu.Menu({
items: [{
text: 'Open in new tab'
}]
});
var treePanel = Ext.create('Ext.tree.Panel', {
id: 'tree-panel',
region: 'center',
useArrows: true,
singleExpand: true,
split: false,
height: 360,
minSize: 150,
rootVisible: false,
autoScroll: true,
store: store,
border: false,
columns: [{
xtype: 'treecolumn',
dataIndex: 'text',
flex: 2,
sortable: true,
displayField: true
}]
});
treePanel.on('contextmenu', function(event, node) {
alert(node)
//treePanelCurrentNode = node;
x = event.browserEvent.clientX;
y = event.browserEvent.clientY;
menu1.showAt([x, y]);
}, this);
Working on 4.1 ext js and trying to add context menu to this tree panel but menu is not working. In the tree panel store is coming
but my code
treePanel.on('contextmenu', function(event,node){};
is not working
not event
treePanel.on('click', function(event,node){};
Any idea related to ext js context menu on tree panel ?
Tree doesn't have contextmenu event in ExtJS4.
You should use itemcontextmenu instead of contextmenu:
treePanel.on('itemcontextmenu', function(view, record, item, index, event) {
alert(record)
//treePanelCurrentNode = record;
menu1.showAt(event.getXY());
event.stopEvent();
}, this);
When the data view is rendered it disabling the default right click web browser menu, this is called in listeners “render” event and “itemcontexmenu” event is for detecting right click mouse event, capture the mouse cursor position and displaying the menu.
listeners: {
render: function() {
Ext.getBody().on("contextmenu", Ext.emptyFn, null, {preventDefault: true});
},
itemcontextmenu : function( grid, record, item, index, event){
x = event.browserEvent.clientX;
y = event.browserEvent.clientY;
menu1.showAt([x, y]);
}
}
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);
});
});
}
}
}