I have tried below code its working fine for first time, but when I close popup and click on button again it stops working.
var myForm = new Ext.form.Panel({
width: 500,
height: 400,
title: 'Foo',
floating: true,
closable : true
});
//myForm.show();
Ext.create('Ext.Button', {
text: 'Click Me',
renderTo: Ext.getBody(),
listeners: {
click: function() {
myForm.show();
}
}
});
Because by default closeAction is equal to 'destroy', which means component will be destroyed on clicking the close button. After you destroy your myForm object, it won't be available on the second try.
solution:
1) You can change closeAction to 'hide' and after clicking the close button component will just hide in dom.
var myForm = new Ext.form.Panel({
width: 500,
height: 400,
title: 'Foo',
floating: true,
closable: true,
closeAction: 'hide'//<-------------
});
2) You can create new object on every click on the button.
Ext.create('Ext.Button', {
text: 'Click Me',
renderTo: Ext.getBody(),
listeners: {
click: function () {
new Ext.form.Panel({
width: 500,
height: 400,
title: 'Foo',
floating: true,
closable: true
}).show();
}
}
});
You can add the following to your panel. That would hide it after you close it
closeAction: 'hide'
If you were building a big screen though you'd be better off leaving it as is (it keeps the dom tidy) but you'll need to recreate the component then when you click the button again
Related
I have a Ext.toast and Ext.Msg to be displayed on button click. So on click of button the content of toast and messagebox should be read.
I have applied ariaLabel but its still not readable, tried setting focus and containsFocus as well but still no luck, when I set defaultFocus:1 on messagebox it works for the first time only. Any hints please.
Ext.toast({
html: 'Data Saved',
title: 'My Title',
width: 200,
align: 't',
ariaLabel: 'My Title Data Saved'
});
Ext.Msg.show({
title: 'Invalid search criteria',
msg: 'check',
ariaLabel:'Invalid search criteria check',
icon: Ext.Msg.ERROR,
buttons: Ext.Msg.OK
});
Screen reader to be used - NVDA
Fiddle can be found here
The problem is that attribute aria-labelledby is always set automatically. (and has the higher precedence ariaLabelledBy). I did not find a way to avoid automatic substitution, so I created an override that does this for window instances
Ext.define('Ext.window.WindowAriaOverride', {
override: 'Ext.window.Window',
afterShow: function () {
this.el.dom.setAttribute('aria-labelledby', null)
this.el.dom.setAttribute('aria-label', this.ariaLabel)
}
});
Fiddle
If you will look at the documentation of the Ext.Msg.show, you will not find there any aria* config/param. This config is available only to Ext.window.MessageBox class.
I have changed your fiddle example to force it work, but unfortunately this aria features looks like to be buggy.
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.Button', {
text: 'toast',
renderTo: Ext.getBody(),
handler: function () {
Ext.create('Ext.window.Toast', {
html: 'Data Saved',
title: 'My Title',
width: 200,
align: 't',
containsFocus: true,
closeAction: 'destroy',
ariaLabel: 'ARIA_LABEL_VALUE',
//ariaLabelledBy: 'ARIA_LABELLED_BY',
ariaDescribedBy: "ARIA_DESCRIBED_BY",
listeners: {
show: function () {
console.log(
this.el.dom.getAttribute('aria-label'),
this.el.dom.getAttribute('aria-labelledby'),
this.el.dom.getAttribute('aria-describedby')
);
}
}
}).show();
}
});
Ext.create('Ext.Button', {
text: 'msgbox',
renderTo: Ext.getBody(),
handler: function () {
Ext.create('Ext.window.MessageBox', {
closeAction: 'destroy',
ariaLabel: 'ARIA_LABEL_VALUE',
//ariaLabelledBy: 'ARIA_LABELLED_BY',
ariaDescribedBy: "ARIA_DESCRIBED_BY",
listeners: {
show: function () {
console.log(
this.el.dom.getAttribute('aria-label'),
this.el.dom.getAttribute('aria-labelledby'),
this.el.dom.getAttribute('aria-describedby')
);
}
}
}).show({
title: 'Invalid search criteria',
cls: 'error-message',
msg: 'yooo',
containsFocus: true,
ariaLabel: 'msg yoo',
modal: true,
icon: Ext.Msg.ERROR,
buttons: Ext.Msg.OK,
});
}
});
}
});
fiddle
I! buttons from my toolbar have to create panel.
And I have some problems, and questions.
1) when created panel is set druggable: true, panel didn't rents after click. And Chrome console throwns it: o such config "translationMethod" for class Ext.util.translatable.CssPosition. How to make it works (draggable)?
2)which the best way to create panel on the Main? like I do or another method? I use extjs 6.2 modern.
3)when centered is false, panel created anomalously (without header and title). how to fix it?
Toolbar is one from items of Main. 'mycuts' button is one from toolbar's items.
I hope somebody can help me
There is code:
{
text:'mycuts',
cls: 'grbuttons',
ui:'action',
height: 35,
width: 205,
margin:2,
handler: function() {
Ext.create('Ext.panel.Panel',{
height: 300,
id:'mycutareagrid',
header:{
title:'cuts',
draggable: true,
},
//draggable:true,
header: {
cls : 'hdr2'
},
width: 850,
renderTo:'bighBox',
centered:true,
margin: '98 0 0 215',
autoDestroy: true,
items:[{
xtype:'contlistII'
}],
collapsible:true,
clossable: true,
scope: this,
tools: [{
type:'help'
},{
type:'search'
},{
type:'close',
handler: function(e) {
e.hide()
}
}],
listeners:{
afterrender: function(e){
var d = e.getHeaderContainer();
e.setHeight(10);
}
}
})
}
}
I have an ExtJS toolbar at the top of my panel that can have between 5 and 10 actions (buttons), plus a search text field as the last item.
Depending on the size of the window, all items may fit directly on the toolbar, or some of them may get put into a "more" menu button. I need to specify one of those button to have some sort of priority so it is the last one to be put on the "more" button. Or even to never be put on it.
Is there any way to achieve this?
Solution:
Add items with code. I don't know if this is exactly your case, but I often use this to arrange buttons in toolbar:
Working example:
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.FocusManager.enable();
Ext.Ajax.timeout = 100 * 1000;
Ext.define('Trnd.TestWindow', {
extend: 'Ext.window.Window',
closeAction: 'destroy',
border: false,
width: 400,
height: 500,
modal: true,
closable: true,
resizable: true,
layout: 'fit',
fillToolbar: function() {
var me = this;
me.toolbar.add(me.button5);
me.toolbar.add(me.button1);
me.toolbar.add(me.button2);
me.toolbar.add(me.button3);
me.toolbar.add(me.edit);
me.toolbar.add(me.button4);
},
initComponent: function() {
var me = this;
me.callParent(arguments);
me.button1 = Ext.create('Ext.button.Button', {
text: 'Button 1'
});
me.button2 = Ext.create('Ext.button.Button', {
text: 'Button 2'
});
me.button3 = Ext.create('Ext.button.Button', {
text: 'Button 3'
});
me.button4 = Ext.create('Ext.button.Button', {
text: 'Button 4'
});
me.button5 = Ext.create('Ext.button.Button', {
text: 'Button 5'
});
me.edit = Ext.create('Ext.form.TextField', {
text: 'Edit'
});
me.toolbar = Ext.create('Ext.toolbar.Toolbar', {
enableOverflow: true,
items: []
});
me.panel = Ext.create('Ext.panel.Panel', {
tbar: me.toolbar
});
me.add(me.panel);
me.fillToolbar();
}
});
var win = new Trnd.TestWindow({
});
win.show();
});
Notes:
Tested with ExtJS 4.2
I solved this by wrapping the toolbar in a container like this:
tbar: [
{
xtype: 'container',
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
items: [
{
xtype: 'mail-compose-toolbar',
flex: 1
},
{
xtype: 'mail-compose-search',
itemId: 'mailComposeSearch',
width: 200
}
]
}
]
The search field is of fixed width and the toolbar has a flex:1 so it stretches.
I need to create a modal window in the other normal window. When I create a modal window is blocked mask.
Ext.application({
name : 'Fiddle',
launch : function() {
var win2 = null;
var win1 = Ext.create('Ext.window.Window', {
closeAction: 'hide',
width: 500,
height: 500,
resizable: false,
titleAlign: 'center',
items: {
xtype: 'button',
text: 'show modal',
handler: function() {win2.show()}
},
title: 'Simple window'
});
Ext.create('Ext.panel.Panel', {
items: {
xtype: 'button',
text: 'show window',
handler: function() {
var isRendered = win1.rendered;
win1.show(null, function() {
if (!isRendered) {
win2 = Ext.create('Ext.window.Window', {
closeAction: 'hide',
resizable: false,
titleAlign: 'center',
width: 200,
height: 200,
renderTo: win1.getEl(),
modal: true,
title: 'Modal window'
})
}
});
}
},
renderTo: Ext.getBody()
});
}});
z-index is right:
Mask component is 19006
Modal window component is 19010
Simple window component is 19000
I don't understand where I was wrong.
The problem is that you render win2 into win1.getEl(). Normally, you don't render a window into anything, and let it take care of itself.
Indeed, if you remove
renderTo: win1.getEl(),
from your fiddle, the modal window is working.
If, for some reason, you want win2 to be modal only inside win1, you can use
floatParent : win1,
on win2 instead.
The listener I set up with doesn't seem to trigger. Here is my code:
new Ext.TabPanel({
id:'content-tab-panel',
renderTo: 'trx_tabs_ext',
activeTab: 0,
minTabWidth: 150,
tabWidth:180,
enableTabScroll: true,
autoScroll: true,
resizeTabs:true,
defaults: {
autoScroll:true
},
items: [{
title: 'No Active Chat',
id: 'no_chat',
closable: true,
autoScroll: false,
margins: '0 0 0 0',
html: "<div id=\"chat_window_viewer\" style=\"width:900px;height:440px;text-align:left; \"> </div>"
}],
width: '100%',
height: '400px',
listeners: {
tabchange: function(tabPanel, newTab, oldTab, index)
{
console.log('change tab');
},
beforeadd : function (tabpane, component, index) {
console.log('Adding new tab');
},
beforeclose: function(element) {
console.log('closing');
}
}
});
The beforeadd an tabchange triggers and do so by writing a log at the console. But, the beforeclose does not.
I also tried putting it inside the item of the Tabpanel, does not work either.
What is the correct way to adding a close event in the TabPanel?
To get items close event, add listener to that item.
Fiddle here: https://fiddle.sencha.com/#fiddle/59f
Which version of library you are using? Note that beforclose event available since 2.3.0.
It works for me when i listening event for item, not for whole panel
new Ext.TabPanel({
id:'content-tab-panel',
renderTo: 'trx_tabs_ext',
activeTab: 0,
minTabWidth: 150,
tabWidth:180,
enableTabScroll: true,
autoScroll: true,
resizeTabs:true,
defaults: {
autoScroll:true
},
items: [{
title: 'No Active Chat',
id: 'no_chat',
closable: true,
autoScroll: false,
margins: '0 0 0 0',
html: "<div id=\"chat_window_viewer\" style=\"width:900px;height:440px;text-align:left; \"> </div>",
listeners:{
'beforeclose': function(){console.log('closed')}
}
}],
width: '100%',
height: '400px',
listeners: {
tabchange: function(tabPanel, newTab, oldTab, index)
{
console.log('change tab');
},
beforeadd : function (tabpane, component, index) {
console.log('Adding new tab');
}
}
});
Since Extjs 2.3.0, tabpanels have a beforeclose event:
beforeremove( this, component, eOpts )
Fires before any Ext.Component is removed from the container. A handler can return false to cancel
the remove.
Available since: 2.3.0
Parameters
this : Ext.container.Container
component : Ext.Component
The component being removed
eOpts : Object The options object passed
to Ext.util.Observable.addListener.
so just add a listener in your tabpanel:
listeners: {
beforeremove: function (panel, item, eOpts) {
console.log(item); // the tab to be removed
}
. . . .
}