PDA

View Full Version : Ext.ux.linkLayout



Ellevo
9 May 2008, 9:49 AM
*** What it is about :

Hi everyone,
this is the first plugin that I'm publishing here. It's just a very simple extension that helps doing a 'link panel' based on accordion layout.

*** Example

Descompress the zip file at the examples folder. The code is well commented and it's very simply to understand.

Edited on 06/12
- Highlight feature
- Code structure rebuild.
- Ext blue theme and gray theme adapter.

Edited on 07/28
- Text Align Implemented (textAlign:'right' or 'left')

reaper.br
9 May 2008, 10:13 AM
The file was OK for me.

BTW, nice extension. Thanks for sharing it! =D>

bt_bruno
21 May 2008, 2:31 AM
Pretty Good man ;) Keep sharing your extensions.

hoxty
22 May 2008, 2:11 AM
good work

=D>

wm003
24 May 2008, 3:52 AM
nice idea. thanks:)

stumpy_uk
1 Jun 2008, 1:52 PM
Great Share, Cheers just need to work out how to highlight the link with CSS like EXTJS have done on their Products Page http://www.extjs.com/products/extjs/ and I think it will be amazing..

Ellevo
5 Jun 2008, 7:49 AM
Thanks for the advice!
I'm a little busy now but I have some good ideas to implement.

Mark
12 Jun 2008, 1:04 AM
I tried to to open the first panel from the start using "activeLink: 0" , sorrowly whith no success. Can anybody give me a hint?
thanks, Mark



var LinkPanel = new Ext.Panel({
region : 'west'
,split : true
,id : 'west-panel'
,layout : 'links'
,layoutConfig : { animate:true, activeOnTop : true }
,title : 'Link Panel'
,collapsible : true
,cmargins :'0 4 0 0'
,margins :'0 0 0 0'
,width : 200
,minSize : 175
,maxSize : 400
,target :'link-tabPanel'
,defaults : { border : false }
,activeLink : 0
,items :[
{
title :'Objekte'
,iconCls :'ico_usr2'
,items:[
{
title :'Alle Objekte'
,handler : FirstTab
},{
title :'70130-1 addTab'
,handler : addTab
},{
title :'70130-2 addtab1'
,closable : true
} ,{
title :'70130-3 addTab'
,closable : true
,handler :addTab
}
]
},{
title :'Konfiguration'
,iconCls :'ico_con'
,items :[{title:'testtitel',html:'test'}]

}
]
} );

bt_bruno
12 Jun 2008, 3:00 AM
This ux is a layout, soo the activeLink must be informe on "layoutConfig:{}"



