[Ext Core] Ext.ux.FingerMenu

**koko2589** · 14 Jun 2009 2:02 PM

hi
can we use this like Ext.ux.FingerMenu layout:'card'

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Panel</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <!-- GC -->
  <!-- LIBS -->
  <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
  <!-- ENDLIBS -->
    <script type="text/javascript" src="../../ext-all.js"></script>
    <script type="text/javascript" src="panels.j"></script>
 
    
    <link href="css/Ext.ux.FingerMenu.css" rel="stylesheet" type="text/css" />
    <link href="css/example.css" rel="stylesheet" type="text/css" />
    
   
  
    <script src="script/Ext.ux.FingerMenu.js" type="text/javascript"></script>
    

    <!-- Common Styles for the examples -->
    <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
    <style type="text/css">
    .x-panel-body p {
        margin:10px;
    }
    #container {
        margin:40px 0 0 195px; 
    }
    </style>
 <script type="text/javascript" >

         Ext.onReady(function(){
           var menu = new Ext.ux.FingerMenu({
               
                selectedIndex : 0,
                items : [
                    {
                        text:'show1',
                        iconCls : 'icon-lightbox', handler:function() {
                p.getLayout().setActiveItem(0);
            }
                    }, {
                       text:'show2',
                        iconCls : 'icon-carousel', handler:function() {
                p.getLayout().setActiveItem(1);
            }
                    }, {
                      text:'show3',
                        iconCls : 'icon-flickr', handler:function() {
                p.getLayout().setActiveItem(2);
            }
                    }, {
                        text : 'Lightbox',
                        iconCls : 'icon-lightbox'
                    }, {
                        text : 'Carousel',
                        iconCls : 'icon-carousel'
                    }, {
                        text : 'JSONP Flickr',
                        iconCls : 'icon-flickr'
                    }, {  text : 'Tabs',
                        iconCls : 'icon-tab'
                    }
                ]
           });
           
 
  var p = new Ext.Panel({
    renderTo: 'container',
        collapsible:false,
     height:400,
    
        width:'100%', tbar:[{
              text:'show1',
           handler:function() {
                p.getLayout().setActiveItem(0);
            }
        },{  
 text:'show2'
            ,handler:function() {
                p.getLayout().setActiveItem(1);  }
         
       
     }, '->',
 '-',{
 
      
             text:'show3',iconCls:'left'
            ,handler:function() {
                p.getLayout().setActiveItem(2);
            }
        }]
 ,layout:'card'
        ,activeItem:0
        ,layoutConfig:{deferredRender:true}
        ,defaults:{border:false}
        ,items:[{
           
           html:'card1'
        },{
   html:'Card 2'
        },{
           html:'Card 3'
        }]
 
    });
       
        
         
        });
</script>
</head>
<body><div id="container"><div/>
</body>
</html>

**Rodolfo** · 14 Jun 2009 2:28 PM

very nice

if help you.. the live example, not working on Safari version 4.0 (5530.17).

**mankz** · 14 Jun 2009 9:47 PM

Originally Posted by Joe

Great to see it working in IE now - cool.

I tested it in IE6 and it worked perfect, so you'll need another good reason to bite your tounge.

Nice to see a ExtJS Core based ux control geared towards content sites. Is this MIT open source - like ExtJS Core? If so, would you mind if I posted this in a SVN dedicated to ExtJS Core components for content sites? Are you interested in being part of such a project?

Thanks again for your active posts in regards to ExtJS Core.

Glad it works in IE6, pretty surprising

.

It's MIT yes, just updated the original post. I might be interested in your project, what do you have in mind?

**mankz** · 14 Jun 2009 9:56 PM

Originally Posted by Rodolfo

very nice

if help you.. the live example, not working on Safari version 4.0 (5530.17).

Correct

, just tried it. I'll look into it soon!

**koko2589** · 15 Jun 2009 12:59 AM

i try to use this with card bat

handler:function() {
p.getLayout().setActiveItem(0);
}

not work

see here i want to swish card wite finggermenu

http://itoto1.com/ext-2.0.2/examples...rmenucrad.html

what i need to do? tankyou

Originally Posted by koko2589

