A modal panel on top of another modal panel?
Is this possible in Sencha? My modal window opens, but it opens behind my already open modal. Any help would be greatly appreciated.
Also...not sure if this matters but I am using the same controller for both modals.
Here is my second modal view:
Ext.define('CAMSApp.view.OpBuyoffVoidView', {
extend: 'Ext.Panel',
alias: ['widget.opbuyoffvoidview'], //ToDo Use I18N
config: {
xtype: 'panel',
cls: 'dialogview formview',
centered: true,
scrollable: 'vertical',
modal: true,
screenId: 'opbuyoffvoidview',
layout: {
type: 'vbox',
align: 'center',
},
defaults: {
minHeight: 46
},
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Void Buyoff',
cls: 'grey-bold-34pt',
ui: 'transparent',
items: [{
xtype: 'button',
cls: 'grey-bold-40pt greyBtn',
text: 'Cancel',
idForAction: 'opbuyoff-void-cancel_btn',
}, {
xtype: 'spacer',
},{
xtype: 'button',
cls: 'grey-bold-40pt greyBtn',
textI18N: 'Save',
idForAction: 'opbuyoff-void-save_btn',
}],
},
{
xtype: 'container',
ui: 'transparent',
layout: 'vbox',
cls: 'OpBuyoffVoidContainer',
items: [{
xtype: 'panel',
flex: 1,
ui: 'transparent',
items: [{
xtype: 'container',
cls: 'formContainer dialogContentScrolling',
items: [{
xtype: 'formpanel',
scrollable: null,
ui: 'transparent',
cls: 'fieldSetReadOnly',
defaults: {
xtype: 'textfield',
labelCls: 'lightgrey-bold-28pt',
readOnly: true,
},
items: [{
labelI18N: 'Buyoff:',
},{
id: 'buyoff_group_void',
},{
labelI18N: 'User:',
},{
id: 'buyoff_user_void',
}],
}],
},{
xtype: 'label',
htmlI18N: 'You are voiding the above Buyoff. Please enter the reason for the void below:',
//cls: 'priorityLowLabel',
},{
xtype: 'textareafield',
idForUpdate: 'buyoff_reason_void',
//cls: 'priorityMedLabel',
},{
xtype: 'label',
htmlI18N: '*Reason is required to void a buyoff',
//cls: 'priorityHighLabel',
}],
}],
}],
listeners: {
initialize: function(me, eOpts) {
CAMSApp.util.I18N.resolveStaticUIBindings(me);
},
show: function (me, eOpts) {
// Publish the screen id event.
log('[OpBuyoffVoid.show]');
CAMSApp.app.fireEvent('setscreenfocus', this);
},
},
}
});
That should not be a problem. When you open 2 modal windows, the second one overlaps the first one with a z-index 10 higher than the first. I think the problem is with the order in which you are showing the modal windows. Check out a quick fiddle I created to validate on ExtJS 6
https://fiddle.sencha.com/#fiddle/133n
Related
I trying renderTo a panel(Ext.panel with title:'titlet' in the end of code) to the mainView ('Foresto.view.main.Main') or to a part of courusel (id:'mapId') But i havn't got a positive result.
So my quistions:
1) How to render panel to the mainview or to a courusel item ('mapId')
2)What mains approaches in Ext JS 6+, modern toolkit, for render object to the mainview or mainview's elements??
Now my code looks like that:
Ext.define('Foresto.view.main.Main', {
extend: 'Ext.form.Panel',
id:"control-panel",
plugins: 'responsive',
responsiveConfig:{
tall:{
tabPosition:'center'
}
},
xtype: 'app-main',
controller:'menuform',
requires: [
'Foresto.view.map.Map',
'Foresto.view.main.ButtonController',
'Foresto.view.forms.LoginRoom'
],
autosize:true,
padding: 0,
id:"bighBox",
header: {
cls: 'header-cls',
title : {
cls : 'header-title-cls',
text : 'FOREST'
}
},
tools: [{
type: 'menu',
handler: function() {
Ext.Viewport.toggleMenu('top');
}
}],
items:[{
xtype: 'carousel',
id: "mainPart",
flex: 1,
defaults: {
border: true,
ui: 'light'
},
items: [{
title: 'MAP',
id:'mapId',
xtype: 'panel',
layout:'vbox',
padding: 0,
items: [{
xtype: 'panel',
title:'PLACEFORMAP'
}]
},{
title: 'REPORTS',
xtype: 'panel',
cls: 'foresBack',
layout: {
type: 'hbox',
align: 'middle',
pack: 'center'
},
items:[{
xtype:'button',
cls:'threethbutton',
ui: 'confirm',
text:'REPORT1',
margin:'10px'
},{
xtype:'button',
cls:'threethbutton',
ui: 'confirm',
text:'REPORT2'
}]
}]
}
],
initialize: function() {
Ext.Viewport.add({
xtype:'button',
id:'pan11111',
text:'KAB',
flex:1,
height: 1000,
width: 100,
items:[{
xtype:'tabpanel',
title:'Projects',
layout:'card',
items:[{
xtype:'panel',
title:'11111'
},{
xtype:'panel',
title:'uuuuu'
}]
}]
});
}
}});
now I edit function for rendering panel on viewport. Panel 'pan11111' is rendering, bu viewport cover all other elements, and I can work only with panel and white board viewport, witch cover all classes: –THIS problem was solved by great clearning of coockies
This seems elementary, but I need to be able to refresh a view after a Web Service call.
The data on the screen is not tied to a store because it is dynamically built at runtime.
Here is my view:
Ext.define('CAMSApp.view.OpBuyoffView', {
extend: 'Ext.Panel',
alias: ['widget.opbuyoffview'], //ToDo Use I18N
config: {
xtype: 'panel',
cls: 'dialogview formview',
centered: true,
scrollable: 'vertical',
modal: true,
screenId: 'opbuyoffview',
id: 'opBuyoffTableContainer',
layout: {
type: 'vbox',
align: 'center',
},
defaults: {
minHeight: 46
},
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Buyoffs',
cls: 'grey-bold-34pt',
ui: 'transparent',
items: [{
xtype: 'button',
cls: 'grey-bold-40pt greyBtn',
text: 'Close',
idForAction: 'opbuyoff-cancel_btn',
}, {
xtype: 'spacer',
}],
},
{ id: 'opBuyoffToolbar',
xtype: 'container',
layout: {
type: 'hbox',
align: 'left',
},
items: [
{
xtype: 'button',
cls: 'blueRoundedBtn',
text: 'Buyoff',
idForUpdate: 'opbuyoff-buyoff_btn',
disabled: true
},
{ xtype: 'spacer',
minWidth: 480
}]
},
{
xtype: 'container',
layout: {
type: 'hbox',
align: 'stretch'
},
defaults: {
xtype: 'label',
style: 'border:1px solid black',
cls: 'opBuyoffTableHeader',
},
id: 'tabOfBuyoffs',
items: [{
html: '',
minWidth: 60
}, {
html: 'Buyoff',
minWidth: 250
}, {
html: 'Partial %',
minWidth: 100
}, {
html: 'Completed',
minWidth: 120
},
{
html: '',
cls: 'opBuyoffTransparent',
minWidth: 50
}
]
}],
listeners: {
initialize: function(me, eOpts) {
CAMSApp.util.I18N.resolveStaticUIBindings(me);
},
show: function (me, eOpts) {
// Publish the screen id event.
log('[OpBuyoff.show]');
CAMSApp.app.fireEvent('setscreenfocus', this);
},
},
}
});
I have tried reading the View and the Container - but neither elements have doLayout() or refresh() functions.
The containers and panels do have a method called update(Ext.AbstractComponent-method-update) which can be used to update a view's HTML content.
Also, you can use XTemplate for creating the items and bind the panel to a store. In that case you won't have to manually remove and add all the elements.
refresh: function() {
// Ext.StoreMgr.get('stream').load();
// here I'd like to reload the app instead
// not just the store
window.location.reload();
}
It seems ridiculous to have to ask this question - but here we go. How do you align a Label with a textfield horizontally?
I need:
Label Text
Label
TextArea
Here is my code. I've tried everything, including a labelField but the text does not appear in my view.
Ext.define('CAMSApp.view.OpBuyoffVoidView', {
extend: 'Ext.Panel',
alias: ['widget.opbuyoffvoidview'], //ToDo Use I18N
config: {
xtype: 'Ext.form.Panel',
cls: 'dialogview formview',
centered: true,
scrollable: 'vertical',
modal: true,
screenId: 'opbuyoffvoidview',
layout: {
type: 'vbox',
pack: 'start',
align: 'stretch',
},
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Void Buyoff',
cls: 'grey-bold-34pt',
ui: 'transparent',
items: [{
xtype: 'button',
cls: 'grey-bold-40pt greyBtn',
text: 'Cancel',
idForAction: 'opbuyoff-void-cancel_btn',
}, {
xtype: 'spacer',
},{
xtype: 'button',
cls: 'grey-bold-40pt greyBtn',
text: 'Save',
idForAction: 'opbuyoff-void-save_btn',
}],
},
{
xtype: 'panel',
layout: {
type: 'vbox',
pack: 'start',
align: 'stretch',
padding: 5
},
items: [
{
xtype: 'label',
cls: 'block',
text: 'tesdfasrewaer'
},
{
fieldLabel: 'label',
labelWidth: 300,
xtype: 'textfield',
value: 'blahhhhh',
}, {
// xtype: 'panel' implied by default
xtype: 'textfield',
value: 'blahhhhhhhhhhh',
fieldLabel: 'text 2',
},{
xtype: 'textareafield',
width: 460,
height: 230,
idForUpdate: 'buyoff_reason_void',
//cls: 'priorityMedLabel',
}],
},
],
listeners: {
initialize: function(me, eOpts) {
CAMSApp.util.I18N.resolveStaticUIBindings(me);
},
show: function (me, eOpts) {
// Publish the screen id event.
log('[OpBuyoffVoid.show]');
CAMSApp.app.fireEvent('setscreenfocus', this);
},
},
}
});
So far I understood from your question that you need structure like below:
Label Text
Label
TextArea
Put below items in your view file:
items: [{
xtype: 'fieldset',
title: 'Enter your name and bio',
items: [{
xtype: 'textfield',
label: 'Name',
name: 'name'
}, {
xtype: 'textfield', // This textfield is dummy.
label: 'Bio', // You can simply put html here
labelWidth: '100%' // And can put your css to mimic default sencha label
}, {
xtype: 'textareafield',
name: 'bio'
}]
}]
Here is the fiddle for ref. Let me know if it serves your purpose or not.
In the following grid when you first popup the window, you can select items with the checkboxes.
But if you click OK to close the popup, and then click to launch it again, the checkboxes do not seem to work.
If you close the popup and launch it again, the checkboxes you just clicked on are now selected/deselected.
If I set closeAction to 'hide' on the window this issue goes away, but then don't I lose the value of the default closeAction of destroy?
In fact, not destroying the window and re-creating it every time messes up other stuff, so setting closeAction to hide does not work in my real app.
When closeAction is set to destroy, when a grid row checkbox is clicked, at least these three events are dispatched: itemclick, cellclick, select. But when closeAction is set to hide, the select event is not dispatched.
Ext.define('MyPopup', {
extend: 'Ext.window.Window',
alias: 'widget.myPopup',
width: 200,
height: 200,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'grid',
selModel: Ext.create('Ext.selection.CheckboxModel', {
checkOnly: false,
mode: "MULTI"
}),
store: Ext.create('Ext.data.Store', {
fields: ['name'],
data: [
{name: 'one'},
{name: 'two'},
{name: 'three'}
]
}),
columns: [{
text: 'Name',
dataIndex: 'name'
}]
}],
dockedItems: [{
dock: 'bottom',
xtype: 'button',
width: '50',
text: 'OK',
handler: function(comp){
comp.up('window').close();
}
}]
});
Ext.onReady(function() {
Ext.create('Ext.container.Viewport', {
renderTo: Ext.getBody(),
layout: 'fit',
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'center'
},
items: [{
xtype: 'button',
width: 50,
text: 'Click',
handler: function(){
Ext.create('MyPopup').show();
}
}]
}]
});
});
I was able to recreate your issue in a fiddle and found that if instead of creating the checkboxmodel object you define it. It fixes the issue.
Here is code demonstrating defining the selType and selModel configs:
Ext.define('MyPopup', {
extend: 'Ext.window.Window',
alias: 'widget.myPopup',
width: 200,
height: 200,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'grid',
selType:'checkboxmodel',
selModel: {
checkOnly: false,
mode: "MULTI"
},
store: Ext.create('Ext.data.Store', {
fields: ['name'],
data: [{
name: 'one'
}, {
name: 'two'
}, {
name: 'three'
}]
}),
columns: [{
text: 'Name',
dataIndex: 'name'
}]
}],
dockedItems: [{
dock: 'bottom',
xtype: 'button',
width: '50',
text: 'OK',
handler: function(comp) {
comp.up('window').close();
}
}]
});
And a working fiddle for demonstration.
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