How does one add two buttons in same row of a panel? (I'm new to extjs.)
If by "add", you mean passing them to the constructor, just use an array in the buttons config:
buttons: [{
text: 'foo'
}, {
text: 'bar'
}]
There's tons of examples on http://www.sencha.com/products/extjs/examples/
On the other hand, if you want to add buttons to an existing panel, you must actually add them to the panel's bottom toolbar (bottomTb) bar like so:
myPanel.bottomTb.add({xtype: 'button', text: 'foo'}, {xtype: 'button', text: 'bar'});
Note that xtype defaults to 'button' and thus may be omitted
You would use an Ext.Toolbar or container with an "hbox" layout.
The Toolbar is a built-in component that automatically stacks up buttons and fields into a horizontal layout, but it also changes the UI so that they "dock" visually. You can see the docs to see what I mean, but it will look like a toolbar, not like two buttons next to each other.
http://dev.sencha.com/deploy/ext-4.0.0/docs/api/Ext.toolbar.Toolbar.html
To get two buttons side-by-side, say Ok and Cancel, you can use an hbox layout in 4.0.
Ext.create('Ext.container.Container', {
layout: {
type: 'hbox'
},
items: [
{xtype: 'button', text: 'Ok'},
{xtype: 'button', text: 'Cancel'}
]
});
Check out the documentation for hbox for alignment and stretching options.
http://dev.sencha.com/deploy/ext-4.0.0/docs/api/Ext.toolbar.Toolbar.html
In older versions you'd do something similar, but with the less flexible 'columns' layout.
Related
I use 3 stateful grids that are replaced between each other in the same view. 2 of those grids simply extends first one. The only difference between grids is initial visibility of some columns. User can change this visibility in column menu and this setting stay like that because of stateful config.
Everything works good, when we consider only stateful part. But I don't know how to set initial visibility of columns. I tried like that
initComponent: function () {
this.columnManager.getHeaderByDataIndex('firstIndex').setHidden(true);
this.columnManager.getHeaderByDataIndex('secondIndex').setHidden(true);
}
and it works, columns are hidden when grid is opened for the first time and visible when user changes something and then open application once more. There is only 1 problem - in column menu they are always indicated as hidden which is clearly taken from my initComponent function. So I thought that maybe there is a way to check if grid has been ever shown or not. something like:
initComponent: function () {
if (!this.getState()) {
//hide given columns here
}
}
but it doesn't work too, as state is always null.
Why don't you do it in column config of the grid? Something like
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone',
hidden: true // <--- HERE
}]
});
I want to put some label/fields in a dialog/window. See below
I would like to stretch the field part to maximum, and I would like to shrink the label to the allowed minimum.
I thought border layout would be the best in that situation :
{
xtype: 'panel',
//flex: 1,
margin: '3',
border: true,
layout: 'border',
items: [
{
xtype: 'label',
region: 'west',
text: 'label'
},
{
xtype: 'numberfield',
region: 'center'
}
]
}
However when I do that, the field disappears and even more strangely, the dialog moves to the (0,0) position in the frame. Ie. the dialog moves to the top left corner :
Am I not understanding something here? The dialog also uses a border layout. Ie the buttons are in a south panel. Is it maybe not allowable to use a border inside a border for a dialog? Is this an extjs bug?
Is there some other way to achieve what I want to do? I understand you can use fieldLabel on a textfield. But I wanted to have two seperate components so I could have more control.
One of my new project i need to show 5 graph in a page. But at the same time i need to display only 2 item. So i use Card layout. But it only allow me to set only one item as an active item. Is it possible to set more than one active item.
Card layout will only display one of its children at a time. You should probably use another layout that arranges your charts as you want (for example vbox layout), and show/hide them selectively.
Another option would be to nest your charts into containers, themselves in the card layout, but that won't give you the possibility to display any combination of chart... But only the ones you've put together in a container.
You containers would be configured something like this:
Ext.widget('container', {
layout: 'card'
,items: [{
xtype: 'container'
,layout: 'vbox'
,items: [{
xtype: 'myChart1'
},{
xtype: 'myChart2'
}]
},{
xtype: 'container'
,layout: 'vbox'
,items: [{
xtype: 'myChart3'
},{
xtype: 'myChart4'
}]
},{
xtype: 'myChart5'
}]
});
I have a SplitButton at the bottom of the page and is not visible initially(we need to scroll down to see the bottom). When I scroll to SplitButton, then press arrow button to expand splitbutton's menu, menu appears under SplitButton(just as planned), and then scroll up, the menu remains on screen, and it is positioned relative to window, not the containing div.
I tried to initialize menu by passing floating: false to it's config, but in this case menu doesn't expands at all.
How can I posision SplitButton's menu to have it always under SplitButton?
My ExtJS version is 4.07
I think you're doing something wrong. I've tried with:
Ext.create('Ext.Panel', {
renderTo: Ext.getBody(),
html: 'loooooong panel',
height: 1500,
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
xtype: 'splitbutton',
text: 'My button',
menu: [{
text: 'Menu1'
},{
text: 'Menu2'
}]
}]
}]
});
Live example on jsfiddle, everything works fine. If you still have problems you should modify menuAlign property to suit your needs:
menu: [{
text: 'Menu1'
},{
text: 'Menu2'
}],
menuAlign: 'tl-bl?' // Default
where 'tl-bl?' means top left corner (of the menu) should be aligned with bottom left corner (of the button) and the '?' means that if there's no space the menu should be automatically moved.
I have a tabpanel which is part of a form (input fields are on different tabs). I need to inform the user on submission if a form has invalid fields even if they are not on the current tab. I think the best way would be to change the tabs color.
The question is how can I get the reference for the tab button, without introducing a new id?
Here is what i was trying to do, turned out to be a dead end since i get reference to the tab inner body, and with one more up to the entire tab panel
...
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:190,
margin: '10 0 0 0',
items: [{
title: 'Personal',
layout:'column',
border:false,
items:[{
columnWidth:.5,
border:false,
layout: 'anchor',
defaultType: 'textfield',
items: [{
fieldLabel: 'Email',
name: 'user[email]',
allowBlank: false,
listeners: {
'validitychange': function(th, isvalid, eOpts) {
if(!isvalid) {
alert(this.up().up().getId());
};
}
},
vtype:'email',
anchor:'95%'
}]
}]
}]
Try this:
From your field or any other Component in the panel (like a button) :
this.up('tabpanel').down('tab').el.applyStyles('background:red')
if the tab in question is not the first tab, you can use any tab property in the selector like this: ...down('tab[text=Example]') . You can use id property if you have it, if not you can just make up any property and set it to something meaningful like "ref:FirstTab".
If you have access to the tabPanel then you can access the items of its tabBar directly with:
this.up('tabpanel').getTabBar().items.get(0)
this.up('tabpanel').getTabBar().items.get(1)
etc.
See http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.tab.Bar-property-items