hi
can we use this like Ext.ux.FingerMenu layout:'card'

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Panel</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <!-- GC -->
  <!-- LIBS -->
  <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
  <!-- ENDLIBS -->
    <script type="text/javascript" src="../../ext-all.js"></script>
    <script type="text/javascript" src="panels.j"></script>
 
 
    <link href="css/Ext.ux.FingerMenu.css" rel="stylesheet" type="text/css" />
    <link href="css/example.css" rel="stylesheet" type="text/css" />
 
 
 
    <script src="script/Ext.ux.FingerMenu.js" type="text/javascript"></script>
 
 
    <!-- Common Styles for the examples -->
    <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
    <style type="text/css">
    .x-panel-body p {
        margin:10px;
    }
    #container {
        margin:40px 0 0 195px; 
    }
    </style>
 <script type="text/javascript" >
 
         Ext.onReady(function(){
           var menu = new Ext.ux.FingerMenu({
 
                selectedIndex : 0,
                items : [
                    {
                        text:'show1',
                        iconCls : 'icon-lightbox', handler:function() {
              p.getLayout().setActiveItem(0);
          }
                    }, {
                       text:'show2',
                        iconCls : 'icon-carousel', handler:function() {
              p.getLayout().setActiveItem(1);
          }
                    }, {
                      text:'show3',
                        iconCls : 'icon-flickr', handler:function() {
              p.getLayout().setActiveItem(2);
          }
                    }, {
                        text : 'Lightbox',
                        iconCls : 'icon-lightbox'
                    }, {
                        text : 'Carousel',
                        iconCls : 'icon-carousel'
                    }, {
                        text : 'JSONP Flickr',
                        iconCls : 'icon-flickr'
                    }, {  text : 'Tabs',
                        iconCls : 'icon-tab'
                    }
                ]
           });
 
 
  var p = new Ext.Panel({
    renderTo: 'container',
        collapsible:false,
     height:400,
 
        width:'100%', tbar:[{
              text:'show1',
           handler:function() {
                p.getLayout().setActiveItem(0);
            }
        },{  
 text:'show2'
            ,handler:function() {
                p.getLayout().setActiveItem(1);  }
 
 
     }, '->',
 '-',{
 
 
             text:'show3',iconCls:'left'
            ,handler:function() {
                p.getLayout().setActiveItem(2);
            }
        }]
 ,layout:'card'
      ,activeItem:0
        ,layoutConfig:{deferredRender:true}
        ,defaults:{border:false}
        ,items:[{
 
           html:'card1'
        },{
   html:'Card 2'
        },{
           html:'Card 3'
        }]
 
    });
 
 
 
        });
</script>
</head>
<body><div id="container"><div/>
</body>
</html>

**Scorpie** · 15 Jun 2009 1:03 AM

Nice work!

**mankz** · 15 Jun 2009 1:22 AM

Originally Posted by koko2589

i try to use this with card bat

handler:function() {
p.getLayout().setActiveItem(0);
}

not work

I chose not to use the handler approach, you use it like this:

Code:

Ext.onReady(function(){
           var menu = new Ext.ux.FingerMenu({
                cls : 'menuExample',
                selectedIndex : 0,
                items : [
                    {
                        text : 'Lightbox',
                        iconCls : 'icon-lightbox'
                    }, {
                        text : 'Carousel',
                        iconCls : 'icon-carousel'
                    }, {
                        text : 'JSONP Flickr',
                        iconCls : 'icon-flickr'
                    }, {
                        text : 'Tabs',
                        iconCls : 'icon-tab'
                    }
                ]
           });
           
           menu.on('change', function(obj, index) {
                switch(index) {
                    case 0:
                        // Do your thing here...
                    break;
                    
                    case 1:
                        // Do your thing here...
                    break;
           
                    case 2:
                       // Do your thing here...
                    break;
                    
                    case 3:
                       // Do your thing here...
                    break;
                }
           });
           
         
        });

**koko2589** · 15 Jun 2009 1:46 AM

tankou are king its work

demo here

http://itoto1.com/ext-2.0.2/examples...rmenucrad.html
menu.on('change', function(obj, index) {
switch(index) {
case 0:

break;

case 1:

p.getLayout().setActiveItem(2);;

break;

case 2:
// Do your thing here...
break;

case 3:
// Do your thing here...
break;
}
});

**koko2589** · 15 Jun 2009 3:42 AM

can we put Ext.ux.FingerMenu in panel?

Code:

layout:'border',
defaults: {
    collapsible: true,
    split: true,
    bodyStyle: 'padding:15px'
},
items: [{
    title: 'Footer',
    region: 'south',
    height: 150,
    minSize: 75,
    maxSize: 250,
    cmargins: '5 0 0 0'
},{
    title: 'Navigation',
    region:'east',//i want the  Ext.ux.FingerMenu to be here  how can we do that? 
    margins: '5 0 0 0',
    cmargins: '5 5 0 0',
    width: 175,
    minSize: 100,
    maxSize: 250
},{
    title: 'Main Content',
    collapsible: false,
    region:'center',
    margins: '5 0 0 0'
}]

**mankz** · 15 Jun 2009 3:46 AM

Well...

1. It's not really designed for interaction with other Ext components (it's a Core "light widget")
2. It's designed as a left side menu, not suited for placement in any 'east' region.

Would be a considerable amount of work to get this done sorry...

[Ext Core] Ext.ux.FingerMenu

Thread Tools

Search Thread

Display