Hi i want to align the browse button first and then text area. How to change browse button alignment.
Like,
If you just want to have a button right next to a textfield (textarea?) and after that another button you can use a fieldcontainer.
https://docs.sencha.com/extjs/7.0.0/classic/Ext.form.FieldContainer.html
Here an example:
{
xtype: 'fieldcontainer',
// The body area will contain three text fields, arranged
// horizontally, separated by draggable splitters.
layout: 'hbox',
items: [{
xtype: 'button',
text: 'Load from CSV'
}, {
xtype: 'textfield',
flex: 1,
name: 'file',
allowBlank: false // requires a non-empty value
}, {
xtype: 'button',
text: 'Load',
margin: '0 0 0 30'
}]
}
And here a working sencha fiddle example
https://fiddle.sencha.com/#view/editor&fiddle/31je
I hope this helps
Related
How to get following layout in extjs 4.1.3??
I want checkbox to attach next to textbox.
Any Idea?
You are looking for a FieldContainer with an hbox layout. See the docs here: http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.form.FieldContainer
{
xtype: 'fieldcontainer',
fieldLabel: 'lamp failed',
layout: 'hbox',
items: [{
xtype: 'textfield'
}, {
xtype: 'checkbox'
}]
}
In the simple example of a Panel within a ViewPort, the panel will not have scrollbars for the text overflow because the default for autoScroll is false for a panel.
Here is a working example: http://jsfiddle.net/rqZ4y/ (Thanks to CD..)
Here is a slightly more involved example, featuring a GridPanel (which has autoScroll defaulting to true, so it does not need to be set explicitly!)
Ext.application({
launch: function () {
Ext.create("Ext.Viewport", {
// layout: "fit",
items: [
{
html: "Hello!"
},
{
xtype: "grid",
title: 'Simpsons Contacts',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
]
}
]
});
}
});
Working example: http://jsfiddle.net/gXsPk/
In this case, the grid does not have scrollbars.
I have disabled layout: "fit" in order to get both the panels to show. If I specify layout: "fit" then that causes the "Hello!" panel to take up all of the available space, and the grid is not visible at all.
If I remove the "Hello!" panel, and re-introduce the layout: "fit" option, then I get a grid with scrollbars!
Working example: http://jsfiddle.net/VBAyS/
What am I doing wrong here?!
I'm using Ext JS 4.1.1a
The default for autoScroll is false.
Set autoScroll: true to use overflow:'auto' on the components layout element and show scroll bars automatically when necessary.
Working example: http://jsfiddle.net/rqZ4y/
EDIT:
Using vbox layout should solve your issue.
I changed the layout to:
layout: { type: 'vbox', align: 'stretch' }
Next, I've added flex: 1 to the grid.
Working example: http://jsfiddle.net/gXsPk/1/
I'm having trouble with the layout of a FormPanel in Sencha Touch 2. See example app below.
There should be a panel with 'vbox' layout containing 3 items: a piece of text, a FormPanel, and another piece of text. However the FormPanel seems to get size 0x0 and not show up at all, so I only see the two texts.
I found 2 things that get the form panel to show up:
Setting layout: 'fit' on the outer panel. But then everything overlaps. fit isn't really designed for more than one item, so this isn't a solution.
Settings explicit width and height config on the FormPanel. But I want it to layout itself and not have to specify this in pixels. Why would I need to do this?
I've tried a bunch of other random params, but I'm just shooting in the dark. So what am I missing?
Ext.application({
name: 'TestApp',
launch: function() {
return Ext.Viewport.add({
xtype: 'panel',
layout: {
type: 'vbox',
align: 'center'
},
// layout: 'fit' // This shows the form, but overlaps all 3 panel items.
items: [
{ html: 'Fill in the form below' },
{
xtype: 'formpanel',
// width: 300, // These fixed sizes reveal the form, but why?
// height: 300, // These fixed sizes reveal the form, but why?
items: [
{
xtype: 'fieldset',
items: [
{
xtype: 'textfield',
name: 'username',
label: 'Username'
}
]
}
]
},
{ html: 'Fill in the form above' }
]
});
}
});
Set scrollable property of your formpanel object to false, that will solve the problem.
{
xtype: 'formpanel',
scrollable: false,
items: [
{
xtype: 'fieldset',
items: [
{
xtype: 'textfield',
name: 'username',
label: 'Username'
}
]
}
]
},
Update. Please note, that in newer releases of Sencha (2.3) you will have to use scrollable: null, as noticed by Nathan Do in his comment to this answer. But since it's not documented feature in can be changed in the future.
TracKer's answer is correct, but he doesn't provide an explanation for why.
Here's my take at why you need scrollable:false.. If the formpanel IS scrollable, then you need to tell Sencha how big to make it (and within that size the user can scroll around it). However, if it's NOT scrollable, it will take up the entire space it's allowed, and to get to be bigger the user can scroll around to access it.
A bit confusing =\
I kind of switched around your code a little but here's what I came up with:
Ext.application({
name : 'TestApp',
requires: ['Ext.form.Panel', 'Ext.form.FieldSet'],
launch : function() {
var paneltest = Ext.create('Ext.Panel', {
fullscreen: true,
layout: 'vbox',
// layout: 'fit' // This shows the form, but overlaps all 3 panel items.
items : [
{
html : 'Fill in the form below',
flex: 1
},
{
xtype: 'formpanel',
flex: 1,
items : [
{
xtype : 'fieldset',
items : [{
xtype : 'textfield',
name : 'username',
label : 'Username'
}]
}
]
},
{
html : 'Fill in the form above',
flex: 1
}
]
});
Ext.Viewport.add(paneltest);
}
});
My main change to your code was that I removed the
layout: {
type: 'vbox',
align: 'center'
}
and I changed it to
layout: 'vbox'
I also added a flex to your elements. This is the proper way to use the vbox and hbox layouts. I'm not totally sure why this works, however it does look like 'center' is not a valid value you can give the align attribute. I think you are looking for 'middle'. And if that doesn't give you what you are wanting maybe try to add a class or id to your panel and control the alignment with css. Hope this helps.
When I create a toolbar like below the title is misplaced to the right of the last button, any ideas how to fix it?
{
xtype: 'toolbar',
docked: 'top',
title: 'Chat',
items: [{
xtype: 'button',
text: 'Places',
ui: 'back',
id: 'backToPlaces'
},
{
xtype: 'spacer'
},
{
xtype: 'button',
text: 'People',
ui: 'forward',
id: 'toProfiles'
}
I was also fighting with the toolbar. Then I discovered the navigationbar.
The title is in the center. With a button aligned left and right. (see align property)
{
docked: 'top',
xtype: 'navigationbar',
title: 'Chat',
items: [
{
xtype: 'button',
ui: 'back',
action: 'back',
text:'BACK',
itemId: 'backButton'
},
{
xtype: 'button',
ui: 'decline',
action: 'cancel',
text:'Cancel',
itemId: 'cancelButton',
align : 'right'
}
]
}
just after answered this, i found the "centered" attribute and looked at creation of title element of sencha, so just forget this above and use in your config:
var myToolbar = new Ext.Toolbar({
docked : 'top',
title: {
title: 'my Title',
centered: true
},
items : []
});
In Sencha 2 there is no "special" title element, it is created as simple element in the "items". So i future, you can just add it at right place direcly by placing the config to your docked bar:
var myToolbar = new Ext.Toolbar({
docked : 'top',
items : [{
xtype: 'spacer',
},{
xtype: 'title',
title : 'Hello World'
},{
xtype: 'spacer',
}]
});
Only with spacer it is in the middle.
It is clearly stated in the docs that NavigationBar is a private class for internal use by the framework http://docs.sencha.com/touch/2-0/#!/api/Ext.navigation.Bar and the centered attribute metioned by anj does not work as expected (at least in the latest release).
According to this post http://www.sencha.com/forum/showthread.php?161082-PR3-Toolbar-title-position-broken-when-spacers-control-button-positioning&p=691928 it is simply a bug that the title is not centered and we should wait for next release. In the meantime you might use navigationbar if you need to.
If you want to leverage something similar to how titles in Toolbar behaves of Ext.navigation.Bar. see the Ext.TitleBar http://docs.sencha.com/touch/2-0/#!/api/Ext.TitleBar
This class handles things like long titles for you by automatically adding ellipses and the title is always centered horizontally.
There is no longer a NavigationBar component which is public. It is simply used internally by NavigationView. You should never use this.
Instead, you should use Ext.TitleBar. This allows you to center the title config and also use the align property on items (normally buttons) to align them to the left or right.
It also has built in support when the title is too long, or any items are too wide. It will automatically limit the length of all items to a certain width, and add ellipse to the title if needed.
Here is a simple example:
var titleBar = Ext.create('Ext.TitleBar', {
docked: 'top',
title: 'Navigation',
items: [
{
iconCls: 'add',
iconMask: true,
align: 'left'
},
{
iconCls: 'home',
iconMask: true,
align: 'right'
}
]
});
Ext.Viewport.add(titleBar);
I jsut can't set up two things side by side correctly. Help me, please
Erhm, be a little more specific as to what you want.
You can always add two items next to each other by adding a wrapper panel with a hbox layout:
{
xtype: 'panel',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'panel',
html: 'left',
width: 100
},{
xtype: 'sliderfield',
name: 'myslider',
flex: 1
}]
}
hope it helps