So i made a simple app with 4 regions, north, east, south and west. I want to load a treepanel(static) in the west region. My code for the westregion is as follows:
........................
{
region: 'west',
title: 'Hierarchy',
iconCls:'icon-map',
width: 250,
items: treepanel
}
........................
My panel and store are the one from the docs tutorial and looks as follows:
var store = Ext.create('Ext.data.TreeStore', {
root: {
text: "/",
expanded: true,
children: [
{ text: "detention", leaf: true },
{ text: "homework", expanded: true, children: [
{ text: "book report", leaf: true },
{ text: "alegrbra", leaf: true}
] },
{ text: "buy lottery tickets", leaf: true }
]
}
});
var treepanel = Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible: true,
});
The only problem is that the treeview is not showing.. Anybody know how to fix this?
You can add the region to the tree panel himself:
var treepanel = Ext.create('Ext.tree.Panel', {
region: 'west',
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible: true,
});
and them, in the viewport you add the treepanel in the items:
Ext.create('Ext.container.Viewport', {
layout: 'border',
renderTo: Ext.getBody(),
items: [{
region: 'north',
...
}, treepanel, {
region: 'south',
...
}, {
region: 'east',
...
}, {
region: 'center',
...
}]
});
Complete working example:
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="ext-all.js"></script>
</head>
<body>
<script>
Ext.onReady(function(){
var store = Ext.create('Ext.data.TreeStore', {
root: {
text: "/",
expanded: true,
children: [
{ text: "detention", leaf: true },
{ text: "homework", expanded: true, children: [
{ text: "book report", leaf: true },
{ text: "alegrbra", leaf: true}
] },
{ text: "buy lottery tickets", leaf: true }
]
}
});
var treepanel = Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
region: 'west',
width: 200,
height: 150,
store: store,
rootVisible: true,
renderTo: Ext.getBody()
});
Ext.create('Ext.container.Viewport', {
layout: 'border',
renderTo: Ext.getBody(),
items: [{
region: 'north',
title: 'North',
html: 'North'
}, treepanel, {
region: 'south',
title: 'South',
html: 'South'
}, {
region: 'east',
title: 'East',
html: 'East'
}, {
region: 'center',
title: 'Center',
html: 'Center'
}]
});
});
</script>
</body>
</html>
Related
As what the title suggest, is that I have a panel that will execute a command onRender to add items, like the code below, a treepanel. I wrapped treepanel in a layout - border and then on a vbox panel to be put on region west. Unfortunately the whole tree panel does not render. I inspected the HTML, and the elements are there but they are sort of disabled because the elements have that blurry font in the firebug. Why is it doing that? Please help.
Ext.define('anr.panels.report', {
extend : 'Ext.panel.Panel',
pageLimit : 15,
title : 'Report Generator',
layout : 'border',
border : false,
frame : true,
initComponent: function() {
this.callParent(arguments);
},
onRender:function() {
var me = this;
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "detention", leaf: true },
{ text: "homework", expanded: true, children: [
{ text: "book report", leaf: true },
{ text: "algebra", leaf: true}
] },
{ text: "buy lottery tickets", leaf: true }
]
}
});
var reportItem = {
xtype: 'panel',
layout: 'vbox',
id:'westpanel',
region:'west',
width: 350,
height: 300,
minSize: 350,
maxSize: 350,
border: false,
split: true,
margin: '1 0 5 1',
items: [
{
border: false,
layout: 'border',
items:[
{
xtype: 'treepanel',
height: 250,
width: 200,
store: store,
id: 'menu-panel',
frame: false,
rootVisible: false
}
]
}
]
};
this.add(reportItem);
this.callParent(arguments);
}
});
Im not really sure why you are using the onRender method instead of placing the panels in the items but there are too many errors there anyway.
Every border panel needs height, width or flex and it is required to have one panel with the center region.
If you change your code to this, it will work but be careful with all these nested panels, it seems like you are getting lost.
CODE
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [{
text: "detention", leaf: true
},{
text: "homework", expanded: true,
children: [{
text: "book report", leaf: true
},{
text: "algebra", leaf: true
}]
}, {
text: "buy lottery tickets",
leaf: true
}]
}
});
Ext.define('anr.panels.report', {
extend : 'Ext.panel.Panel',
width: 800,
height: 400,
border: true,
title : 'Report Generator',
layout : 'border',
items: [{
xtype: 'panel',
layout: 'vbox',
region:'west',
width: 350,
height: 300,
minSize: 350,
maxSize: 350,
border: false,
split: true,
margin: '1 0 5 1',
items: [{
xtype: 'panel',
border: false,
layout: 'border',
flex: 1,
width: 350,
items:[{
xtype: 'treepanel',
height: 250,
width: 200,
store: store,
id: 'menu-panel',
region: 'center',
frame: false,
rootVisible: false
}]
}]
},{
xtype : 'panel',
region: 'center'
}]
});
Ext.create('anr.panels.report',{
renderTo: Ext.getBody()
});
I have an application with possibly 4 level menu,
i want to implement it with Accordion for first level and a tree inside each accordion panel.
how could i implement this with a store?
http://i.stack.imgur.com/DFQDl.png
Here is the working example :
ExtJS - Treepanel inside the Accordion Menu
Ext.onReady(function () {
Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
width: 300,
height: 300,
defaults: {
// applied to each contained panel
bodyStyle: 'padding:15px'
},
layout: {
// layout-specific configs go here
type: 'accordion',
titleCollapse: false,
animate: true,
activeOnTop: true
},
items: [{
title: 'Panel 1',
id: 'panelOne',
html: 'Panel content!'
}, {
title: 'Panel 2',
html: 'Panel content!'
}, {
title: 'Panel 3',
html: 'Panel content!'
}],
renderTo: Ext.getBody()
});
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "detention", leaf: true },
{ text: "homework", expanded: true, children: [
{ text: "book report", leaf: true },
{ text: "algebra", leaf: true}
] },
{ text: "buy lottery tickets", leaf: true }
]
}
});
Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
id: 'treePanel',
header: false,
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody()
});
var panel = Ext.getCmp('panelOne');
var tree = Ext.getCmp('treePanel');
panel.add(tree);
});
Ali,
here is the modified edition, hope it's right!
ExtJS - TreePanel inside the Panel
Ext.define('AccModel', {
extend: 'Ext.data.Model',
fields: ['id','text']
});
var accordion = Ext.create('Ext.panel.Panel', {
width: 400,
height: 620,
id: 'accordionPanel',
defaults: {
bodyStyle: 'padding:15px'
},
layout: {
type: 'accordion',
titleCollapse: false,
animate: true,
activeOnTop: false
},
renderTo: Ext.getBody()
});
var addAccordion = function() {
Ext.Ajax.request({
url: 'treenode.json',
success: function(response) {
var nodes = Ext.JSON.decode(response.responseText);
Ext.each(nodes, function(node) {
accordion.add({
title: node.id,
id: node.id,
items: Ext.create('Ext.tree.Panel', {
header: false,
width: 380,
height: 600,
rootVisible: false,
root: {
expanded: false,
children: node.children
}
})
});
})
}
});
}
var init=function() {
addAccordion();
}
Ext.onReady(function () {
init();
});
I just want to get active tab on 'save' button click in extjs code.
my code is given below:
Ext.require([
'Ext.tab.*',
'Ext.window.*',
'Ext.tip.*',
'Ext.layout.container.Border'
]);
Ext.define('WebCare.UI.RoleManagerAdminWindow', {
extend: 'Ext.window.Window',
id: 'rolemanageradminwindow',
modal: true,
title: 'Manage Role & Permission',
closable: true,
closeAction: 'hide',
width: 600,
height: 550,
minWidth: 700,
minHeight: 200,
layout: 'border',
bodyStyle: 'padding: 5px;',
listeners: {
show: function (sender, eOpts) {
var self = sender;
vent.trigger("WindowLoad");
}
},
items: [
{
id: 'rolemanageradmintab',
region: 'center',
xtype: 'tabpanel',
constructor: function (config) {
var self = this;
self.callParent(config);
},
items: [
{
xtype: 'rolemanagereditor',
id:'1'
},
{
xtype: 'agencyeditor',
id: '2'
}
],
listeners: {
'tabchange': function (tabPanel, tab) {
}
}
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
defaults: { minWidth: 70 },
style: {
background: "#d6e3f3"//, "#d9ebff",
},
height: 40,
items: [
{ xtype: 'component', flex: 1 },
Ext.create('Ext.button.Button', {
height: 25,
text: 'Close',
disabled: false,
handler: function () {
this.up('.window').close();
}
}),
Ext.create('Ext.button.Button', {
height: 25,
text: 'Save',
disabled: false,
handler: function () {
}
})
]
}
]
});
A simple example to get the active tab in the tabpanel when you click Save button.
Ext.onReady(function() {
var tabPanel = Ext.create('Ext.tab.Panel', {
width: 300,
height: 200,
activeTab: 0,
items: [
{
title: 'Tab 1',
bodyPadding: 10,
html: 'A simple tab'
},
{
title: 'Tab 2',
html: 'Another one'
},
{
title: 'Tab 3',
html: 'Another one'
}
],
buttons: [
{
text: 'Save',
handler: function() {
var activeTab = tabPanel.getActiveTab();
alert("The active tab in the panel is " + activeTab.title);
}
}
],
renderTo: Ext.getBody()
});
});
How can we add maximize and minimize in the panel of EXTJS 4 portal example:
http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/portal/portal.html
Fully working code:
Ext.define('Ext.app.Portal', {
extend: 'Ext.container.Viewport',
requires: ['Ext.app.PortalPanel', 'Ext.app.PortalColumn', 'Ext.app.GridPortlet', 'Ext.app.ChartPortlet'],
initComponent: function(){
var content = '<div class="portlet-content">'+Ext.example.shortBogusMarkup+'</div>';
var mainColumnPanelId;
//var mainPanelId;
var itemNo=0;
this.tools= [
{
type:'minimize',
hidden:true,
scope:this,
handler: function(e, target, panel)
{
var cardPanel=Ext.getCmp("app-portal");
var c = panel.up("viewport");
var maximizePortletPanel = Ext.getCmp("maximizePortletPanel");
cardPanel.layout.setActiveItem(0);
var originalPanel=Ext.getCmp(mainColumnPanelId);
originalPanel.insert(itemNo,maximizePortletPanel.items.items[0]);
panel.tools['close'].setVisible(true);
panel.tools['collapse-top'].setVisible(true);
panel.tools['minimize'].setVisible(false);
panel.tools['maximize'].setVisible(true);
}
},
{
type:'maximize',
scope:this,
handler: function(e, target, panel)
{
var cardPanel=Ext.getCmp("app-portal");
var columnPanel = panel.ownerCt.ownerCt;
var maximizePortletPanel = Ext.getCmp("maximizePortletPanel");
mainColumnPanelId=columnPanel.getId();
var columnPanelItems=columnPanel.items.items;
for(var j=0;j<columnPanelItems.length;j++){
if(columnPanelItems[j].getId()==panel.ownerCt.getId()){
itemNo=j;
break ;
}
}
maximizePortletPanel.insert(0,panel.ownerCt);
cardPanel.layout.setActiveItem(1);
panel.tools['minimize'].setVisible(true);
panel.tools['close'].setVisible(false);
panel.tools['collapse-top'].setVisible(false);
panel.tools['maximize'].setVisible(false);
}
}];
Ext.apply(this, {
id: 'app-viewport',
layout: {
type: 'border',
padding: '0 5 5 5' // pad the layout from the window edges
},
items: [{
id: 'app-header',
xtype: 'box',
region: 'north',
height: 40,
html: 'Ext Portal'
},{
xtype: 'container',
region: 'center',
layout: 'border',
items: [{
id: 'app-options',
title: 'Options',
region: 'west',
animCollapse: true,
width: 200,
minWidth: 150,
maxWidth: 400,
split: true,
collapsible: true,
layout:{
type: 'accordion',
animate: true
},
items: [{
html: content,
title:'Navigation',
autoScroll: true,
border: false,
iconCls: 'nav'
},{
title:'Settings',
html: content,
border: false,
autoScroll: true,
iconCls: 'settings'
}]
},{
id: 'app-portal',
region: 'center',
layout:'card',
items:[{
xtype: 'portalpanel',
items: [{
id: 'col-1',
items: [{
id: 'portlet-1',
title: 'Grid Portlet',
tools: this.tools,
items: Ext.create('Ext.app.GridPortlet'),
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
},{
id: 'portlet-2',
title: 'Portlet 2',
tools: this.tools,
html: content,
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
},{
id: 'col-2',
items: [{
id: 'portlet-3',
title: 'Portlet 3',
tools: this.tools,
html: '<div class="portlet-content">'+Ext.example.bogusMarkup+'</div>',
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
},{
id: 'col-3',
items: [{
id: 'portlet-4',
title: 'Stock Portlet',
tools: this.tools,
items: Ext.create('Ext.app.ChartPortlet'),
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
}]
},{ //title: 'Portlet',
xtype:'panel',
id:'maximizePortletPanel',
layout:'fit',
autoScroll:true
//border:true,
//frame:true
}]////
}]//
}]
});
this.callParent(arguments);
},
onPortletClose: function(portlet) {
this.showMsg('"' + portlet.title + '" was removed');
},
showMsg: function(msg) {
var el = Ext.get('app-msg'),
msgId = Ext.id();
this.msgId = msgId;
el.update(msg).show();
Ext.defer(this.clearMsg, 3000, this, [msgId]);
},
clearMsg: function(msgId) {
if (msgId === this.msgId) {
Ext.get('app-msg').hide();
}
}
});
You cannot 'maximize' or 'minimize' the 'Viewport' because it automatic render to body, If you want to use maximize/minimize feature you must work with Window that is the better way to do.
The Viewport renders itself to the document body, and automatically
sizes itself to the size of the browser viewport and manages window
resizing. There may only be one Viewport created in a page.
See: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.container.Viewport
But if you want to maximize some panel inside the viewport you should use showBy method of each panel to show it by the specified size with target component.
See: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.window.Window-method-showBy
You can push panel as item inside Window. Then provide maximize and minimize functionality by using tool[tbar in extjs].
I have following code i want that window opened uses Ext.layout.BorderLayout and also on the left side of the window has Ext.tree.TreePanel... I tried it but when I use BorderLayout the page does not open? Can anyone help me with this?
Ext.onReady(function() {
var window = Ext.create('Ext.Window', {
title: 'Hello',
height: 100,
width: 100
});
window.show();
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all-neptune.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all.min.js"></script>
Some addition to bmoeskau's answer. I recomend you to not use JavaScript reserved words like window, document, number etc.
Here's an official example showing a window with a BorderLayout. It's not enough just to add layout:'border' you have to add panels to the layout container and also configure the layout regions properly.
E.g.:
var window = Ext.create('Ext.Window', {
title: 'Hello',
width: 100,
height: 100,
layout: 'border',
items: [{
region: 'west',
title: 'Sidebar',
width: 200,
split: true,
collapsible: true,
floatable: false
}, {
region: 'center',
html: 'Some content'
}]
});
Simply give your window a border layout and set the regions for the immediate children. Each child will have its own layout and child items.
Ext.onReady(function() {
var treeStore = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [{
text: "Wake up",
leaf: true
}, {
text: "Go to Work",
expanded: true,
children: [{
text: "Eat Lunch",
leaf: true
}, {
text: "Finish Report",
leaf: true
}]
}, {
text: "Go to Sleep",
leaf: true
}]
}
});
var myWindow = Ext.create('Ext.Window', {
title: 'Hello World',
width: 480,
height: 220,
layout: 'border',
items: [{
layout: 'fit',
region: 'west',
title: 'Tasks',
width: 180,
split: true,
collapsible: true,
floatable: false,
items: [{
xtype: 'treepanel',
store: treeStore,
rootVisible: false,
}]
}, {
layout: 'fit',
region: 'center',
items: [{
xtype: 'textarea',
value: new Lorem().createText(6, Lorem.TYPE.SENTENCE),
flex: 1
}]
}]
});
myWindow.show();
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all-neptune.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all.min.js"></script>
<script src="https://cdn.rawgit.com/f/loremjs/master/lorem.js"></script>