Using ExtJS 4.2.1 I'm trying to add a 'composite' control to my Form Panel that consists of a textfield and a button next to it (which will invoke a lookup dialog).
I've implemented this as follows:
Ext.onReady(function () {
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
defaults:{
anchor:'100%',
border: 0
},
items: [{
xtype: 'textfield',
fieldLabel: 'foo'
}, {
xtype: 'panel',
layout:'hbox',
items: [{
xtype: 'textfield',
fieldLabel: 'bar'
}, {
text: '...',
xtype: 'button'
}]
}]
});
});
The problem I have is in terms of Layout. I want the 'bar' textfield to shrink/grow to fill the available width of the form, but it's currently maxing out at a fixed width, even when the 'foo' textfield extends correctly across the width of the form
Please advise the correct layout settings?
jsFiddle
Just add flex:1 to your bar text box config. As its being managed by a hbox layout this is required to tell the item to fill up as much space (width) as possible
Related
I have a file select field component and a label that I want it to appear next to each other (label to the right). They are both populated inside a function. Is not the label of the field, just a text I want it to warn about file size on the upload field. This is the code:
this.fileUploadField = Ext.widget('filefield',
{
fieldLabel: 'Select a file:',
name:'file',
width: 200,
buttonText: 'Button' });
items.push(
this.fileUploadField,
{
xtype: 'label',
style: 'color:red',
text: 'I'm the label that wants to appear on the right of the file upload field',
name:'fileSizeLimit'
}
);
I would put them into some container and than set layout as hbox.
You can use for example
fieldcontainer
container
fieldset
You can use anything where you can set the layout. You can use the flex config to position your fields correctly.
So the code could look something like this:
xtype: 'fieldset',
title: 'My Fields',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'filefield',
flex: 3,
fieldLabel: 'Select file:'
}, {
xtype: 'label',
style: 'color:red',
flex: 2,
name: 'fileSizeLimit',
text: 'I\'m the label that wants to appear on the right of the file upload field'
}]
Check out this fiddle:
https://fiddle.sencha.com/#fiddle/1ju5
I want to create a text box for a single label in split manner using ExtJS. Actually my requirement is a label for a telephone number, which needs a text box splitted into 3 boxes separated by "-" (hyphen). It should be as follows.
Telephone Number: 770-268-3320
consider each bracket as a text box. Hope you understood what my requirement is... Thanks in advance
Ext.onReady(function(){
Ext.create('Ext.form.Panel', {
//title: 'Simple Form',
bodyPadding: 5,
width: 400,
// The form will submit an AJAX request to this URL when submitted
url: 'save-form.php',
// Fields will be arranged vertically, stretched to full width
layout: 'anchor',
defaults: {
anchor: '100%'
},
// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'PhoneNumber',
name: 'phoneNumber',
allowBlank: false
},{
fieldLabel: 'CustomerName',
name: 'custCLLI',
allowBlank: false
}],
// Reset and Submit buttons
renderTo: Ext.getBody()
});
});
Or you can check here: http://jsfiddle.net/jA8Qy/5/
See this.
Hope this addresses your requirement.
Have a pretty common task to do where I need a search form above a list to display the results, the problem is that the list is not showing the results, the store and the proxy work correctly because when I use firebug to locate the list items the list always have height of 0px.
I have already searched and the common ways to workaround this is to use a fit layout, but using that on the parent panel makes all look small as if the width used was 10px.
I cant set a fixed height because I want the list to fill the remaining space, and neither the flex option cause that stretches the search form when I want that to use the default size of the buttons and input fields.
Here is the config Im using on the view
Ext.define('MyApp.view.search.Search', {
extend:'Ext.navigation.View',
xtype: 'search_view',
config:{
items:[
{
fullscreen:true,
scroll:false,
xtype:'panel',
title:'Search',
items:[
{
xtype:'searchfield',
name:'search',
label:'Search',
},
{
xtype:'container',
layout:'hbox',
width:'100%',
margin:'3 0 0 0',
defaults:{
flex:1
},
items:[
{
xtype:'selectfield',
options:[
{text:'Option 1', value:'opt1'},
{text:'Option 2', value:'opt2'}
]
},
{
xtype:'button',
text:'Search',
action:'search'
}
]
},
{
xtype:'list',
itemTpl:['{title}'],
onItemDisclosure:true,
plugins:[
{ xclass: 'Ext.plugin.ListPaging' }
]
}
]
},
],
}
});
This image describes what Im trying to achieve, I took this screenshot by setting manually a height to the list container, as you can see it works the problem is that the list height doesn't fill the space below the form by default.
This is what I ended up doing to solve this, it's more of a workaround since I had to change the layout to only have the list in it, and use toolbars for the search options, this way the toolbar controls only use the minimum height they need to draw themselves correctly.
Ext.define('MyApp.view.search.Search', {
extend:'Ext.Container',
xtype: 'search_view',
config:{
fullscreen:true,
layout:'card'
items:[
{
xtype:'toolbar',
docked:'top',
items:[
{
xtype:'searchfield',
name:'search',
flex:6
},
{
xtype:'button',
action:'search',
iconCls:'search',
iconMask:true,
ui:'simple',
flex:1
}
]
},
{
xtype:'toolbar',
docked:'top',
items:[
{
xtype:'selectfield',
flex:1,
options:[
{text:'Option 1', value:'opt1'},
{text:'Option 2', value:'opt2'}
]
}
]
},
{
xtype:'list',
itemTpl:['{title}'],
onItemDisclosure:true,
plugins:[
{ xclass: 'Ext.plugin.ListPaging' }
]
},
],
}
});
As you can see I have two toolbars docked at the top, and the list filling the whole layout. Here is a screenshot of how it looks now.
Thanks for your time.
did you tried setting your container layout to "fit"?, basically it will use all the remaining available height, here is a great guide on layouts for sencha touch: http://docs.sencha.com/touch/2-0/#!/guide/layouts right from the docs!
Panel should have vbox layout, list should have fit layout and set flex option.
As seen if example bellow, if flex value is not set to a button, it should get default size.
From the documentation:
Flexing means we divide the available area up based on the flex of
each child component...
Here is an example:
Ext.define('MyApp.view.Main', {
extend: 'Ext.tab.Panel',
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'Welcome',
iconCls: 'home',
html: [
"Some content"
].join("")
},
{
title: "About",
iconCls: 'star',
layout: "vbox", // this card has vbox layout
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'List'
},
{
xtype: "list",
layout: "fit", // take as much space as available
flex: 1, // define flex
data: [
{name: 'Jamie Avins', age: 100},
{name: 'Rob Dougan', age: 21},
{name: 'Tommy Maintz', age: 24},
{name: 'Jacky Nguyen', age: 24},
{name: 'Ed Spencer', age: 26}
],
itemTpl: '{name} is {age} years old'
},
{
xtype: 'button',
text: "Button"
}
]
}
]
}
});
And screenshot:
Note: I am learning Sencha Touch so I am not sure that written is correct.
I want toolbar to take only nessasary \ auto size.. how can i do that?
MyViewportUi = Ext.extend(Ext.Viewport, {
layout: 'fit',
initComponent: function() {
this.items = [
{
xtype: 'panel',
title: 'My Panel',
layout: 'vbox',
tbar: {
xtype: 'toolbar',
items: [
{
xtype: 'button',
text: 'MyButton 1'
},
{
xtype: 'button',
text: 'MyButton 2'
}
]
}
}
];
MyViewportUi.superclass.initComponent.call(this);
}
});
Because a toolbar is just that, a bar, it will expand to fill all available space. Buttons placed inside a toolbar will occupy as much space as they need, but the toolbar will still expand to fill the maximum width possible.
The Ext.Toolbar has a property called autoWidth, but this will only cause the toolbar to use the css width: auto property. This is not perfect, but it's probably your best bet.
Here is a simple illustration of what I mean. It works in IE, and FF, but not in Safari.
I have four panels which are dynamically added to a tabpanel item. Three are grid panels, and one is a form panel. I need to preserve the grids proportions or sizes. I tried several layout methods (table, column, absolute etc), and nothing seems work so far. For table layout, all sizes end up being the same width. It seems my best bet is column layout, and they seem to render properly in FF, IE, but not in Safari as shown in the image. (Here it seems that column goes to second row, when the item does not fit into the current row). Initially, the title bar, and several of the column headings does not show.
Any suggestions.
Thank you.
alt text http://pssnet.com/~devone/pssops3/testing/Screenshot.png
Your best bet is probably a BorderLayout. I'm not sure how you want the page to look so I can't tell what specific configuration would be best
EDIT: Since you are using Ext 3.1, you really should check out the new HBox (sample) and VBox (sample) layouts. They are extremely powerful and will do exactly what you need.
Ext.onReady(function() {
var panel = new Ext.Panel({
id:'main-panel',
baseCls:'x-plain',
renderTo: Ext.getBody(),
width: 600,
height: 400,
layout: {
type: 'vbox',
align:'stretch'
},
defaults: {
xtype: 'panel',
baseCls:'x-plain',
flex: 1,
layout: {
type: 'hbox',
align: 'stretch'
}
},
items: [{
defaults: {
xtype: 'panel',
frame: true
},
items: [{
title: 'Item 1',
flex: 1
},{
title: 'Item 2',
flex: 2
}]
},{
defaults: {
xtype: 'panel',
frame: true
},
items: [{
title: 'Item 3',
html: 'sssssssssssss',
flex: 2
},{
title: 'Item 4',
flex: 1
}]
}]
});
});