var LinkPanel = new Ext.Panel({
region : 'west'
,split : true
,id : 'west-panel'
,layout : 'links'
,layoutConfig : { animate:true, activeOnTop : true , activeLink:0 } //here it goes
...

Mark
12 Jun 2008, 3:19 AM
@bt_bruno
Thanks a lot!

Ellevo
12 Jun 2008, 4:48 AM
This is it! Version 2 release guys.

aarifmohammed
16 Jun 2008, 5:44 PM
I tried different tools to open this zip file, but failed. (:|

Ellevo
17 Jun 2008, 3:21 AM
I don't know what's going on with my zip program. Anyway, I've zipped this time with "winRar". It should work.

mask_hot
17 Jun 2008, 5:26 AM
Hi,

as I use your linkLayout in an Accordion Panel with some other panels containing grids or fields, I made this modification :



,renderItem : function( linkItem , index )
{
if (linkItem.type == 'links') { // MASK_HOT add_on
//if the link doesn�t have any items, it�s a simple link, else, is a groupping
var isSimpleLink = (!linkItem.items) ? true : false;

//call beforeRender functions
if (isSimpleLink) {
this.beforeRenderSimplyLink(linkItem);
}
else {
this.beforeRenderGroupingLink(linkItem);
}

//close link by default
linkItem.collapsed = true;

//If the item is the activeItem, and the item is a groupping item
if (index == this.activeLink && !isSimpleLink)
linkItem.collapsed = false; //...expand this item
}
//call super render
Ext.ux.layout.LinksLayout.superclass.renderItem.apply(this,arguments);

if (linkItem.type == 'links') { // MASK_HOT add_on
//call afterRender functions
if (isSimpleLink) {
this.afterRenderSimplyLink(linkItem);
}
else {
this.afterRenderGroupingLink(linkItem);
}

//add hover cls
if (this.activeHover)
linkItem.header.addClassOnOver('e-linkPanel-hover');
}
}


and when I construct my viewport :



,{
contentEl:'west-panel'
,layout:'ux.links'
,layoutConfig:{
animate:true
}
,collapsible :true
,cmargins :'0 4 0 0'
,margins :'0 0 0 0'
,region :'west'
,split : true
,width : 250
,minSize : 175
,maxSize : 400
,defaults: {
border: false
}
,items: [{
title:'Search'
//,border:false
,iconCls: 'search'
,items:[
//radio groups,
//fields..
]

}
,new Grid(
{
id:'grid-system-choice'
,maxHeight:300
})
,new Grid(
{
id:'grid-pattern-choice'
,maxHeight:400
})
]
,collapsed:false
},
{
type:'links', // MASK_HOT ADD_ON Use
title:'Admin',
iconCls: 'admin',
items:[
{
title:'Patterns'
,iconCls:'icon-script-edit'
,handler:onAdminPattern
},{
title:'Systems'
,iconCls:'icon-database-edit'
,handler:onAdminSystem
},{
title:'Patterns / Systems'
,iconCls:'icon-database-link'
,handler:onAdminPatternSystem
}

]
}

]
},

huling
21 Jun 2008, 7:59 PM
how can i control height and width of my simple links? and how control position of link's text?

Ellevo
23 Jun 2008, 2:36 AM
Hummm, position of the text is something interesting (right or left) ... but, what do you mean about controling the height? Why should we do this?

border9
16 Jul 2008, 7:31 AM
How do i make it so when you click on a link, it opens a new Tab, and each time you click that specific link it goes directly to that tab?

Ive tried a few different things but i cant seem to get it to function properly. Any help would be appreciated. Thanks

bt_bruno
16 Jul 2008, 9:04 AM
Attach a handler to your link.
Check in your tabPanel if there's already a tab created for that link.
There is? Activate it.
Otherwise, create it.



...
xtype:'panel'
,layout:'links'
,items:[{
title:'my link'
handler:openTabFromLink
}]
...

function openTabFromLink( link )
{
var findTab = myTabPanel.find('title' , link.title);

if( findTab.length == 0)
{
..create tab...
}else{
..activate tab ...
}
}

border9
17 Jul 2008, 3:02 AM
if( findTab.length == 0)

{

..create tab...

}else{

..activate tab ...

}


So, what would go in this area, i haven't had a lot of experience with Tabs and Links yet, mostly just grids and tabs.

Thanks.

bt_bruno
17 Jul 2008, 4:47 AM
Create a tab :


var myNewTab = myTabPanel.add({
title:'myTab'
html:'content'
});


Activate a tab :

myTabPanel.activate( myNewTab );

cdrascic
17 Jul 2008, 7:05 AM
the zip is bad/corrupt when I download it.

mystix
17 Jul 2008, 7:34 AM
the zip is bad/corrupt when I download it.
download using Firefox.

border9
9 Nov 2008, 6:09 AM
When i make a tab from a link inside the menu it doesn't allow it to go back to the tab when you click the link.

example:


var openTabFromLink = function(link)
{
var findTab = tabPanel.find('title' , link.title);
if( findTab.length == 0)
{
var myNewTab = tabPanel.add({
title: link.title,
closable:true,
html:'content'
});
tabPanel.activate( myNewTab );
}else{
tabPanel.activate( link.title );
}
}

Is what im using to create the new tab and find the tab if its already there.


{
title:'Chapter Administration',
handler:openTabFromLink
},{
title:'User Managment',
handler:openTabFromLink
},{
title:'General Options'
,items:[{
title:'Address Book',
handler:openTabFromLink
},{
title:'Database Search'
,handler:linkActivated
},{
title:'User Messaging'
,handler:openTabFromLink
}]
}

Now if you notice the 2nd tier of links, when you click one of those it creates the tab correct but when you go away from the tab and try to go back to it with the links, it doesn't call the tab.

Picture included.
Thanks

NM i added a custom id and made it work :) Thanks

si294r
9 Nov 2008, 7:49 AM
very cool... thanks a lot. :)

tavox
18 Dec 2008, 7:06 PM
thanks, nice work

nickar
11 Jun 2009, 8:34 AM
Do you think that it could be integrated with Ext.Actions?
It would be really useful if options are enabled/disabled globally as when you use menus or buttons.

Regards,