Scenario description: I have a border layout with an ExtJS container containing one-to-many windows an a panel (acting as a Taskbar). I want the taskbar to be always on top. If a Window is active and consequently in front, calling toFront does not put it in front as expected.
The ExtJS Windows which remain in front is within the center area of the Border layout, whereas the panel acting as taskbar is within the south area, as follows:
items: [
{
xtype: 'maincontainer', id:'maincontainer',
region : 'center'
},
{
xtype: 'launchpanel', id:'launchpanel',
region: 'south',
collapsible : true,
}
],
where maincontainer and launchpanel extend Ext.container.Container and Ext.panel.Panel respectively. This code is within the main container which is the only item in the ExtJS MVC application's Viewport.
How do I get the launchpanel to be always in front / on top?
From what I've read in the meantime what appears in front is determined by the CSS z-index property.
Then I found this answer about how to set the z-index for a panel. Hence I set the z-index for the Panel each time it is rendered by having the following snippet in the controller:
'launchpanel': {
expand: function(panel) {
panel.getEl().setStyle('z-index','80000');
},
...
Still, if anyone has a better way of doing the above, please share!
Related
I want to render my viewport inside div tag. If i change "Ext.container.Viewport" to any other container, that works in development mode but not in Build mode. In Build mode it displays nothing.
I found similar question on Stackoverflow like Render Ext.application in a div but answer in this question suggest to use different container, but in my case if I replace viewport to a container, nothing is displaye din Build mode(Empty console log).
Here is my code of viewport :
Ext.define('PfalzkomApp.view.Viewport', {
extend: 'Ext.container.Viewport',
requires:[
'Ext.layout.container.Fit',
'Papp.view.PopUpWindow'
],
type: 'fit',
renderTo: Ext.Element.get("REA_TasklistEntry"),
items: [{
xtype: 'app-popUpWindow'
}]
});
Can anyone help me?
Thanks for your time.
I have the application with Servlets, CSS, JS and JSON. It's working with ExtJS 3 library (I keep the code in another project).
The goal is to run this application inside a Liferay Portlet.
I created new Portlet called "portal-portlet".
Added all my Java classes to new src folder. Am I suppose to refractor code?
Added all ExtJS code from WebContent folder to docroot > js > extjs3 folder of the Portlet.
Modified view.jsp:
<div id="invoice_form"></div>
It links with application.js:
Ext.onReady(function() {
// code responsible for rending main window
var main = new Ext.Viewport({
layout: 'border',
renderTo: 'invoice_form',
id: 'main',
items: [{
5.. Modified liferay-portlet.xml with lines look like this one:
<header-portlet-javascript> /js/extjs3/adapter/ext/ext-base.js </header-portlet-javascript>
6.. Created new Theme Project and added CSS to custom.css and portlet.css (to override Liferay default CSS). I copied CSS from ExtJS.
Here what I've got.
My new ExtJS Portlet cover all page and contain almost nothing. It's suppose to have data table in right column and file manager in left column. Now you can see only bar that's suppose to separate file-tree from table
So I'm ready to do it from scratch. Should I use hook or theme project and what I did wrong, how make it work?
Thanks for reading.
The problem is that Liferay portlets are rendered into a div and when you try to embed an existing Sencha application you will notice that many nodes are just placed as child of the body. Thus its totally corrupting your Sencha application and mostly it end ups in a white screen.
This is how I fixed it for large Sencha application which luckily wrapped everything already into a Ext.Viewport object :
Now place in your view.jsp (portlet) this here :
Then setup up your Sencha panels and put them into a Viewport object :
this._viewport = new Ext.Viewport({
layout : 'border',
margins : '0 0 0 0',
renderTo:Ext.get(Repository.Config.GUI_PARENT),
defaults : {
renderTo:Ext.get(Repository.Config.GUI_PARENT)
}, // default config for all child widgets
items : [
new Ext.Panel({ // Header panel for login and toolbar
region : 'north',
height : 60,
margins : '0 0 0 0',
border : true,
items :[
{ // Header with logo and login
region: 'north',
html: Repository.Templates.login.apply({
currentUser : this._currentUser,
isPublicUser : this._currentUser=='public'
}),
height: 30,
renderTo:Ext.get(Repository.Config.GUI_PARENT)
},
this._controls.toolbar
] // Toolbar
}), // Panel
this._controls.centerPanel,
this._controls.leftPanel,
this._controls.rightPanel
]
});
Notice that the renderTo:Ext.get(Repository.Config.GUI_PARENT) literal doesn't seem to fix the problem yet but !
Now replace in ext-all.js this
Ext.Viewport = Ext.extend(Ext.Container, {
this.el = Ext.getBody()
with
Ext.Viewport = Ext.extend(Ext.Container, {
this.el = Ext.get(Repository.Config.GUI_PARENT);
where Repository.Config.GUI_PARENT is simply a constant : "root"
I am not sure this is still the right in general way but it seems to work now very fine.
I need some help on understanding layouts better. I watched some of the screencasts and the examples, etc. But I can't get done what I need and I think I'm not understanding things correctly.
I want to create a page with a Grid on top with a 100% width of the viewport. (Actually in my real page it's in a specific div but let's just assume...) Then below this grid, I need a TreePanel on the left for 1/3 of the width and the other 2/3 by a second Grid.
I'm trying to use the TableLayout so that I can have the first Grid span the two columns on the first row and second row would have the tree and the 2nd grid one besides the other.
I have my top grid and my tree on the page but the height of the top grid is not calculated automatically, it's just a few pixel high no matter how many rows are in there, and if I resize the browser window I don't get horizontal scrollbars on the grid.
So, my guess is that really the TableLayout is not what I should be using, but maybe I'm wrong. How can I achieve this layout ? Would I be better off using the BorderLayout ?
Here's the JS code I have (distributePMPanel is just a plain div on the page and I have another JS component that is loaded after that creates the Tree with a renderTo of 'mytree' so the Tree outputs in the second item's div):
_I.mainPanel = new Ext.Panel({
id:'main-panel',
renderTo: 'distributePMPanel',
baseCls: 'x-plain',
layout:'table',
layoutConfig: {columns:2},
items: [
new Ext.grid.GridPanel({
store: new Ext.data.JsonStore({
fields: Ext.decode(_I.options.pmStore),
root: 'pmData',
idProperty: 'id',
data: Ext.decode(_I.options.pmData)
}),
colModel: new Ext.grid.ColumnModel({
defaults: {
sortable : true
},
columns: Ext.decode(_I.options.pmColumns)
}),
colspan: 2
}),
{
id: 'mytree'
},
{
html: 'Grid 2'
}
]
});
};
Also, I have the following CSS:
#distributePMPanel table.x-table-layout { width: 100%; }
#distributePMPanel .x-panel-body { border-width: 0; }
I would definitely look at borderlayout.
Your grid is North
Your tree is West
Your other grid is Center
Should be a snap with borderlayout.
Using Extjs, I've got a TabPanel containing two Panels. Those panels do not automatically expand vertically. All layout are set with type 'fit' and forceFit is true.
Edit:
I've updated my code according the Kunal's suggestion.
To describe the interface: you have a tree list containing several nodes. When the user clicks on one of those nodes it opens a tab (calling the function ZombieTab(zombie_ip)) with two sub-tabs (ZombieTab_MainTab and ZombieTab_Commands).
Editing the code with Kunal's suggestion had the following effect: We can see that the ZombieTab_Commands's bottom bars appears at the top of the panel and as a result, all components of the tab are not displayed.
Is the main tab of your, which is ZombieTab, is taking the whole space?
If yes, I would make changes for child panels as
ZombieTab_MainTab.superclass.constructor.call(this, {
id: 'zombie-main-tab',
layout:'fit',
title: 'Main',
items: {
layout:'border',
items:[top_bar, logs]
}
});
similarly for other child panel as well.
For the Toolbar in Command Tab, try replacing with normal Ext Toolbar and see the effect.
bbar: new Ext.Toolbar({
id: 'exploits-bbar-zombie-'+zombie_ip,
text: 'ready',
border: false,
iconCls: 'x-status-valid',
items : [ { text: 'test'} ]
})
Below is a simple ext js code that i can't get to work correctly in IE (works fine in Firefox, and Chrome). The problem is that while it initially renders correctly , its messed up if i try resizing the 'west' panel. Can someone please point out the issue
var viewport = new Ext.Viewport({
layout: "border",
items: [{
xtype: "panel",
region: "west",
frame: true,
collapsible: true,
width: 200,
baseCls: 'x-plain',
collapseMode:'mini',
split:true,
items:[{
xtype:"panel",
collapsible:true,
titleCollapse:true,
title:'Test1',
height: 200,
frame: true,
border:true
}]
}, {
xtype: "panel",
region:"center"
}]
})
Any container that contains other panels or components usually requires a layout to work correctly. Try adding layout:'fit' to the west panel and see if that helps. Looking at your code though, I'm not sure why you would need a nested panel there (unless this is just test code). The west panel should simply contain whatever content you are planning on putting into the nested panel. If the goal is to add multiple child panels to west, then you would give west a layout like 'border' or whatever makes sense.
Maybe ExtJS forum can help you?
For a short hint you may try to answer the question:
What is layout of 'center' region?
With border layout I can see only one region, and it called 'west'. This shouldn't work as expected.