PDA

View Full Version : Tab Panel with Toolbar.



AtulDawkhare
15 Sep 2011, 11:28 PM
Hi ,
I am new to extjs. I don't know much about it. I have one scenario to implement

I have an requirement that , I want tab panel with few button , hyperlinks [All these should be inline with Tab panel]

Please provide me the solution or correct code to do this.

tvanzoelen
16 Sep 2011, 12:36 AM
Start from here and read some tutorials.


Ext.onReady(function(){

Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.body,
title: 'Foo',
tbar: [{
text: 'A button'
}],
items: [{
title: 'Card 1'

}, {
title: 'Card 2'
}]

});
});

AtulDawkhare
16 Sep 2011, 1:05 AM
28097

Hi ,
Thanks for your reply. But I am not looking for this.Sorry If I was not able to explain properly in my last post.
I want Tab panel with Button, Text, some Hyperlink Inline with Tab panel bar.
For better understanding I have attached screen shot with this. Please have a look at it.

Please provide me the solution.

Let me show you what currently I have and what I am looking for


I have used dockedItems for image, text. Here is the screen shot for this
28098


And I am expecting something like
28099
also in the home tab i.e. 'Homeasa' I have added image using 'iconCls', So the image is getting displayed on the left of the text, can I display it on the Right side ?
28100

Please help me, and provide me the solution for the same.

AtulDawkhare
18 Sep 2011, 10:21 PM
Can anybody please help me on this ?

tvanzoelen
18 Sep 2011, 11:12 PM
Please provide some code instead of images. It's impossible to ask for complete solutions here. There are a lot of examples with code. You can find them if you go to the API docs.

For example see
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.button.Button

iconAlign : String
The side of the Button box to render the icon. Four values are allowed:

'top'
'right'
'bottom'
'left'

AtulDawkhare
18 Sep 2011, 11:58 PM
Thanks a lot for the reply. Please guide me if I am doing anything wrong here.

Here is the code

var tabs = Ext.createWidget('tabpanel', {

renderTo: 'tabs1',
id : 'data',
items: [
{
contentEl:'home',
title: 'Home',
iconCls: 'add16',
iconAlign :'right',
items: [
{
xtype: 'panel',
bodyStyle: 'padding:5px',
border:false,
contentEl: 'grid1_div',
items:grid
}
],
dockedItems:
{
dock: 'top',
xtype: 'toolbar',
items:
['->',
{
iconCls: 'add16',
overCls :'content-panel',
handler: function(b)
{

Ext.Msg.alert('Click', 'You clicked Home first');
}

},
{
iconCls: 'add16',
handler: function(b)
{
Ext.Msg.alert('Click', 'You clicked Home Second');
}


},
{
text: 'Click me'
}
]
}
},
{
contentEl:'sales',
title: 'Sales',
items:grid2,
},
{
contentEl:'reports',
title: 'Reports'
},
{
contentEl:'admin',
title: 'Administration'
},
{
contentEl:'account',
title: 'Account Setting'
}
]
});

I am expecting 2 things from the above code.

1] Want the tab Panel inline with Toolbar.
i.e. 28122
2] The image from the Homeasa needs to be align to right side
i.e.28123

tvanzoelen
19 Sep 2011, 12:31 AM
I don't have your grids and css files so I can not work with that. Try it with a simple setup.
Add your css, images, handlers to the sample below and then build up your app.

contentEl I stripped, I don't have these elements.





Ext.onReady(function() {

var tabpanel = Ext.widget('tabpanel', {
renderTo: Ext.getBody(),
id : 'mytabpanel',
items: [
{
xtype: 'panel',
title: 'First',
bodyStyle: 'padding:5px',
border:false,
html: 'grid1_div or put grid here'
},
{
xtype: 'panel',
html:'sales',
title: 'Sales'
},
{
xtype: 'panel',
html:'reports',
title: 'Reports'
},
{
xtype: 'panel',
html:'admin',
title: 'Administration'
},
{
html:'account',
title: 'Account Setting'
}
],
dockedItems:[{
dock: 'top',
xtype: 'toolbar',
items:
[
{
xtype: 'button',
iconAlign: 'right',
text: 'Button 1',
handler: function(b)
{
Ext.Msg.alert('Click', 'You clicked Home first');
}
}
,
{
xtype: 'button',
text: 'Button 2',
handler: function(b)
{
Ext.Msg.alert('Click', 'You clicked Home Second');
}
},
{
xtype: 'button',
text: 'Button 2'
}
]
}]
});

});

AtulDawkhare
19 Sep 2011, 1:24 AM
Hi, Again thanks for your reply.

I hope you got my queries. I am new to ext js and I read many things but not able to find the solution.
Here again I am posting the same one. Now I have attached full working code.

Note: I am using tomcat [server side paging code] with this sample app.

Hope now you can provide me the best approach to full fill my requirement.

28127

AtulDawkhare
19 Sep 2011, 2:43 AM
Please suggest me Solution for my Queries.

tvanzoelen
19 Sep 2011, 3:14 AM
This is a Forum not a machine where you can run queries.

Do you want the docked items at the same height as the tabs?

tvanzoelen
19 Sep 2011, 3:35 AM
Too add them to the tabBar (same level as the tabs) you can do something like below




Ext.onReady(function() {

var tabpanel = Ext.widget('tabpanel', {
renderTo: Ext.getBody(),
id: 'mytabpanel',
listeners: {
render: {
fn: function(render, eOpts) {
this.tabBar.add({
xtype: 'button',
iconAlign: 'right',
text: 'Button 1',
handler: function(b) {
Ext.Msg.alert('Click', 'You clicked Home first');
}
});

this.tabBar.add({
xtype: 'button',
iconAlign: 'right',
text: 'Button 1',
handler: function(b) {
Ext.Msg.alert('Click', 'You clicked Home first');
}
});

this.tabBar.add({
xtype: 'button',
text: 'Button 2',
handler: function(b) {
Ext.Msg.alert('Click', 'You clicked Home Second');
}
});
}
}
},
items: [
{
xtype: 'panel',
title: 'First',
bodyStyle: 'padding:5px',
border: false,
html: 'grid1_div or put grid here'
},
{
xtype: 'panel',
html: 'sales',
title: 'Sales'
},
{
xtype: 'panel',
html: 'reports',
title: 'Reports'
},
{
xtype: 'panel',
html: 'admin',
title: 'Administration'
},
{
html: 'account',
title: 'Account Setting'
}
]
});

});



You add your link, button and stuf in that render: {
fn: function(render, eOpts) {
this.tabBar.add({})}
part.

AtulDawkhare
19 Sep 2011, 3:36 AM
Hi , I am very well know that this is forum and so asking my queries so that someone can help me to figure put the solution to my problem.

Yes I want the docked items to be inline with tabs. To get the exact idea I have posted the image.

Hope now it is clear.

tvanzoelen
19 Sep 2011, 3:38 AM
yes and above is the solution! You add your items to the tabBar and not to the dockeditems.

tvanzoelen
19 Sep 2011, 3:45 AM
to align the icon to the right on your tab. Specify it in the tabConfig on your tab


{
xtype: 'panel',
title: 'First',
bodyStyle: 'padding:5px',
border: false,
html: 'grid1_div or put grid here'
tabConfig: {
iconAlign: 'right'
}

AtulDawkhare
19 Sep 2011, 3:54 AM
Thanks a lot Tvanzoelen. You have almost solved my all Queries.

Thanks once again for the solution!!