i had made a panel with number of buttons in it like this,
Ext.define('BeLocal.view.Test', {
extend: 'Ext.Panel',
config: {
fullScreen: true,
height: 482,
width: 324,
scrollable: 'vertical',
items: [
{
xtype: 'button',
text: 'MyButton1'
},
{
xtype: 'button',
top: '30%',
text: 'MyButton2'
},
{
xtype: 'button',
top: '50%',
text: 'MyButton3'
},
{
xtype: 'button',
top: '96%',
text: 'MyButton4'
},
{
xtype: 'button',
top: '110%',
text: 'MyButton5'
}
]
}
});
i can show only 3 buttons now.
i want this panel scrollable so that i can show all the buttons by scrolling it down, i had set property scrollable: 'vertical' , but it doesn't work.
When i remove position of all buttons like top:50% scroll works properly, but i want all the buttons on proper position.
how can i fix this problem ?
As per the documentation:
http://docs.sencha.com/touch/2-1/#!/api/Ext.Button-cfg-top
top : Number/String
The absolute top position of this Component; must be a valid CSS length value, e.g: 300, 100px, 30%, etc. Explicitly setting this value will make this Component become 'floating', which means its layout will no longer be affected by the Container that it resides in.
Try setting style config:
items: [{
xtype: 'button',
text: 'MyButton1'
},{
xtype: 'button',
style:'margin-top: 10%;',
text: 'MyButton2'
},{
xtype: 'button',
style:'margin-top: 50%;',
text: 'MyButton3'
},{
xtype: 'button',
style:'margin-top: 96%;',
text: 'MyButton4'
},{
xtype: 'button',
style:'margin-top: 110%;',
text: 'MyButton5'
}]
Seems to works for me.
Related
I am looking to get the "fieldLabel:" property of the textfield/checkbox to take priority over the xtype, in terms of layout. As you can see in the screen shot below, the text appears squished.
Here's a snippet of the code from my view:
bodyPadding: 30,
xtype: 'fieldset',
title: 'Account',
margin: '10 10 10 10',
items: [{
xtype: 'form',
layout: 'form',
items: [{
xtype: 'checkboxfield',
fieldLabel: 'Has registered for gift aid:',
name: 'giftAidFlag',
margin: '0 0 8 0',
listeners: {
change: function(cb, checked) {
Ext.getCmp('manageGiftAidPayers').setDisabled(!checked)
}
}
}, {
xtype: 'button',
anchor: '100%',
text: 'Manage gift aid payers...',
style: "width : 495px;",
margin: '10 0 8 0',
disabled: true,
id: 'manageGiftAidPayers'
}]
}]
So, essentially, the button enables once the box is ticked.
I need this to look a little more professional by the text taking priority, and spanning it's full width before the checkbox appears - any ideas? Not interested in a column layout. Is this going to be possible? Thanks in advance.
You are looking for config labelWidth in the checkbox field.
xtype: 'fieldset',
title: 'My Fields',
items: [
{
xtype: 'checkboxfield',
fieldLabel: 'Has registered for gift aid:',
labelWidth: 250,
boxLabel: 'Box Label'
},
{
xtype: 'button',
width: 495,
text: 'MyButton'
}
]
Is it possible to position some of my items in my panel to the left, and the last items all the way to the right? So that there is an empty space in the middle. Right now I am using hbox layout, and put an empty container in the middle and flex it like this:
items: [{
xtype: 'container',
layout: 'hbox',
items: [{
xtype: 'label',
text: 'Filter on vehicle'
},{
xtype:'textfield'
},{
xtype: 'button',
text: '...'
},{
xtype: 'container',
flex:1
},{
xtype: 'button',
text: 'New'
},{
xtype:'button',
text: 'Edit'
},{
xtype: 'button',
text: 'Delete'
}]
}]
Any better way to do this?
Don't know if it is a better solution or not.But DOM wise it will be lighter.
We can use tbfill xtype instead of inserting a container.
{
xtype: 'container',
layout: 'border',
items: [{
xtype: 'label',
text: 'Filter on vehicle',
},{
xtype:'textfield',
},{
xtype: 'button',
text: '...',
},
{
xtype:'tbfill'
},{
xtype: 'button',
text: 'New',
},{
xtype:'button',
text: 'Edit',
},{
xtype: 'button',
text: 'Delete',
}],
}
Working Example
If you want to use elements like button, textfield, label, combobox... You can use Ext.toolbar.Toolbar xtype: toolbar. So if you need to put items to the right you can easy do this with '->', also you can use '|' to put vertical separator to the tollbar.
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
items: [
{
xtype: 'toolbar',
layout: 'hbox',
items: [
{
xtype: 'label',
text: 'Filter on vehicle'
},
{
xtype: 'textfield'
},
{
xtype: 'button',
text: '...'
},
{
xtype: 'button',
text: 'New'
},
'->',
{
xtype: 'button',
text: 'Edit'
},
{
xtype: 'button',
text: 'Delete'
}
]
}
]
});
What you're doing is fine, and arguably the best solution with 1 minor suggestion. Use 'component' instead of 'container' as that will be slightly lighter.
The previous answers of 'tbfill' and '->' are actually the same thing as what you're doing. '->' is a shorthand for 'tbfill' and 'tbfill' is literally a flex:1 component.
All 3 solutions should work fine but I like using a flex:1 component because using tbfill depends on knowing an implementation detail of toolbar, namely that is uses hbox. Sencha is free to change how toolbar and tfill work in a future release, at which point your code (if it uses tbfill) is broken.
I have an ExtJS 4.2.1 accordion layout with three panels.
When the app is first launched, the first panel is open and the 2nd/3rd are closed.
I can open and close the 2nd and 3rd, but I can never close the first panel.
Ext.define('MyAccordion', {
extend: 'Ext.container.Container',
alias: 'widget.myAccordion',
padding: 0,
margin: 0,
width: 200,
layout: {
type: 'accordion',
align: 'stretch',
animate: true,
hideCollapseTool: true
},
items: [{
xtype: 'panel',
title: 'Test Volumes',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'label',
text: 'volume one'
},{
xtype: 'label',
text: 'volume two'
},{
xtype: 'label',
text: 'volume three'
}]
}, {
xtype: 'panel',
title: 'Production Volumes',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'label',
text: 'volume one'
},{
xtype: 'label',
text: 'volume two'
},{
xtype: 'label',
text: 'volume three'
}]
}, {
xtype: 'panel',
title: 'Extra Volumes',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'label',
text: 'volume one'
},{
xtype: 'label',
text: 'volume two'
},{
xtype: 'label',
text: 'volume three'
}]
}]
});
In the following code leveraged from the 4.2.1 examples layout browser example, if the first thing you do after launching the app is click the first header, is does close, but then re-open it and it never closes again:
Ext.onReady(function() {
Ext.create('Ext.container.Viewport', {
renderTo: Ext.getBody(),
items: [{
xtype: 'panel',
title: 'Accordion Layout',
layout: 'accordion',
defaults: {bodyStyle: 'padding:15px'},
items: [{
title: 'Introduction',
tools: [{type:'gear'},{type:'refresh'}],
html: '<p>Here is some accordion content. Click on one of the other bars below for more.</p>'
},{
title: 'Basic Content',
html: '<br /><br /><p>More content. Open the third panel for a customized look and feel example.</p>',
items: {
xtype: 'button',
text: 'Show Next Panel',
handler: function(){
Ext.getCmp('acc-custom').expand(true);
}
}
},{
id: 'acc-custom',
title: 'Custom Panel Look and Feel',
cls: 'custom-accordion', // look in layout-browser.css to see the CSS rules for this class
html: '<p>Here is an example of how easy it is to completely customize the look and feel of an individual panel simply by adding a CSS class in the config.</p>'
}]
}]
});
});
Even more strange, if I do show the collapse/expand tool, the tool for the first panel stops working.
Amazing but true, but this happens because the accordion layout container does not have a height set.
Because I can't have a fixed height, this fixes the issue: flex: 1
But this seems really strange, because why should not having a height (or flex, etc) break closing the first container? Just seems weird.
An easy solution would be to add _isLayoutRoot: true to panel with accordion layout.
Ext.define('myAccordion',{
extend: 'Ext.Panel',
alias: 'widget.myAccordion',
layout: 'accordion',
_isLayoutRoot: true,
items: myItems
});
Example: http://jsfiddle.net/38mx9hs9/1/
Also it seems that this issue is fixed in 4.2.2:
https://www.sencha.com/forum/showthread.php?267163-4-2-1-Accordion-Layout-in-Panel&p=1169533#post1169533
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.
}
});
I have a container with a few different items stacked in. I also would like to have two title bars inside the container BUT with height reduced to 10 points. I have tried to reduce the size using setHeight() with a lesser number but I can't seem to achieve that. Am I missing something obvious?
Is there a way I can reduce the height of a toolbar/titlebar in Sencha Touch? Help!
UPDATE: Here is the code I use for a toolbar...
Ext.define('MyApp.view.CookingSteps', {
extend: 'Ext.Container',
alias: 'widget.CookingSteps',
config: {
height: '',
html: '',
id: 'CookingSteps',
itemId: 'CookingSteps',
style: '',
layout: {
type: 'vbox'
},
items: [
{
xtype: 'toolbar',
docked: 'top',
height: 50,
html: '<b><center>AdBanner Goes Here',
style: 'background: gray;',
styleHtmlContent: true
},
{
xtype: 'container'
},
{
xtype: 'fieldset',
title: '',
items: [
{
xtype: 'textfield',
label: '',
placeHolder: 'Username'
},
{
xtype: 'textfield',
label: '',
placeHolder: 'Passphrase'
}
]
},
{
xtype: 'toolbar',
docked: 'top',
height: 20,
minHeight: '20',
title: 'Login'
},
{
xtype: 'container',
items: [
{
xtype: 'button',
centered: true,
ui: 'confirm',
width: 283,
text: 'Go Ahead :)'
}
]
}
]
}
});
I want the toolbar with title 'Login' with a reduce height.. Any help would be greatly appreciated. Thank you in advance. :)
If you need to adjust toolbar size use minHeight option with units in toolbar config. Here is a toolbar example with a 2x of current font size height.
{
xtype: 'toolbar',
docked: 'top',
minHeight: '2em',
}