I am using Extjs where I am handling multiple minimized windows. When I click on the minimize button I am aligning the window to bottom left corner. But in case of multiple windows, the minimized windows are getting overlapped on one another at the bottom left corner. They are not aligned horizontally. How can I arrange the minimized windows horizontally at bottom of the screen.
Below is my sample code.
Ext.onReady(function () {
Ext.create('Ext.window.Window', {
height: 300,
width: 300,
minimizable: true,
title: 'first win',
listeners: {
"minimize": function (window, opts) {
window.collapse();
window.setWidth(150);
window.alignTo(Ext.getBody(), 'bl-bl')
}
}
}).show();
Ext.create('Ext.window.Window', {
height: 300,
width: 300,
minimizable: true,
title: 'second win',
listeners: {
"minimize": function (window, opts) {
window.collapse();
window.setWidth(150);
window.alignTo(Ext.getBody(), 'bl-bl')
}
}
}).show();
Ext.create('Ext.window.Window', {
height: 300,
width: 300,
minimizable: true,
title: 'third win',
listeners: {
"minimize": function (window, opts) {
window.collapse();
window.setWidth(150);
window.alignTo(Ext.getBody(), 'bl-bl')
}
}
}).show();
});
How about creating an array to keep track of the minimized window. This will help you to know whether to align to the viewport or to another minimized window.
Related
I hit what seems to be two bugs. Here is a fiddle which demonstrates these bugs. First of all, if you click on the first panel or any other ones, you will see there appear some new panel with a missing title:
And the second bug, is that it is impossible to see the contents of the panel (one textfield, which I put to every panel). The code is as simple as:
Ext.create("Ext.window.Window", {
width: 300,
height: 400,
layout: "fit",
items:[{
xtype: "panel",
layout: {
type: "accordion"
},
scrollable: true,
listeners: {
beforerender: function () {
var i;
for (i = 0; i < 30; i += 1) {
this.add({
title: i,
items:[{
xtype: "textfield",
value: i
}]
});
}
}
}
}]
}).show();
So, the question is how to fix it all?
The outer window should not have a fit layout as this will interfere with the way the accordion layout works as it uses more or less vertical space depending on the user's actions. Also, the accordion should not have scrollable set to true as it is the parent window that should scroll.
The title you are using for the items in the accordion are seen as integer values in JS and so the 0 is not being interpreted as you would like when used in a title (which expects a string). Explicitly converting i to a string will ensure the 0 shows correctly.
In summary, the following changes will enable your code to work better:
On the outer window: remove the layout:fit and add scrollable:true.
On the accordion: remove the scrollable:true.
On the items in the accordion: ensure the title is consistently converted to a string.
See updated fiddle here.
Ext.create("Ext.window.Window", {
width: 300,
height: 400,
scrollable: true,
items: [{
xtype: "panel",
layout: {
type: "accordion"
},
listeners: {
beforerender: function () {
var i;
for (i = 0; i < 30; i += 1) {
this.add({
title: 'box ' + i,
items: [{
xtype: "textfield",
value: i
}]
});
}
}
}
}]
}).show();
I'm creating a web application and I want a panel to be perfectly in the center of it's parent panel. I was going through ExtJS5's Kitchen Sink to find layout examples and I found this one.
It places the panel perfectly in the middle, it doesn't cheat using hbox or vbox then setting the pack and align properties to center and middle.
Here is the code he used:
Ext.define('KitchenSink.view.layout.Center', {
extend: 'Ext.container.Container',
requires: [
'Ext.layout.container.Center'
],
xtype: 'layout-center',
width: 500,
height: 400,
layout: 'center',
items: {
title: 'Centered Panel: 75% of container width and 95% height',
border: true,
layout: 'center',
scrollable: true,
width: '75%',
height: '95%',
bodyPadding: '20 0',
items: [
{
title: 'Inner Centered Panel',
html: 'Fixed 300px wide and full height. The container panel will also autoscroll if narrower than 300px.',
width: 300,
height: '100%',
frame: true,
bodyPadding: '10 20'
}
]
}
});
And here is how it looks like:
The reason I prefer this is because the width and height of one the first inner panel is purely percent based. If I tried this using hbox or vbox, I would need to set the width or height to a fixed number.
I'm using Sencha Architect and for some reason, I can't find the layout type center for my panel, container, and viewport elements. I've also included the Ext.layout.container.Center in my requires but still no dice.
Does anyone know how to implement this Kitchen Sink example in Sencha Architect?
This is a bug https://www.sencha.com/forum/showthread.php?293050
But you can easily overcome any such problems using process config function in SA.
Select your class where you want to edit special configs and click on add processCofnig
Next in the generated function you can edit the configs in any way you need.
processMyContainer: function(config) {
config.layout = "center";
}
The only disadvantage of using process config is that you will not see the settings set by it in the SA design view - but when you preview the app you will see it.
This is my final code for the class:
Ext.define('MyApp.view.MyContainer', {
extend: 'Ext.container.Container',
alias: 'widget.mycontainer',
requires: [
'MyApp.view.MyContainerViewModel',
'Ext.panel.Panel'
],
viewModel: {
type: 'mycontainer'
},
height: 800,
width: 600,
initConfig: function(instanceConfig) {
var me = this,
config = {
items: [
me.processMainPAnel({
xtype: 'panel',
height: '95%',
width: '75%',
bodyPadding: '20 0',
title: 'Centered Panel: 75% of container width and 95% height',
items: [
{
xtype: 'panel',
height: '100%',
html: 'Fixed 300px wide and full height. The container panel will also autoscroll if narrower than 300px.',
width: 300,
bodyPadding: '10 20',
title: 'Inner Centered Panel'
}
]
})
]
};
me.processMyContainer(config);
if (instanceConfig) {
me.getConfigurator().merge(me, config, instanceConfig);
}
return me.callParent([config]);
},
processMainPAnel: function(config) {
config.layout = "center";
return config;
},
processMyContainer: function(config) {
config.layout = "center";
}
});
This is the result in the browser:
I display Panel A first, then display Panel B below it. Panel A uses JSONP to get the data and is shown in the callback function of the store load. So it takes about 1 sec to show.
I aligned a floating panel C to Panel B. The floating panel C is something like this:
Ext.define('MyApp.view.MyWindow', {
extend: 'Ext.window.Window',
height: 334,
width: 540,
layout: {
type: 'border'
},
title: 'Run report',
initComponent: function () {
var me = this;
floatingpanel = Ext.create('Ext.panel.Panel', {
html: "something",
width: 100,
height: 50,
floating: true,
listeners: {
'show': {
fn: function () {
floatingpanel.alignTo(PanelB, "tr-tr", [left, top]);
},
scope: floatingpanel,
//delay: 1000, // to wait for other component to show
single: true
}
}
});
Ext.applyIf(me, {
items: [{
xtype: 'form',
bodyPadding: 10,
region: 'center'
}]
});
me.callParent(arguments);
}
});
Then floatingpanel.show() is called to display the panel. It is not added to Panel B though.
If I don't use delay as shown above, the floating panel C appeared somewhere in Panel A since Panel A is not available yet when the floating panel is about to show. So I put the "delay".
After 1 sec, Panel A is shown as the callback succeeded. Now the floating panel C aligns to Panel B in the right place.
Since the callback function may succeed in 1 sec or 10 sec, the delay time is hard to choose.
Are there other ways to work this out? I tried to use doConstrain to attach the floating panel C to Panel B: floatingpanel.doConstrain(PanelB). But somehow it didn't work.
initComponent: function () {
var me = this;
floatingpanel = Ext.create('Ext.panel.Panel', {
html: "something",
width: 100,
height: 50,
// floating: true,
listeners: {
'show': {
fn: function () {
me.alignTo(PanelB, "tr-tr", [left, top]);
},
scope: floatingpanel,
//delay: 1000, // to wait for other component to show
single: true
}
}
});
Ext.applyIf(me, {
items: [{
xtype: 'form',
bodyPadding: 10,
region: 'center'
}]
});
me.callParent(arguments);
}
please use above code instead of ..
I've got a a Tab panel with a few tabs inside. I'm using the iconCls property in the tabs to give each tab an image along with its title. I'm using the fam fam fam 16x16 icons and the default tab space is cutting the images off at the top/bottom.
I tried messing around with the icon's class by changing the margins but it's not helping. According to the documentation the ext.tab.Tab component has padding and height properties, but setting those is not having an effect on the tab at runtime.
Ext.define('AM.view.Tab.Standard', {
extend: 'Ext.tab.Panel',
alias: 'widget.TabStandard',
region: 'center', // a center region is ALWAYS required for border layout
deferredRender: false,
activeTab: 0, // first tab initially active
initComponent: function() {
this.items = this.buildItems();
this.callParent(arguments);
},
buildItems: function(){
var items =
[
{
padding: 10, // nope :(
title: 'Gantt',
autoScroll: true,
iconCls: 'gantt icon',
},
{
height: 10, // nope :(
title: 'Logs',
autoScroll: true,
iconCls: 'logs icon',
},
{
title: 'Help',
autoScroll: true,
iconCls: 'help icon',
}
];
return items
},
});
Perhaps I'm misunderstanding how those properties work, but the everything on the page looks the same.
EDIT: It appears I'm having the same problem with the "Headings" (the bar with the +/-) when used as an accordion panel.
You can customize tabs in a tab panel by using the tabBar property on tabPanel:
var tabpanel = new Ext.tab.Panel({
plain: true,
region: 'center',
tabBar: {
defaults: {
flex: 1, // if you want them to stretch all the way
height: 20, // set the height
padding: 6 // set the padding
},
dock: 'top'
}
});
I've got a sencha touch app, with a panel that contains 3 image buttons, and the idea is that you can use flick scrolling to scroll them left or right to press the correct one.
The first time (after each load of the app) that you touch or flick these buttons, it doesn't scroll, or it scrolls jerkily. It works ok if you touch it and hold your finger steady for half a second before moving. After that initial time it flicks nicely.
The panel is constructed like so:
var picScroller = { // The picture scroller
flex: 1,
cls: 'items',
scroll: 'horizontal',
layout: 'hbox',
defaults: {
width: 235,
height: 160
},
items: [
{ width: 32 },
{ xtype: 'button', id:"bn1", cls:'myimagebutton', pressedCls:'', handler: myHandler },
{ xtype: 'button', id:"bn2", cls:'myimagebutton', pressedCls:'', handler: myHandler },
{ xtype: 'button', id:"bn3", cls:'myimagebutton', pressedCls:'', handler: myHandler },
{ width: 32 }
]
};
And my CSS is like so:
.myimagebutton {
border:0;
border-radius:0;
margin:10px;
}
Any suggestions? thanks so much
Here's an article that lists a solution to a similar-sounding problem (although this may be specific to being used in conjunction with PhoneGap): http://www.senchatouchbits.com/6/fixing-flickering-of-animations-in-phonegap.html