If I use Border layout and add a label to one of the regions, I then want to add some spacing around it so that it is not pushed up against the border. However no matter what I use (margin or padding) it always exposes some ugly gray/blue areas :
I do not expect this, because the label is sitting on a panel. I don't understand how transparancy comes into the equation.
I am simply adding my label like this :
var createPanel = Ext.create('Ext.panel.Panel', {
border: false,
region: 'center',
layout: {
type: 'border',
pack: 'start'
},
items: [
{
xtype: 'panel',
border: false,
region: 'center',
text: 'Create New With Selected Packets',
items: {
margin: 30, //or padding!!!!
xtype: 'label',
text: 'Create New With Selected Packets'
}
},
{
xtype: 'panel',
border: false,
region: 'east',
items: {
xtype: 'button',
margin: '5 5 5 5',
text: 'Create New '
}
}
]
});
jsfiddle here
You can wrap the label with a container, like:
{
xtype: 'panel',
border: false,
region: 'center',
text: 'Create New With Selected Packets',
items: {
xtype: 'container',
padding: 30,
items: {
xtype: 'label',
text: 'Create New With Selected Packets'
}
}
}
Working example: http://jsfiddle.net/vc8L43Lw/
Related
I have the following application that contains two panels. The height of the first one set to 75% of the screen area and the second panel set to take up the bottom 25% of the screen. I have been working on this for a couple hours and I the button contained in the second panel that is supposed to be taking up the bottom 25% of the screen always shows up at the top. I am new to Sencha and JS any help would be appreciated:
Ext.application({
name : 'MyApp',
launch : function()
{
Ext.onReady(function ()
{
var panel = Ext.create('Ext.panel.Panel', {
title: 'Test 2',
autoScroll: true,
forceFit: true,
layout: { type: 'vbox', align: 'fit', padding: 5},
items:
[
{ xtype: 'panel', height: '75%', layout: { type: 'vbox', align: 'fit', padding: 5}},
{ xtype: 'panel', height: '25%', layout: { type: 'vbox', align: 'fit', padding: 5}, items:[ { itemId: 'btnNewMission', xtype: 'button', height: 25, width: 125, text: 'New Mission' } ]}
]
});
var viewport = Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [panel]
});
});
}
});
You can try use the flex property for the panels, and instead of using percentages, set the panel 1 to fit to entire height and the panel 2 to a specific height, just like the following code:
layout: { type: 'vbox', align: 'stretch', padding: 5},
items:
[
{ xtype: 'panel', flex: 1, layout: { type: 'vbox', align: 'fit', padding: 5}},
{ xtype: 'panel', height: 100, layout: { type: 'vbox', align: 'fit', padding: 5},
items:[
{ itemId: 'btnNewMission', xtype: 'button', height: 25, width: 125, text: 'New Mission' }
]}
]
You can check the following example: http://jsfiddle.net/rx7Lfo55/
I am new to extjs.I am designing a pop up window which basically populates some data from the server.I have used the layout as 'fit' and I am using labels for displaying the data.Here is my code
win = new Ext.window.Window({
title: 'Data point details',
layout: 'fit',
width: 'auto',
height: 500,
modal: false,
closeAction: 'destroy',
layout: {
type: 'table',
// The total column count must be specified here
columns: 2,
rows :10 ,
tdAttrs:
{
style:
{
margin: '160px',
valign: 'top' ,
padding: '8px' ,
'font-size' : '12px'
}
}
},
defaults: {
bodyPadding: 10 ,
},
items: [
{
xtype: 'label',
text: 'Element : ' ,
style:
{
'font-weight':'bold',
'labelAlign' : 'right',
}
},
{
xtype: 'label',
text: elementname
},
{
xtype: 'label',
text: 'Expression: ' ,
style:
{
'font-weight':'bold',
}
},
{
xtype: 'label',
text: s.expressionName
},
{
xtype: 'label',
text: 'Profile: ' ,
style:
{
'font-weight':'bold',
}
},
{
xtype: 'label',
text: s.profileName
},
{
xtype: 'label',
text: 'Time:',
style:
{
'font-weight':'bold',
}
},
{
xtype: 'label',
text: Highcharts.dateFormat('%a, %b %e, %Y, %I:%M %p ', this.x)
},
{
xtype: 'label',
text: 'Value:',
style:
{
'font-weight':'bold',
}
},
{
xtype: 'label',
text: yvalue ,
},
{
xtype: 'box',
style : {
padding: '0px',
height: '90px',
//background : 'white',
},
html: new Ext.XTemplate("<div style=\"height:150px;\">{value}")
.apply({value: me.htmldiv.innerHTML })
},
]
});
win.show();
I want the columns which appear on the left hand side to have their text on the right,but the text is always towards the left for all the cells it seems .Likw for example the label which has the text 'Element' appears to be on the left.I have used labelalign but it does not work.Kindly give suggestions
Just few suggestions until i get to the solution:
You have reduntant comas all over the place. Some older browsers will fail on such thing. Example:
{ 'font-weight':'bold',<<-- here }
win = new Ext.window.Window(... - this is global variable declaration - probably worst thing you can do in JavaScript and way to hell. Use var keyword to declare local variables like so: var win = new Ext.window.Window(...
labelAlign is the way to align label text to the right BUT a) you are applying it through style property (styles which Ext apply to HTML element created by component) and b) labelAlign is property of Labelable components and as strange as it might sound, Label itself is not Labelable. Just don't use Label like this, see below...
Duplicate layout property on Window
When you are asking for help and posting code as part of the question, edit your code so that it doesn't contain exteral dependencies - can be copied and run immediately. It took me nearly half a hour to make your sample working
As i said before, you are using Lable component in the way it is not suppose to be used. Labels are not created directly but by specifying label properties on components implementing Labelable mixin (Fields in most cases). It might sound complicated but is not, take a look at the code:
var wnd = new Ext.window.Window({
title: 'Data point details',
width: 400,
height: 200,
modal: false,
closeAction: 'destroy',
layout: {
type: 'anchor',
align: 'stretch'
},
bodyPadding: 10,
defaults: {
labelAlign: 'right',
labelStyle: {
'font-weight': 'bold'
},
labelWidth: 100
},
items: [{
xtype: 'displayfield',
fieldLabel: 'Element',
value: 'elementname'
}, {
xtype: 'displayfield',
fieldLabel: 'Expression',
value: 's.expressionName' // s.expressionName
}, {
xtype: 'displayfield',
fieldLabel: 'Profile',
value: 's.profileName' // s.profileName
}, {
xtype: 'displayfield',
fieldLabel: 'Time',
value: 'time'
}, {
xtype: 'displayfield',
fieldLabel: 'Value',
value: 'yvalue' // yvalue
}]
});
wnd.show();
You can try it and play with it here. My final suggestion would be to take a look at the official ExtJS documentation and guides which are pretty good - here for example are samples on making forms...
Here is an approach to use css styles inline, not in a separate class. This could be useful if you get css values from your javascript constants:
this.myLabel = Ext.create('Ext.form.Label', {
text: 'My Label Name',
style: {
'text-align': this.defaults.myLabelAlign, // The javascript constant.
'font-size': this.defaults.myLabelStyle // The javascript constant.
}
});
Question is simple.
I have a home screen where the north region has to display two textfields and one button to enable user to connect.
I have this code.
Ext.create('Ext.container.Viewport', {
layout: 'anchor',
id: 'homescreen',
items: [
{
layout: 'border',
border: false,
height: 160,
anchor: '100%',
items: [
{
region: 'west',
// some codes here
},
{
xtype: 'container',
width: '70%',
region: 'east',
layout:
{
type: 'table',
columns: 1,
tdAttrs:
{
style: 'padding: 5px 15px 5px 15px;',
align: 'middle',
},
defaults:
{
width: 150,
textAlign: 'right'
},
},
items: [
{
xtype: 'textfield',
//fieldLabel: 'login',
labelWidth:50,
emptyText: 'Utilisateur',
margin: '18 0 0 0',
},
{
xtype: 'textfield',
//fieldLabel: 'mot de passe',
labelWidth:100,
emptyText: 'Mot de passe',
},
{
xtype: 'button',
html: 'Connexion',
scale: 'large',
},
]
}]
},
As you can see, all the textfields and the button are aligned vertically on one column.
But problem is that they are displayed on the left side of the container. How can I display them on the right (without using css) ?
= align them horizontally.
VBox layout would probably be more appropriated to your use case. It stacks component vertically and lets you control horizontal and vertical alignment of the resulting block.
Try the following layout, for example:
layout: {
type: 'vbox'
,align: 'center' // or 'right'
,pack: 'center' // controls vertical align
,defaultMargins: 5
}
In my interface I use the following structure:
xtype: 'container',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
xtype: 'fieldset',
flex: 2,
layout: {
type: 'vbox',
align: 'stretch'
},
margin: '0 5 0 0',
padding: '10',
items: [
{
xtype: 'container',
flex: 1,
layout: 'hbox',
items: [
{
xtype: 'combo',
flex: 1,
margin: '0 5 0 0',
name: 'deviceSelect',
...
},
{
xtype: 'button',
...
},
{
xtype: 'button',
...
}
]
},
{
xtype: 'box',
flex: 1,
name: 'deviceMessage'
...
}
]
},
{
...
},
{
...
}
Combo 'deviceSelect' should take entire width of the container except of the size of the two buttons and under it should be text. At the moment everything is working as it should, with one exception - the text "pinned" to the top of its 'deviceMessage' container. How can place it in the middle (vertically) of the container? I tried style: 'vertical-align: middle;', but it doesnt work (probably because ext add top: 24px).
I think the code is not optimal. Any comments are welcome.
Something like this: http://jsfiddle.net/laurenzonneveld/YLrzC/?
The part you need is the layout part:
xtype: 'container',
name: 'deviceMessage',
layout: {
// Centers your inner panel with the HTML
type: 'vbox',
align: 'center',
pack: 'center'
},
//...
items: {
xtype: 'container',
html: 'sadfasdf<br>safasdfasf'
}
I have a panel containing two children panels.the parent panel uses "border" layout, while two children panels use "form" and "column" layouts respectively. now How can I make these two children panels resize accordingly when window resizes, i.e., make sure the size ratio of these two panels is constant.
thanks!
my codes are as follows:
itemRts = {
xtype: 'panel',
title: 'Route',
region: 'north',
autoHeight: true,
layout: 'form',
width: 294,
bodyStyle: 'padding:10px 12px 10px',
id: 'ROUTE_PANEL',
el: 'Route_Setup',
items: [
{
xtype: 'button',
text: 'Go',
anchor: '0',
id: 'GO_BTN'
}]
};
itemEvts = {
xtype: 'panel',
title: 'Events',
region: 'center',
layout: 'column',
tpl: 'Please put events here.',
//bodyStyle: 'padding:10px 12px 10px',
border: false,
hideBorders: true,
id: 'EVENT_PANEL',
el: 'Event_Legend',
autoScroll: true
};
newView = new Ext.Viewport({
layout: "border",
items: [
{
xtype: 'panel',
margins: '10 0 10 10',
region: 'center',
width: 200,
layout: 'border',
split: true,
boxMaxWidth: 280,
minWidth: 280,
id: 'RTS_EVTS_REGION',
collapseMode: 'mini',
items: [
itemRts,
itemEvts]
}]
});
how to modify above codes to make it work as what I want?
thanks again!
You can set a resize event for container panel and call "dolayout" method of their children in case of resize :
newView = new Ext.Viewport({
layout: "border",
items: [
{
xtype: 'panel',
margins: '10 0 10 10',
region: 'center',
width: 200,
layout: 'border',
split: true,
boxMaxWidth: 280,
minWidth: 280,
id: 'RTS_EVTS_REGION',
collapseMode: 'mini',
items: [itemRts, itemEvts],
listeners: {
'resize': function () {
itemRts.doLayout();
itemEvts.doLayout();
}
}
}]
});
for your main container, i suggest hbox and/or vbox layouts. those layouts are what you are looking for. here a sample:
var testPanel = new Ext.Viewport( {
id : 'vp_test',
layout : 'hbox',
align : 'stretch',
items : [
{
id : 'pnl_child_1',
title : 'Test 1',
flex : 2
},
{
id : 'pnl_child_2',
title : 'Test 2',
flex : 3,
layout : 'vbox',
align : 'stretch',
items : [
{
id : 'pnl_child_3',
title : 'Test 3',
flex : 1
},
{
id : 'pnl_child_4',
title : 'Test 4',
flex : 1
}
]
},
]
} );
you can refer to documentation, viewport, hbox, vbox
itemRts = {
xtype: 'panel',
title: 'Route',
// region: 'north', <<< we don't need this anymore
flex: 1, // this means that this container has 1 flexible share
// autoHeight: true, <<< this will ruin all layout
layout: 'form',
// width: 294, <<< we don't need this anymore
bodyStyle: 'padding:10px 12px 10px',
id: 'ROUTE_PANEL',
el:'Route_Setup',
items: [
{
xtype:'button',
text:'Go',
anchor:'0',
id:'GO_BTN'
}
]
};
itemEvts = {
xtype: 'panel',
title: 'Events',
// region: 'center', <<< we don't need this anymore
flex: 1, // this means that this container has 1 flexible share
layout: 'column',
tpl: 'Please put events here.', // <<<< if you're not going to use xTemplates you should use html property instead
//bodyStyle: 'padding:10px 12px 10px',
border: false,
hideBorders: true,
id: 'EVENT_PANEL',
el : 'Event_Legend',
autoScroll: true
};
newView = new Ext.Viewport({
//// if you have only one child component you can use fit layout for viewport.
//// and consider removing that only child. use viewport as main container.
layout : "border",
items: [
{
xtype: 'panel',
margins: '10 0 10 10',
region: 'center',
// width: 200, <<<< width has no effect on center region
/// we'll use hbox with align stretch
layout: 'hbox',
align: 'stretch',
// split: true, <<<< split has no effect on center region
// boxMaxWidth: 280, <<<< no effect
// minWidth: 280, <<<< no effect
id: 'RTS_EVTS_REGION',
// collapseMode: 'mini', <<<< collapse properties has no effect on center region
items: [
itemRts,
itemEvts
]
}
]
});