I have an Ext window that is created from the desktop example, like this
win = desktop.createWindow({
id: 'main',
app: me.app,
border: false,
closable: true,
maximized: true,
maximizable: false,
width: winW,
height: winH,
layout: 'fit',
items: [{
...
}]
});
Now just at the moment this window shows, another one should be shown for configure purposes, the problem that I have is that when this second window shows it aprears in the back of the main one.
This is how my configure window is created in the 'Main window' render event
me.confWin= new Ext.window.Window({
id: 'configWin',
layout: 'fit',
width: 290,
height: 165,
modal: true,
draggable: false,
resizable: false,
items: {
...
}
});
Then in the show event of the main window, i have this
this.confWin.show();
this.win.toBack();
I have tried placing this in different events like afterrender, afterlayout, activate and still the confWin is shown in front and then placed in the back
After a little analysis, I found that when my main win is created it has a z-index of 19010 (example), the confWin has a z-index of 19021 when I call confWin.show(), but after that I don't know why, they just change their z-index and one has the index of the other.
Also I tried editing the style with Jquery just after the confWin.show(), but again the z-index changes.
Thanks for your help
Edit
I tried to show the window on a button click and it works like charm, but if I fire the click event when I want the window tobe shown, it doesn't.
Any ideas?
You should be able to handle this in the show event.
winMain.on('show', function () {
winCfg.show();
});
I mocked up an example in JSFiddle to show that it works properly.
Related
How can i add a floating window to the viewport while its getting created.
When i'm trying to add whith
viewport.on('add',function(){
//my functionality here
});
How can i add???
Any help??
You can't really add components to a viewport while it's being created, unless you override its internal methods. And what you're doing is adding an event listener for the "add" event, which fires when items are added to a container.
I don't see why you're trying to add a window to a viewport, but you would add it just like any other item.
Ext.create("Ext.container.Viewport", {
items: [{
xtype: "window",
width: 400,
height: 400,
title: "My Window"
}]
});
Or just create the window by itself, since it is constrained to the document body anyway.
Remember, you have to call the show method on a window before it will render to the document (unless you set autoShow: true on the window config).
How to add interactive, dynamic components on a fixed location outside of all views in a Sencha Touch application.
With the menu at the top, I would like to add controls to the bottom of the app that control audio, display other random information and rotate imagery. This pane should not hide/move/refresh/etc. when changing views via the menu, in essence it should be separated from the rest of the application. It is highly preferred to be able to use the sencha 'audio' xtypes.
Should I implement this:
Straight into index.html
Somehow add it in the view which holds the menu as well
Some other magical way
The magical way is... Docking ( outside the rest of the app, probably means you want to doc on the viewport ).
http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-cfg-docked
var button = Ext.create('Ext.Button', {
text: 'Button',
id: 'rightButton'
});
Ext.create('Ext.Container', {
fullscreen: true,
items: [
{
docked: 'top',
xtype: 'titlebar',
items: [
button
]
}
]
});
Ext.create('Ext.Panel', {
html: 'Floating Panel',
left: 0,
padding: 10
}).showBy(button);
For your top view, I would use something along the lines of a Ext.TabPanel though.
http://docs.sencha.com/touch/2-0/#!/api/Ext.tab.Panel
var gusersPanel = Ext.create('Ext.grid.Panel', {
flex:1,
columns: [{
header: 'User Login',
dataIndex: 'user_login',
width:150
},{
header: 'User Name',
dataIndex: 'user_nicename',
width:150
},{
header:'Privledge',
dataIndex:'admin',
width:150
}],
autoScroll: true,
layout:'fit',
selModel: gusersSel,
store: gusersStore
})
Hi I am using above code for the grid Panel in Extjs4.0.2a When I populate data dynamically in the store the scrollbars are not working .
I have also tried using doLayout() for grid Panel but dosent work too .
The grid Panel is in a Window .
Anything that can solve this problem ?
Actually it works for some time but dosen't work all the time .
I've had the same problem. They use custom scrollbar and it's pretty buggy (especialy in chrome). If you are not going to use infinite scroll the possible solution could be to remove custom scrollbar and use native one. To do that just add the following to the grid's config:
var gusersPanel = Ext.create('Ext.grid.Panel', {
scroll : false,
viewConfig : {
style : { overflow: 'auto', overflowX: 'hidden' }
},
// ...
});
I did gusersPanel.determineScrollbars() when i am adding and removing data from store and it is working fine .
The problem with this is the scroll listener is attached to the div element on the afterrender event, but then if the scrollbar is not needed after a layout operation the div element is removed from the dom. Then, when it's needed again it's added back, but only if enough time has passed the garbage collection makes extjs recreate the div node and this time it's added to the dom without attaching the scroll listener again. The following code solves the problem:
Ext.override(Ext.grid.Scroller, {
onAdded: function() {
this.callParent(arguments);
var me = this;
if (me.scrollEl) {
me.mun(me.scrollEl, 'scroll', me.onElScroll, me);
me.mon(me.scrollEl, 'scroll', me.onElScroll, me);
}
}
});
You written code to layout: 'fit'. It did not work autoScroll.
Change the code to some height and remove layout: 'fit' code.
Like this.
var gusersPanel = Ext.create('Ext.grid.Panel', {
flex:1,
columns: [{
...........
}],
autoScroll: true,
//layout:'fit',
height: 130,
selModel: gusersSel,
store: gusersStore
It is help you. Cheers.
I've only got so far trying to achieve what i've mocked in the screenshot.
Basically, i have a fullscreen reports panel that has 6 panels nested within it. Each of these panels (i'll call them tiles, as that makes more sense) need to be shown at the same time (used the layout:'fix') for the main panel.
Each tile will have a carousel within it that gets it's items populated by means of a single ajax call, if the ajax call returns 3 items then the carousel will have 3 items etc.
I'm having trouble getting the tiles arranged properly, so that they are all shown neatly, and more importantly in a way that will work when the device goes from landscape to portrait mode.
Without worrying about the carousel part too much, trying to get the tiles arranged properly within the panel is a pain. I can pretty much get there with css, by floating... but the first panel always looks messed up. I've since done some some reading trying to achieve a more "sencha" way of doing this.
var rep1 = new PortalDashboard.views.Reportimagetile;
var rep2 = new PortalDashboard.views.Reportimagetile;
var rep3 = new PortalDashboard.views.Reportsinglefigtile
var rep4 = new PortalDashboard.views.Reportimagetile;
var rep5 = new PortalDashboard.views.Reportimagetile;
var rep6 = new PortalDashboard.views.Reportimagetile;
PortalDashboard.views.Dashboardcard = Ext.extend(Ext.Panel, {
title: 'Dashboard',
html: '',
cls: 'card5',
layout: 'fit',
iconCls: 'team',
styleHtmlContent: true,
initComponent: function () {
Ext.apply(this, {
items: [
rep1, rep2, rep3, rep4, rep5, rep6]
});
PortalDashboard.views.Dashboardcard.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('dashboardcard', PortalDashboard.views.Dashboardcard);
--
PortalDashboard.views.Reportsinglefigtile = Ext.extend(Ext.Panel, {
html: '',
cls: 'dashtilecontent',
initComponent: function () {
Ext.apply(this, {
html: '<h1>99.99%</h1>'
});
PortalDashboard.views.Reportsinglefigtile.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('reportimagetile', PortalDashboard.views.Reportsinglefigtile);
Fit layout is used to show a single item at a time so using it as the layout for your dashboard panel won't work. Besides writing a custom layout to achieve the 3x2 tile effect in your mock up I would set the layout of the dashboard to
layout: {
type: 'vbox',
align: 'center',
pack: 'center'
}
so now any items you add will be in the center of the panel body and stack vertically.. so add 2 panels for each of the rows and on those panels use an hbox layout and add 3 cards to each of those panels
layout: {
type: 'hbox',
align: 'center',
pack: 'center'
}
(those align or pack settings might not suit your needs if you plan to have different sizes on different boxes, in which case you'll need to use the flex property to give the boxes the proportions you want)
I’m newbuy on Sencha framework. I read the partial guidebook which I have found on the website to try to create some panels with tabs and buttons.
I would like to be able to understand how to create a my “events.js file” where putting the touch gesture event and calling them back into a mean myJS.js file. Particularly, in “dockeditems” which I have created for my mean panel, I have declared a tabPanel, some buttons and a panel where I have specified, as ‘html’, a .svg design file containing a planimetry. I wish I could apply ONLY on this last panel, containing this planimetry (for scaling by fingers), the TOUCH gesture events as PINCH, TAP, etc… How can I do this ?
Could you let me see a very simple example of the way to use a touchEvent.js file (which I have to implement) and how to connect it to the mean file containing the EXT.SETUP( …. onReady…..) ?
Something like that:
(myEventTouch.js)
myHandler = function() {“Pinching”};
(myPrincipalFile.js)
Ext.setup ({ onReady: function(){
new Ext.panel({ dockeditems: myitems })
}
var dockedItems = [{
xtype: 'toolbar',
title: 'Planimetry',
ui: 'dark',
dock: 'top',
items: “ some buttons “,
},
{
id:'html',
dock:'left',
width: '75%',
// HERE THERE IS THE CRITICAL POINT
html: '<object data="planimetry.svg" style="width: 100%; height: 100%" type="image/svg+xml" id="plan"/>',
handler: myHandler // HERE I WISH CALL BACK MY HANDLER
},
{
dock:'right',
width:'25%',
xtype:'tabpanel',
items: [“something”]
})
Thanks in advance :)
p.s.
sorry for my english (i'm italian :P)