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.
Related
I have a requirement where I have a number instances of a custom Grid (called PackageGrid).
This Grid has a default Toolbar with a couple of buttons. However for each instance of the Grid that I create, some additional widgets can be added to the toolbar using the insert method on the toolbar like so :
tBar.insert(0, {xtype:'button'})
My first approach was to define a custom toolbar and assign it to a variable, and then add that variable to my Grid, like so :
var tb = Ext.create('js.grid.Toolbar') //my custom toolbar
Ext.define('js.grid.PackageGrid', {
referenceToToolbar: tb,
extend: 'Ext.grid.Panel',
tbar: tb //this.toolbar
});
I hold a reference to the toolbar called referenceToToolbar. I then later grab this toolbar reference and add my widgets.
this.packageGrid = Ext.create('js.grid.PackageGrid')
var tBar = this.packageGrid.referenceToToolbar;
tBar.insert(0, {....})
The problem with this approach is that when I add widgets using tBar.insert(..) to my grid instances, ALL of my grids isntances get the same widgets... because, while the Grids are seperate instances, there is only one toolbar instance shared across all grids (tb).
I have tried playing around with the initComponent method to create an instance of the toolbar.
Basically I need ONE instance of a toolbar for ONE instance of my grid. And then be able to get a reference to that toolbar (before render time), and add some more widgets.
Can that be done?
You can pass additional toolbar item as configuration into grid. Then in grid's initComponent method you can create grid's tbar with merged items (shared and additional).
So your grid definition could be like this:
Ext.define('js.grid.PackageGrid', {
extend: 'Ext.grid.Panel',
initComponent: function() {
var me = this;
me.initTbar();
me.callParent();
},
initTbar: function() {
var me = this;
var tbarItems = [{
xtype: 'button',
text: 'Shared Button'
}];
if (me.aditionalTbarItems && me.aditionalTbarItems.length) {
tbarItems = me.aditionalTbarItems.concat(tbarItems);
}
me.tbar = tbarItems;
}
});
Then you can pass additional toolbar items in configuration when you are creating instance of your grid:
var grid1 = Ext.create('js.grid.PackageGrid', {
title: 'Grid 1',
aditionalTbarItems: [{
xtype: 'button',
text: 'Grid 1 Button'
}],
renderTo: Ext.getBody()
});
Fiddle with example: https://fiddle.sencha.com/#fiddle/70q
I cannot change the tabbar titles in a tab Panel.
Edit: I'm working on a test app witch consists in a main tab panel with other three views, similar to the "getting started video" of the sencha-touch documentation.
Now, for localization purposes, I need to change dinamically the labels under the icons of the tab bar, representing the three links to the panels.
In the code below there is my attempt to change the label of the first button by changing the title of the related view, as the label display "Home", that is the title of the view.
I want to do that on the "activate" event of the view.
The result of this code is that if I log the title of the home view, it is changed but the tab bar button label remains the same.
I think that I miss something like "refreshing" the button, but I cannot find anything on this subject on the documentation.
I hope this edit explains better my question.
Here is the code:
Ext.define('lvzMobile.view.Main', {
extend: 'Ext.tab.Panel',
requires: ['Ext.TitleBar'],
xtype: 'main',
config: {
tabBarPosition: "bottom",
items: [
{
xtype: 'homePanel',
id: 'home',
},
{
xtype: 'catalogue',
id: 'catalogue'
},
{
xtype: 'infoPanel',
id: 'info'
}
],
listeners: {
activate: function() {
console.log("activate");
this.getAt(0).setTitle("emoh");
//the title changes but nothing happens in the tabbar...
}
}
}
});
Please, can you help me? I can't understand what's wrong.
The line that says:
this.getAt(0).setTitle('emoh')
…will change the title of your panel, but not the button itself. To change the button text, use:
this.getTabBar().getAt(0).setTitle('emoh')
Here's a fiddle with your code to demonstrate.
While there, here's a tip: use alias: 'widget.main' instead of xtype: 'main'. xtype is for configs, alias is for defining the alias which in turn can be used later with xtype (use prefix widget. to be used as a widget, store. to be used as a store, etc.).
What I am trying to accomplish is to add information to a datagrid, then what I have its a button 'add', when I click it, it will show a panel where I can add all the information needed to fill the datagrid.
The panel to add the info should be shown like this:
http://img94.imageshack.us/img94/2662/emailhelp.jpg
The one above I have done it with a messagebox like this:
Ext.MessageBox.show({
title : 'Email Information',
msg : 'your email:',
width : 300,
buttons : Ext.MessageBox.OKCANCEL,
multiline : true,
fn : addEmailInfo,
animateTarget : 'btn_add'
});
Then what I want is something similar but with a panel, in which I could add more components.
I've been searching but I havent found anything, thank you in advance.
I've looked, but there is not a predefined ExtJS method to open a grid row in a form panel (should be).
There is an in-line row editing extension for ExtJS grids which works really well. Just double click a grid row and the record opens editable fields for any data you set as editable. Some more details on implementing it are here.
If that won't work-out for you, you would have to create a new Ext.window and add your own form panel / fields into it. Create an onclick listener in the grid which
populates the form / fields with the selected record data and
shows the window (myWindow.show()).
You would also have to write a method to save your edited or newly created record into the datastore (using myDataStore.set([field],[value])) also a line to commit it to the database (if that is where you are getting data).
To answer your question more exactly, a new window that you can add other fields to could be done like this:
myWindow = Ext.create('Ext.window.Window', {
id: 'recordWindow',
title: 'New Particle',
resizable: false,
closable: false,
width: 605,
minWidth: 300,
minHeight: 200,
y: 150,
layout: 'fit',
plain:true,
items: myFormPanel, //your form or fields would go here
buttons: [{
text: 'Save',
handler: saveRecord()
},{
text: 'Cancel',
handler: resetRecordWindow()
}]
});
How about this example? It shows a grid with an edit form to the right of it.
If you don't like that than you can wrap the form into the window component like Geronimo suggested.
http://docs.sencha.com/ext-js/4-0/#!/example/form/form-grid.html
Inside my FormPanel , I have a fieldset with a layout of 'column'.
I have tried several different config properties but i cannot get the label for my textfield to work. It just renders the textbox without a label.
(Obviously, if i make the layout type 'form', i have no issues). The text for the checkboxes shows fine, but the textbox label does not. Can someone point out what is wrong ?
thanks!
xtype:'fieldset',
title:'Transaction Status',
layout: 'column',
style:'margin:5px;'
,height:125//or:'-20', allowBlank:false}
,defaultType: 'checkbox'
,defaults: {
columnWidth: '.32',
border: false
},
items: [{
id:'check1-field',
name: 'check1',
boxLabel: 'DOT'
},{
id:'check2-field',
boxLabel: 'Results Matched',
name: 'check2'
},{
xtype:'textfield',
name: 'testname',
fieldLabel:'This doesnt show'
}
]
Ext Docs for TextField
"This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager."
So, since you have a layout of "column", I don't think it will render.
Best best is probably to place your check boxes in a separate field set below the text entry boxes, or just remove the column layout style and change it to form (the default).
I had the same problem with you..
I solved it using panel xtype.
set your checkboxes becomes the items of a panel.
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