Let's suppose that we have the following code:
Ext.create ( 'Ext.container.Viewport', {
layout : 'border',
items : [{
region : 'west',
xtype : 'panel',
collapsible : true,
id : 'panel1_id',
width : '45%'
}, {
region : 'center',
xtype : 'panel',
id : 'panel2_id',
width : '55%'
}]
});
As we can see, the first panel is collapsible. My question is:
is it possible to disable the panel's preview (when we click on the collapsed panel's header) when collapsed?
No, it is not collapased. You need to set collapsed: true for that.
Ext.create ( 'Ext.container.Viewport', {
layout : 'border',
items : [{
region : 'west',
xtype : 'panel',
collapsible : true, // this show the tool within the header
collapsed: true, // this collapses
floatable: false, // prevent floating on header-click when collapsed
id : 'panel1_id',
width : '45%'
},{
region : 'center',
xtype : 'panel',
id : 'panel2_id',
width : '55%'
}]
});
Related
I am creating a Border layout using ExtJS4 MVC structure. I am defining north,west,center and south regions. All the regions are being displayed but the problem here is that, all the regions are starting at the top left corner of the screen so they are getting overlapped.
Can someone please help me get the border layout right,so that it fits the entire screen..??
Here is my code:
Border.js
Ext.define('IN.view.item.Border',{
extend : 'Ext.container.Container',
alias : 'widget.myborderlyt',
requires : [ 'Ext.layout.container.Border' ],
title : 'Border layout',
autoShow : true,
defaults : {
split : true,
width : 800,
height : 900
},
layout : 'border',
items : [
{
region : 'north',
xtype : 'panel',
title : 'North region title here',
html : 'Here is the north region..111111111111111111111111111'
} ,
{
region : 'west',
xtype : 'panel',
title : 'west region',
html : 'Here is west...1222221111111111',
width : 150
},
{
region : 'center',
xtype : 'panel',
html : 'Center region....aaaaaaaaaeeeeeeeeeeeeeeeeetttttttttccccccccc'
} ,
{
region : 'south',
height : 60,
html : "South region ..ggggggggggggggggggggggg"
}
]
});
app.js
Ext.Loader.setConfig({
enabled : true
});
Ext.application({
name : 'IN',
appFolder : 'app',
controllers : [ 'Items' ],
launch : function() {
console.log('in LAUNCH-appjs');
Ext.create('Ext.container.Viewport', {
layout: 'border',
items : [ {
xtype : 'myborderlyt'
} ]
});
}
});
Ext.create('Ext.container.Viewport', {
layout: 'border',
items : [ {
xtype : 'myborderlyt'
} ]
});
In this code snippet, viewport's layout is 'border' but its item doesn't have a 'region' config.
This is what documentation says
Any Container using the Border layout must have a child item with
region:'center'. The child item in the center region will always be
resized to fill the remaining space not used by the other regions in
the layout.
So either change 'border' to 'fit' in viewport or add region config to 'myborderlyt'.
items : [ {
xtype : 'myborderlyt',
region : 'center'
} ]
I downloaded the latest version of https://github.com/wnielson/sencha-SlideNavigation and in the view/Main.js , for the Item1/Group 1 item, added toolbar + 2 panels, instead of toolbar + 1 panel, the code works fine:
{
title : 'Item1',
group : 'Group 1',
xtype : 'container',
// Enable the slide button using the
// defaults defined above in
// `slideButtonDefaults`.
slideButton : true,
layout: 'vbox',
items : [
{
xtype : 'toolbar',
title : 'Item 1',
docked : 'top'
},
{
xtype : 'panel',
style: 'background: red',
html: 'New1',
flex: 1,
// Mask this item when the
// container is opened
maskOnOpen : true
},
{
xtype : 'panel',
style: 'background: green',
html: 'New2',
flex: 2,
// Mask this item when the
// container is opened
maskOnOpen : true
}
]
},
The code works fine - it replaces the image you have in your demo with a panel with two vertically placed subpanels in red and green
I am trying to refactor the code into into separate view
Ext.define('Volt.view.FeedView', {
extend: 'Ext.Panel',
requires: [
'Ext.TitleBar',
'Ext.Button',
'Ext.Toolbar',
//'Ext.Panel'
],
xtype: 'feedViewCard',
config: {
iconCls: 'action',
title: 'FeedView',
layout:
{
type: 'vbox'
},
items : [
{
xtype : 'toolbar',
title : 'FeedView',
docked : 'top'
},
{
xtype : 'container',
style: 'background: red',
html: 'New1',
flex: 1
// Mask this item when the
// container is opened
//maskOnOpen : true
},
{
xtype : 'container',
style: 'background: green',
html: 'New2',
flex: 1
// Mask this item when the
// container is opened
//maskOnOpen : true
}
]
}
});
and use the following code in view/Main.js , removing the earlier code- there are no errors, but only the green box shows up
{
xtype: 'feedViewCard',
title : 'Home Page',
group : 'Group 1',
slideButton : true
},
Also, this refactored FeedView.js shows up as two child panels when used in a TabPanel view - so it is definitely working fine. Any advice? Thanks much
How can I set a textarea to always have the width and height of the parent panel that it is added to?
What I tried:
layout : 'fit',
items : [
{
xtype : 'panel',
title : 'XML definition',
lid : 'paneltextarea',
autoScroll: true,
autoWidth: true,
flex : 1
}
]
Into 'paneltextarea', this textarea will be added:
oTextarea = [{
xtype : 'textareafield',
name : 'message',
// value: strValue,
flex: 1,
border: 0,
style : { border: 0 },
lid: 'ietextarea'
}];
I forgot to set layout : 'fit' in the parent.
I am new to ext JS and I am tryin gto place 3 components in a FormPanel but I don't know ho wto align them in the center.
Here is my code
var durationForm = new Ext.FormPanel({
border : false,
labelAlign : 'top',
frame : true,
bodyStyle : 'padding-left:475px;',
items: [{
items: [{
rowWidth : .5,
layout :'column',
items:[{
columnWidth : .13,
layout : 'form',
items : [getNewLabel('<br/><font size="3">Duration: </font>')]
},{
columnWidth : .20,
layout : 'form',
items : [fromDate()]
},{
columnWidth : .17,
layout : 'form',
items : [toDate()]
}]
}]
}]
});
durationForm.render(Ext.getBody());
This shows output like this
But I want components to be align in the center of the panel. Anyone know how to do it?
I have solved this problem by using 'table' layout:
{
layout : 'fit', // parent panel should have 'fit' layout
items : [ // and only one item
{
xtype : 'panel',
border : false, // optional
layout : {
type : 'table',
columns : 1,
tableAttrs : {
style : {
width : '100%',
height : '100%'
}
},
tdAttrs : {
align : 'center',
valign : 'middle',
},
},
items : [ // a single container for nested components
{
xtype : 'panel',
layout : 'fit',
cellId : 'cell_id', // this one will be placed as id for TD
items : [
{}, {}, {} // nested components
]
}
]
}
]
}
{
//...
layout:'hbox',
layoutConfig: {
padding:'5',
pack:'center',
align:'middle'
},
items:[{
columnWidth : .13,
layout : 'form',
items : [getNewLabel(...)]
},{
columnWidth : .20,
layout : 'form',
items : [fromDate()]
},{
columnWidth : .17,
layout : 'form',
items : [toDate()]
}]
//...
}
See this
Just in case someone comes along looking for the answer like I did and couldn't find it here, use xtype:'splitter' between each item like so -
items:[{
xtype:'something'
},
{
xtype:'splitter'
},
{
xtype:'something-else'
}
}]
I have a border layout in ExtJS,
The north region contains some HTML, but also needs to contain a toolbar like this...
So i've managed to get the border layout set up, added the html to the North Region of the layout, but I can't find any workable examples of how to implement a tool bar.
I have found lot's of examples of toolbars on their own, but I've not got the luxury or learning ExtJs thoroughly so it's all greek to me.
I suspect there's a way to define a tool bar outside of the cumbersome JSON style flow of creating a layout and somehow attaching it to the region, and I'm hoping it's relativley simple to do. If someone can explain how I'd do this, it would really help.
Here's the code so far...
//make sure YOUR path is correct to this image!!
Ext.BLANK_IMAGE_URL = '../../ext-2.0.2/resources/images/default/s.gif';
//this runs on DOM load - you can access all the good stuff now.
Ext.onReady(function(){
var viewport = new Ext.Viewport({
layout: "border",
border: false,
renderTo: Ext.getBody(),
items: [
// ------------------------------------------------------------------
{
region: "north",
id : "toolbar-area",
xtype: 'panel',
html: [ "<div id=\"html-header\">",
"<div id=\"council-logo\"></div>",
"<ul id=\"ancillary-menu\">",
"<li>Logout</li>",
"<li>Gazeteer Home</li>",
"<li>Hello Rachel</li>",
"</ul>",
"<img id=\"inteligent-logo\" src=\"applied-images/logos/inteligent.gif\">",
"</div>" ],
/* ++++++++++++++++++++++++++++++++++++++++++++ */
/* The toolbar needs to go around here.... */
/* ++++++++++++++++++++++++++++++++++++++++++++ */
height: 100
},
// ------------------------------------------------------------------
// WEST
// ------------------------------------------------------------------
{
region: 'west',
xtype: 'panel',
split: true,
resizeable: false,
maxWidth : 350,
minWidth : 349,
collapsible: true,
title: 'Gazetteer Explorer',
width: 350,
minSize: 150,
// --------------------------------------------------------------
title: 'Nested Layout',
layout: 'border',
border: false,
id: "west",
items: [
{
// ***********************************************
// Search Form
// ***********************************************
region : "north",
height: 300,
split : true,
id : "left-form-panel",
items : [{
xtype : "form",
id : "search-form",
items : [
// Authority combo box
// ===============================
{
xtype : "combo",
fieldLabel : "Authority",
name : "authority",
hiddenName : "authority",
id : "authority-combo"
},
// ===============================
// Search Fieldset
// ===============================
{
xtype : "fieldset",
autoHeight : true,
title : "Search by...",
id : "search-fieldset",
items : [
// Ref Number text Box
// %%%%%%%%%%%%%%%%
{
xtype : "textfield",
name : "ref-number",
fieldLabel : "Ref. Number",
id : "ref-number-textfield"
},
// %%%%%%%%%%%%%%%%
// Streetname Combo
// %%%%%%%%%%%%%%%
{
xtype : "combo",
name : "street-name",
hiddenName : "street-name",
fieldLabel : "Street Name",
id : "street-name-combo"
},
// %%%%%%%%%%%%%%%%
// Postcode Combo
// %%%%%%%%%%%%%%%%
{
xtype : "combo",
name : "postcode",
hiddenName : "postcode",
fieldLabel : "Postcode",
id : "postcode-combo"
},
// %%%%%%%%%%%%%%%%
// Postcode Combo
// %%%%%%%%%%%%%%%%
{
xtype : "combo",
name : "town",
hiddenName : "town",
fieldLabel : "Town",
id : "towm-combo"
},
// %%%%%%%%%%%%%%%%
// Postcode Combo
// %%%%%%%%%%%%%%%%
{
xtype : "combo",
name : "locality",
hiddenName : "locality",
fieldLabel : "Locality",
id : "locality-combo"
},
// %%%%%%%%%%%%%%%
// Search Button
// %%%%%%%%%%%%%%%%
{
xtype : "button",
text : "Search",
id : "search-button"
},
// Reset Button
// %%%%%%%%%%%%%%%
{
xtype : "button",
text : "Reset",
id : "reset-button"
}
]
},
// =======================
]
}]
// *********************************************
},
{
region: 'center',
html: 'Tree view goes here'
}
]
},
// ------------------------------------------------------------------
{
region: 'center',
xtype: 'panel',
// --------------------------------------------------------------
layout: 'border',
border: false,
items: [
{
region: 'center',
height: 200,
split: true,
html: 'Map goes here'
},
{
region: 'south',
title: "Selection",
split: true,
height: 200,
collapsible: true,
html: 'Nested Center'
}
]
},
// ------------------------------------------------------------------
{
region: 'east',
},
// ------------------------------------------------------------------
{
region: 'south',
}]
});
});
Sorry there's so much code, but ExtJS makes me scared to touch anything that's working.
just add
bbar: [
// YOUR ITEMS HERE EXAMPLE FOLLOWING
{
xtype: 'button',
text: 'test Button',
handler: function(btn){
alert('Button Click');
}
}
]
to your config (where xtype === panel)
it would look like something like this :
{
region: "north",
id : "toolbar-area",
xtype: 'panel',
html: [ "<div id=\"html-header\">",
"<div id=\"council-logo\"></div>",
"<ul id=\"ancillary-menu\">",
"<li>Logout</li>",
"<li>Gazeteer Home</li>",
"<li>Hello Rachel</li>",
"</ul>",
"<img id=\"inteligent-logo\" src=\"applied-images/logos/inteligent.gif\">",
"</div>"
],
bbar: [
{
xtype: 'button',
text: 'test Button',
handler: function(btn) {
alert('Button Click');
}
}
],
height: 100
}
#Nexum's answer is correct, but to add a little more context, every region of a BorderLayout is actually an Ext.Panel, so any config that you can use for panels can be applied to a region. For toolbars, look at the Ext.Panel docs for tbar (top toolbar) and bbar (bottom toolbar).
On an unrelated note, I see that you are manually creating a bunch of HTML in code for the north panel contents. This is a recipe for pain. It's much easier for nontrivial markup to add it in the page as standard HTML with a surrounding div. Give the div an id and a class of x-hidden, then pull it in using the contentEl Panel config.
ExtJS has a built-in toolbar.
You can see an example here:
Toolbar with menus