How can I have the three regions left, middle, right within a toolbar? I know that I can use -> to trigger the right aligned container for all following items but what about center?
You can archive this with a trick:
Ext.create('Ext.panel.Panel', {
title: 'Toolbar Fill Example',
width: 300,
height: 200,
tbar : [
'Item 1',
{ xtype: 'tbfill' },
'Item 4',
{ xtype: 'tbfill' },
'Item 2'
],
renderTo: Ext.getBody()
});
JSFiddle
Note that:
[
'Item 1',
'->',
'Item 4',
'->',
'Item 2'
]
is working all the same.
How it work
-> or it's xtype tbfill is nothing more than a empty Component with a flex: 1 configuration.
Ext.create('Ext.panel.Panel', {
title: 'Toolbar Fill Example',
width: 300,
height: 200,
tbarCfg:{
buttonAlign:'center' //for center align
// buttonAlign:'left' //for left align
// buttonAlign:'right' //for right align
},
tbar : [
'Item 1',
{ xtype: 'tbfill' },
'Item 4',
{ xtype: 'tbfill' },
'Item 2'
],
renderTo: Ext.getBody()
});
For Right:
bbar: ['->',{
xtype: 'button',
text: 'xyz',
}]
For Left:
bbar: ['<-',{
xtype: 'button',
text: 'xyz',
}]
dockedItems: [{
xtype: 'toolbar',
buttonAlign:'center',
dock: 'top',
items: [{
text: 'Docked to the top'
}]
}]
Related
I wish to have an icon displayed as "value" for a form "displayfield". This is to display read-only values like true/false and yes/no with icons like "tick mark/cross mark". How to do it? There are many posts on labels but that is not what I am looking for. I need a "fieldLabel" and then the icon (it is not mandatory to use a form though, I may use any component for this).
Yes we can do that try with my example and I am attaching screenshot too.
Ext.onReady(function () {
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 200,
height: 150,
bodyPadding: 10,
title: 'Final Score',
items: [{
xtype: 'displayfield',
fieldLabel: 'home ',
name: 'home_score',
value: '<img src="home.png"></img> '
}, {
xtype: 'displayfield',
fieldLabel: 'Visitor ',
name: 'visitor_score',
value: '<img src="visitor.png"></img>'
}],
buttons: [{
text: 'Update'
}]
});
});
Just change the path of your image in your code.If you are not using form apply the same in label field.
Finally, I did the following in items of form-panel to make it work:
{
xtype: 'fieldcontainer',
fieldLabel: 'Label 1',
flex: 1,
name: 'Name 1',
items: [{
xtype: 'image',
glyph: 'something#FontAwesome'
}]
},{
xtype: 'fieldcontainer',
fieldLabel: 'Label 2',
flex: 1,
name: 'Name 2',
items: [{
xtype: 'image',
glyph: 'something#FontAwesome'
}]
}
I put Ext.Img in 'requires' of form-panel class.
Using Sencha Touch:
I want to create a slide out menu. But not like the facebook type:
What I want it to do instead is slide out on top(over the container under the title) and under the menu so it goes over it and not push it off to the right:
Ive searched and havent found any samples. Can anyone recommend a site or a tutorial on doing this.
Update - 5/24/2014
Thanks all for the different advice. The only thing is that I dont want it to look like the FB sliders. Ive seen those. I want it to slide over like the second screen shot i added. I was able to create it. Here is my code:
Ext.define('Slider.view.Main',
{
extend: 'Ext.Container',
xtype: 'mainPage',
requires:
[
'Ext.TitleBar',
'Ext.form.Panel',
'Ext.List',
'Ext.navigation.View',
'Ext.Component',
'Ext.Panel'
],
config:
{
layout: 'fit',
items:
[
{
xtype: 'titlebar',
docked: 'top',
title: 'Slider Test',
items:
[
{
iconCls: 'list',
align: 'left',
handler: function()
{
var con1 = Ext.ComponentQuery.query('container > #container1')[0];
var draggable = Ext.ComponentQuery.query('container > #navContainer')[0];
if(con1.element.hasCls('out'))
{
draggable.hide({type: 'slideOut', direction: 'left', duration : 500});
con1.element.removeCls('out').addCls('in');
}
else
{
con1.element.removeCls('in').addCls('out');
draggable.show({type:'slideIn', direction:'right', duration : 500});
}
}
}
]
},
{
xtype: 'container',
layout: 'hbox',
itemId: 'container1',
items:
[
{
xtype: 'container',
layout: 'card',
width: 250,
hidden: true,
itemId: 'navContainer',
style: 'position: absolute; top: 0; left: 0; height: 100%;z-index: 2',
zIndex : 1,
items:
[
{
xtype: 'list',
itemTpl: '{title}',
data:
[
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' }
]
}
]
},
{
xtype: 'container',
itemId: 'mainContainer',
width: '100%',
html: 'Main content area'
}
]
}
]
}
});
Check this sample Slide navigation with sencha touch
Set cover to true.
Ext.Viewport.setMenu(this.createMenu(), {
side: 'left',
cover: true
});
This will have the menu slide out on top of the container. I'm not sure about having it under the nav bar, but some maybe some clever css can solve that problem.
Thanks everyone for the tips. I was able to create what I wanted and posted the code under the update
Can a panel with table layout of 3 columns be made to add buttons vertically into the first column until that column is full and then continue adding buttons at the top of the second column etc? tia.
Its a bit hacky but you can use a RadioGroup and put some buttons into it:
Ext.create('Ext.form.Panel', {
title: 'RadioGroup Example',
width: 200,
height: 200,
bodyPadding: 10,
renderTo: Ext.getBody(),
items:[{
xtype: 'radiogroup',
columns: 2,
vertical: true,
items: [
{ xtype: 'button', text: 'Item 1' },
{ xtype: 'button', text: 'Item 2' },
{ xtype: 'button', text: 'Item 3' },
{ xtype: 'button', text: 'Item 4' },
{ xtype: 'button', text: 'Item 5' },
]
}]
});
I have the following grid here:
Ext.define('AM.view.user.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
title: 'All Users',
store: 'Users',
initComponent: function () {
this.columns = [{
header: 'Name',
dataIndex: 'name',
flex: 4
}, {
header: 'User ID',
dataIndex: 'user_id',
flex: 1
}, {
header: 'Address',
dataIndex: 'address',
flex: 3
}, {
header: 'Age',
dataIndex: 'agee',
flex: 5
}];
this.callParent(arguments);
}
});
Can a toolbar be added to the bottom of this grid or can they only be added to panels?
Also, how can I place normal text in a toolbar rather than a button?
Yes a grid panel inherits Ext.grid.Panel, you should be able to add:
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'button',
text: 'Left Button'
}, {
xtype: 'tbfill'
}, {
xtype: 'button',
text: 'Right Button'
}]
}]
Any component that has Docked layout can have toolbars docked. Since Ext.grid.Panel extends Ext.panel.Panel, you can dock to it. See the bbar config: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.panel.Panel-cfg-bbar
You can add text items to your toolbar by adding this to the toolbar's items:
{ xtype: 'tbtext', text: 'My Text' }
Docs for this here: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.toolbar.TextItem
Alternately you can also add button using 'bbar[...]' which is equivalent to
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [
{ xtype: 'button', text: 'Button 1' }
]
}]
this allows you to add buttons at the bottom of your gridpanel all other button properties are allowed to use.
sample code is here:
bbar: [
{ xtype: 'button', text: 'Button 1' },
{ xtype: 'button', text: 'Button 2' }
]
for more details you can refer the doc: http://docs.sencha.com/extjs/6.0/6.0.1-classic/#!/api/Ext.panel.Panel-cfg-bbar
I am having trouble making ExtJS field set elements appear correctly without overlapping. I use a FieldSet class and each row is a hbox container. My goal is to leave the layout the same but somehow make the values automatically show up on more than one line if needed.
Below is a sample of what my code looks like and a screenshot.
var genInfoFieldSet = new Ext.form.FieldSet({
title: '<b>TEST FIELD SET</b>',
height: '100%',
autoWidth: true,
items: [
//ROW 1
{
xtype: 'container',
layout: 'hbox',
defaults: { labelWidth: 120, align: 'stretch', labelStyle: 'font-weight:bold;font-size:11px', flex: 1,
fieldStyle: 'font-size:11px'
},
items: [
{
xtype: 'displayfield',
fieldLabel: 'field 1',
value: 'ABCDESDAVBABVA'
},
{
xtype: 'displayfield',
fieldLabel: 'field 2',
value: 'ZXCVZXVCZXZX'
},
{
xtype: 'displayfield',
fieldLabel: 'field 3',
value: 'ZXZXZXZX'
},
{
xtype: 'displayfield',
fieldLabel: 'field 4',
value: 'AKHAKSHASH'
}
]
},
//ROW 2
{
xtype: 'container',
layout: 'hbox',
defaults: { labelWidth: 120, align: 'stretch', labelStyle: 'font-weight:bold;font-size:11px', flex: 1,
fieldStyle: 'font-size:11px'
},
items: [
{
xtype: 'displayfield',
fieldLabel: 'field 5',
value: 'xxxxxxxxxxxxxxxxxxAAAAAAAXXX',
width: '10px'
},
{
xtype: 'displayfield',
fieldLabel: 'field 6',
value: 'AB'
},
{
xtype: 'displayfield',
fieldLabel: 'field 7',
value: 'ABC'
},
{
xtype: 'displayfield',
fieldLabel: 'field 8',
value: 'ABC'
}
]
}
]
});
You have provided flex:1 to every element (by using it in defaults). Instead of this, you should prefer providing flex:1 to one of the element, and give fixed width (or minWidth maxWidth) to others.
Giving flex:1 to every element tries to distribute the total width equally to all the elements and if the available width is not enough then the overlap occurs.
Thus, to remove the overlap, take off flex:1 from the defaults and assign flex:1 to any one element and give widths to others.
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.Box-cfg-flex
Hope this helps.