1. #11
    Sencha User
    Join Date
    Mar 2009
    Posts
    356
    Answers
    1
    Vote Rating
    0
    koko2589 is on a distinguished road

      0  

    Default


    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>
    my ext js site
    http://www.itoto4.com/

  2. #12
    Sencha User Rodolfo's Avatar
    Join Date
    Feb 2008
    Posts
    15
    Vote Rating
    1
    Rodolfo is on a distinguished road

      0  

    Default


    very nice

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

  3. #13
    Sencha - Community Support Team mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    2,748
    Answers
    33
    Vote Rating
    106
    mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all

      0  

    Default


    Quote Originally Posted by Joe View Post
    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?

  4. #14
    Sencha - Community Support Team mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    2,748
    Answers
    33
    Vote Rating
    106
    mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all

      0  

    Default


    Quote Originally Posted by Rodolfo View Post
    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!

  5. #15
    Sencha User
    Join Date
    Mar 2009
    Posts
    356
    Answers
    1
    Vote Rating
    0
    koko2589 is on a distinguished road

      0  

    Default


    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

    Quote Originally Posted by koko2589 View Post
    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>
    my ext js site
    http://www.itoto4.com/

  6. #16
    Sencha Premium Member
    Join Date
    Jun 2008
    Posts
    322
    Vote Rating
    4
    Scorpie is on a distinguished road

      0  

    Default


    Nice work!
    I`m from Holland!

  7. #17
    Sencha - Community Support Team mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    2,748
    Answers
    33
    Vote Rating
    106
    mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all

      0  

    Default


    Quote Originally Posted by koko2589 View Post
    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;
                    }
               });
               
             
            });

  8. #18
    Sencha User
    Join Date
    Mar 2009
    Posts
    356
    Answers
    1
    Vote Rating
    0
    koko2589 is on a distinguished road

      0  

    Default


    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;
    }
    });
    my ext js site
    http://www.itoto4.com/

  9. #19
    Sencha User
    Join Date
    Mar 2009
    Posts
    356
    Answers
    1
    Vote Rating
    0
    koko2589 is on a distinguished road

      0  

    Default


    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'
    }]
    my ext js site
    http://www.itoto4.com/

  10. #20
    Sencha - Community Support Team mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    2,748
    Answers
    33
    Vote Rating
    106
    mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all

      0  

    Default


    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...