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();
}
Related
I am creating a menu using Ext.tab.Panel and would like to have Search feature. Something like Bootstrap navbar - https://getbootstrap.com/docs/4.0/components/navbar/
I tried to simply add the textfield element but didn't work obviously.
Ext.create('Ext.TabPanel', {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Home Screen'
},
{
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen'
},
{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
allowBlank: false // requires a non-empty value
}
]
});
Is it possible to achieve this at all?
You can archive it with the tabbar config of the Ext.tab.Panel.
The Ext.tab.Bar is a specialized Ext.container.Container where you can add items like a to Textfield.
So add te search textfield to the tabbar config and you can archive what you want to, see the example code below and the Sencha Fiddle.
Ext.create('Ext.TabPanel', {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Home Screen'
},
{
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen'
},
],
tabBar: {
items: [
{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
allowBlank: false // requires a non-empty value
}
]
},
renderTo: Ext.getBody()
});
At first this functionality does not exist in the tabpanel, which I recommend you do and replace the idea of tabpanel to apply a cardlayout which is the same tabpanel layout system.
And then you can use a toolbar, with the buttons being configured with the toogleGroup, in short, you'd better see the code example below working.
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.Panel', {
fullscreen: true,
renderTo: Ext.getBody(),
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'toolbar',
height: 42,
defaults: {
xtype: 'button',
},
items: [{
text: 'Tab1',
handler: function(button){
var me = this,
fakeContainer = button.up('panel').down('#fakeTab');
fakeContainer.setActiveItem(button.tabIndex);
},
tabIndex: 0,
toggleGroup: 'tabHandler',
enableToggle: true,
pressed: true,
margin: '0'
}, {
text: 'Tab2',
handler: function(button){
var me = this,
fakeContainer = button.up('panel').down('#fakeTab');
fakeContainer.setActiveItem(button.tabIndex);
},
tabIndex: 1,
enableToggle: true,
margin: '0'
}, {
text: 'Tab3',
handler: function(button){
var me = this,
fakeContainer = button.up('panel').down('#fakeTab');
fakeContainer.setActiveItem(button.tabIndex);
},
tabIndex: 2,
toggleGroup: 'tabHandler',
enableToggle: true,
margin: '0'
}, '->', {
xtype: 'textfield',
fieldLabel: 'Search:',
labelWidth: 70,
width: 250,
margin: 0
}, {
iconCls: 'x-fa fa-search',
handler: function(){
alert('Your Search here!');
}
}]
}, {
xtype: 'container',
itemId: 'fakeTab',
margin: '16 0 0 0',
flex: 1,
layout: 'card',
defaults: {
xtype: 'container',
height: 800
},
items: [{
html: '<STRONG>TAB 1 your content here</STRONG>'
}, {
html: '<STRONG>TAB 2 your content here</STRONG>'
}, {
html: '<STRONG>TAB 3 your content here</STRONG>'
}]
}]
});
}
});
Working sample here
I have button on the first item of carousel on the Main View.
Button is managed by ButtonController and opens Form.
This form have tools: close, hide. When I click on close or hide tool on the forms after, for example closing I see white artifact. This looks like mark of header of Form..
enter image description here
Maybe this can be decided by trivial action?
Thanks
UPD: some code.
part of controller:
Ext.define('Foresto.view.main.ButtonController', {
extend: 'Ext.app.ViewController',
alias: 'controller.comenuform',
layout: 'vbox',
requires: [
'Foresto.view.forms.1',
'Foresto.view.forms.2',
'Foresto.view.forms.3',
'Foresto.view.forms.4'
],
views: ['Foresto.view.main.Main'],
cutForms: function () {
Ext.create('Ext.panel.Panel', {
layout: 'fit',
renderTo: 'mainPart',
autoshow: true,
items: [{
xtype: 'formsType4'
}]
})
},
part of form:
Ext.define('Foresto.view.forms.Formf', {
extend: 'Ext.form.Panel',
title: 'testApp',
header: {
cls: 'header-cls',
},
tools: [
{type: 'minimize',
handler: function(){
this.up("panel").hide();
}},
{type: 'save'},
{type:'close',
handler: function(){
this.up("panel").close();
}},
],
xtype: 'formsType4',
url: 'save-form.php',
defaults: {
xtype: 'selectfield',
labelWrap: true,
afterLabelTextTpl: [
'<span style="color:red;font-weight:normal" data-qtip="Required">*</span>'
]
},
items: [{...
and code of main:
Ext.define('Foresto.view.main.Main', {
extend: 'Ext.form.Panel',
id:'control-panel',
xtype: 'app-main',
controller:'comenuform',
requires: [
'Foresto.view.map.Map',
'Foresto.view.main.ButtonController',
],
padding: 0,
id:"bighBox",
header: {
cls: 'header-cls',
title : {
cls : 'header-title-cls',
text : 'MyApp'
}
},
tools: [{
type: 'menu',
handler: function(me) {
var cp = me.down('panel');
if (cp._hidden)
cp.show(true);
else
cp.hide(true);
}
}],
items:[{
xtype: 'carousel',
id: "mainPart",
flex: 1,
defaults: {
border: true,
ui: 'light'
},
items: [{
layout: {
type: 'vbox',
align: 'middle',
pack: 'center'
},
cls: 'colorful2',
defaults: {
border: true,
ui: 'light',
flex: 1
},
items:[{
xtype:'button',
cls: 'button-cls',
text: 'buttonOfForm4',
id: "RenterId",
margin: 10,
width: 920,
height: 250,
length: 150,
handler: 'renterForms'
... (some other buttons, which call forms too)..
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
SOLUTION:
To better show the problem our actual code was facing, the following code works.
The keys for me to get this to work were to give border layout an 'align' config of stretch, and to ensure that containers had 'flex' config of 1 where necessary.
Ext.define('MyGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.myGrid',
columns: [{text: 'First Name'}],
store: Ext.create('Ext.data.Store', {fields: ['fname']})
});
Ext.define('MyView', {
extend: 'Ext.container.Container',
alias: 'widget.myView',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'myGrid',
title: 'My First Grid',
flex: 7,
bodyStyle: {
backgroundColor: '#ff0000'
}
}, {
xtype: 'myGrid',
title: 'My Second Grid',
flex: 3,
bodyStyle: {
backgroundColor: '#0000ff'
}
}]
});
Ext.onReady(function() {
Ext.create('Ext.container.Viewport', {
renderTo: Ext.getBody(),
layout: 'fit',
items: [{
layout: {
type: 'border',
align: 'stretch'
},
items: [{
xtype: 'container',
region: 'center',
itemId: 'gridsContainer',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'myView',
flex: 1
}]
}]
}]
});
});
ORIGINAL POST:
In the code below, if you replace:
Ext.create('Ext.container.Container'
with:
Ext.create('Ext.container.Viewport'
The grids correctly occupy 70%/30% of the available area.
But when the code has Container and not Viewport, the grids are very small.
Of course my real code is within a larger application, so I cannot use a Viewport at that point, I must use container.
Ext.define('MyGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.myGrid',
columns: [{
text: 'First Name',
dataIndex: 'fname'
}],
store: Ext.create('Ext.data.Store', {
fields: ['fname']
})
});
Ext.onReady(function() {
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
layout: 'fit',
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
autoScroll: true,
bodyPadding: 0
},
items: [{
xtype: 'myGrid',
itemId: 'grid1',
flex: 7
}, {
xtype: 'splitter'
},{
xtype: 'tabpanel',
itemId: 'mypanel',
width: 400,
height: 400,
renderTo: document.body,
flex: 3,
scroll: true,
resizable: false,
activeTab: 0,
items: [{
xtype: 'myGrid',
itemId: 'tabgrid1',
title: 'My Grid Tab One'
},{
xtype: 'myGrid',
itemId: 'tabgrid2',
title: 'My Grid Tab Two'
}],
tabBar:{
//plain:true,
items:[{
xtype: 'tbfill'
},{
text:'????',
xtype:'image',
src: 'panelCollapseBtn.png',
closable: false,
listeners:{
'afterrender':function (comp) {
comp.getEl().on('click', function (el) {
// alert(comp.up('#mypanel').getCollapsed());
var panel = comp.up('#mypanel');
var isCollapsed = panel.getCollapsed();
//alert('is collapsed: ' + isCollapsed);
panel.header = !isCollapsed;
//panel.collapsible =isCollapsed;
comp.setSrc(isCollapsed?"panelCollapseBtn.png":"panelExpandBtn.png");
panel.toggleCollapse();
}, this);
comp.getEl().on('mouseover', function (el) {
el.target.style.cursor = "pointer";
}, this);
}
}
}]
}
}]
}]
});
});
What I'm trying to do is add a grid that is 65% width of the panel created in my app.js
Ext.application({
name: 'AM',
appFolder: 'app',
controllers: [ 'Metadata', 'Print', 'Export' ],
launch: function() {
var types = Ext.create('AM.store.Type');
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 1000,
height: 600,
title: '<center>MetaCenter</center>',
layout: 'hbox',
style: { marginLeft: 'auto', marginRight: 'auto' },
items: [
{ xtype: 'panel', padding: 5, height: 500, width: '35%',
items: [
...
{ xtype: 'button', text: 'Search',
listeners: {
click: function() {
console.log('Search Button clicked');
//Code to create panel view?
}
},
],
}
I'm not explicitly creating a viewport, so I don't believe I could do a viewport.add('grid') function, but I'm not sure. Any ideas?
You could add the grid when creating the container, with hidden: true, then show it when the button is clicked:
{
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
xtype: 'panel',
flex: 0.35,
items: [
...
{
xtype: 'button',
text: 'Search',
listeners: {
click: function(btn) {
btn.up('panel').nextSibling().show();
}
}
}
]
},
{
xtype: 'grid',
flex: 0.65,
hidden: true,
...
}
]
}