Is it possible to have an ExtJsToolBar with multiple lines? I want a few controls on the first line and 3 ExtJsButtons on the 2nd.
The toolbar is the top toolbar of a Panel.
Not sure about earlier versions, but as of ExtJS 4.0 you can do it like this when you're defining the grid:
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{text:'Toolbar 1 Button 1'},
{text:'Toolbar 1 Button 2'}
]
},
{
xtype: 'toolbar',
dock: 'top',
items: [
{text:'Toolbar 2 Button 1'}
]
}
],
http://dev.sencha.com/deploy/ext-4.0.2a/docs/#/api/Ext.panel.Panel
You haven't mentioned to what widget you like to add toolbars, but in general you may add as many toolbars as you want:
var panel = new Ext.Panel();
var tool1 = new Ext.Toolbar({...});
var tool2 = new Ext.Toolbar({...});
panel.add(tool1);
panel.add(tool2);
...
If you like to add extra toolbar to the top of grid, then do find grid's panel component and add toolbars to it. It could look like this (not tested):
tPanel = grid.getTopToolbar().ownerCt; // get top toolbar's container panel
tPanel.add(anotherToolbar);
What about dockedItems its much simpler too.
var toolbar1 = {
xtype : 'toolbar',
dock : 'top', // bottom, right, left
items: [...]
};
var toolbar2 = {
xtype : 'toolbar',
dock : 'top',
items: [...]
};
Ext.create('Ext.panel.Panel', {
dockedItems: [toolbar1,toolbar2]
});
I know its quite old and already answered, may be it can help someone :)
I'm not sure if this is exactly what you are looking for but Toolbars has been revamped in Ext 3.0.
You might want to take a peek at:
http://extjs.com/deploy/ext-3.0-rc1.1/examples/toolbar/toolbars.html
I'm not sure, whether it's possible or not, but what you can always do is to divide north area (if using border layout for example) into two rows using row layout. Then you can add one toolbar to the top row and the other one to the second row.
Look at this thread in the Ext forum. It describes how to create a toolbar and render it to an existing toolbar.
http://www.extjs.com/forum/showthread.php?t=12433
Related
I've been looking at adding a simple calendar to an ExtJS app and like the features of the tui-calendar.
I've started with just trying to display a month in a panel. I've tried various layouts, length and width configs, but the calendar never fully displays. Here's a fiddle showing the results.
Any ideas what I'm missing?
Thanks in advance,
Gordon
You can use layout: 'fit' on the panel and set the div's width and height to 100% with html style, like <div id="calendar" style="width:100%;height:100%"></div>. This way you:
tell the panel (which has a fixed size) that it will have one child that should occupy all available area,
tell the div which contains the calendar to use 100% of the available place horizontally and vertically.
Ext.create('Ext.panel.Panel', {
renderTo: document.body,
height: 600,
width: 600,
layout: 'fit',
tbar: [{
xtype: 'button',
text: 'Display Calendar',
handler: function (button) {
const container = document.getElementById('calendar');
calendar = new tui.Calendar(container, options);
calendar.setDate('2023-03-01');
}
}],
items: [{
html: '<div id="calendar" style="width:100%;height:100%"></div>',
xtype: 'component'
}]
});
I'd like to note that I am not sure that this way ExtJS will manage the life cycle of the calendar object. I would recommend to keep track of the created calendar object and destroy it when the panel is destroyed. To do so, add a destroy listener event to the panel and destroy the calendar object there.
Whenever I add a form to a card layout, all the form items seem to disappear. I tested my layout here:
http://tof2k.com/ext/formbuilder/
with this code and got the same result, (use show/edit JSON to try it or build one yourself)
How can I make the for fields visible?
{
xtype:"panel",
title:"Panel",
items:[{
layout:"card",
title:"CardLayout Container",
activeItem:"0",
items:[{
xtype:"form",
title:"Form",
items:[{
xtype:"textfield",
fieldLabel:"Text",
name:"textvalue"
},{
xtype:"textfield",
fieldLabel:"Text",
name:"textvalue"
}]
}]
}]
}
I figured out the answer, ensure you set the height property of the form or else it will be hidden.
Basically my problem is splited into 2 parts. There are examples in the ExtJS 4 examples for extending a grid. but they are not working :( I'm using ExtJS 4 in the new recommended mvc application pattern.
Add a first column into a grid with buttons for editing and deleting
The grid is the first tab of a tabpanel. If the edit button is pressed a new tab should be created and bound to the store.
A new button should open a tab with a empty form bound to a store
Has anyone experiences with this? Any working code examples? I appreciate your help! Thx!
I have found a way to add buttons (or more correctly images).
So you need add new column with xtype: 'actioncolumn', and describe each button (image) as item.
E.g.:
...
columns: [
{
text: 'Name',
dataIndex: 'registrant_name',
flex: 1
}, {
xtype: 'actioncolumn',
width: 40,
items: [{
icon: 'path_to_img',
handler: function(grid, rowIndex, colindex) {
alert('click!');
}
}]
}
],
...
Also link on doc page:
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.column.Action
I am trying to open a extjs window in which I want to use panels on one side and tabs on another. on tabpanel I want to use formpanel, combobox and gridview on different panels. I know it is too much to ask. I looked online and found many examples how to do all these individually but what is the best way to combine these functions?
Here is the link where I found most of the examples:
https://web.archive.org/web/20130113094550/http://extjs.wima.co.uk/
Panels on one side and Tabs on another
If you mean, a panel on the left and Tabs on the right, then use the border layout. One the left set a panel as an item of the west region. On the right hand side, put a Tabpanel. Each tab of the panel can contain each of the items that you mentioned.
Ext.Window({
layout : 'border'
items : [{
xtype : 'panel'
region : 'west'
items : [{
//.. Any items you need
}]
},{
xtype : 'tabpanel',
region : 'center' // DONOT FORGET!
items : [{
xtype : 'form',
itmes : [{
//..Any form items that you need, including comboboxes
}]
},
{
xtype : 'grid',
// other configs of grid
},
{
// Any other components you desire
}
]
}]
});
Add whatever other configuration options that you need. Ext JS api is pretty well written.
I have a combobox inside of a ext.panel, inside of an ext.window. When I click the down arrow to show the possible SELECT options, the options pop up at the top-left of the browser window, instead of below the SELECT box. The funny thing is if I attach the drugDetailsPanel (see code below) to a div on the page (instead of inside an ext.window), the combobox works correctly. This also happens when I change ext.panel to ext.form.formpanel, by the way.
Any ideas?
My code:
drugDetailsPanel = new Ext.Panel({
layout:'form',
id:'drug-details-panel',
region:'center',
title:'Drug Details',
height:200,
collapsed:false,
collapsible:false,
items:[
new Ext.form.ComboBox({
fieldLabel:'What is the status of this drug?',
typeAhead:false,
store:drugStatusStore,
displayField:'lookup',
mode:'remote',
triggerAction:'all',
editable:false,
allowBlank:false,
emptyText:'Select a status..',
name:'/drug/drug-status',
id:'drug-status'
})
]
});
newDrugWindow = new Ext.Window({
title: 'Add Drug',
closable:true,
width:650,
height:650,
//border:false,
plain:true,
layout: 'border',
items: [drugDetailsPanel],
closeAction:'hide',
modal:true,
buttons: [
{
text:'Close',
disabled:false,
handler: function(){
newDrugWindow.hide();
}
},
{
text:'Save Drug',
handler: function(){
newDrugDialog.hide();
}
}]
});
Try to add shim: true to combo-box control.
Older versions of Ext had issues like this in certain browsers (FF 2.x) in certain situations dealing with nested positioning, the specifics of which escape me now. If that's the case, search the Ext forums for more info. If not, then I'm not sure...
This forum thread helped me: http://www.sencha.com/forum/showthread.php?177677-IE-displays-combobox-dropdown-in-the-top-left-corner-of-browser-window
Just give the combobox a (unique) name. Giving the combobox an inputId should also help
Seems like IE does not respect the position of the element if it does not have an explicit name/inputId. This thread goes more deeply into it: http://www.sencha.com/forum/showthread.php?154412-Combo-Box-options-appears-in-Top-Left-Corner-in-IE-9