Related
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
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%'
}]
});
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 am putting a vbox layout inside hbox layout. But the vbox isn't working properly. Here is the code:
Code:
var panel = new Ext.Panel({
fullscreen : true,
layout : {
type : 'hbox',
align : 'stretch'
},
items : [{
width : 50,
layout : {
type : 'vbox',
align : 'stretch'
},
items : [{
flex : 1,
html : '1st'
}, {
height : 50,
html : '2nd'
}]
}, {
flex : 1,
html : 'Large'
}]
});
Here, the 2 panels of vbox is coming over one another. If I just create the vbox only, it works perfectly. Here is the code:
Code:
var panel = new Ext.Panel({
fullscreen : true,
layout : {
type : 'vbox',
align : 'stretch'
},
items : [{
flex : 1,
html : '1st'
}, {
height : 50,
html : '2nd'
}]
});
Am I doing anything wrong?
EDIT:
Somehow, I find, if I swap the vbox items this way, then it works:
...
layout : {
type : 'vbox',
align : 'stretch'
},
items : [{
height : 50,
html : '2nd'
}, {
flex : 1,
html : '1st'
}]
....
However, I want the smaller item at the bottom.
In your hbox, the vbox itself is missing a flex or height config...
var panel = new Ext.Panel({
fullscreen: true,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
width: 50,
flex:1, // this needs to be flexy as well
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
flex: 1,
html: '1st'
}, {
height: 50,
html: '2nd'
}]
}, {
flex: 1,
html: 'Large'
}]
});
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