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

      0  

    Default


    Quote Originally Posted by mankz View Post
    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...
    yes i try all to do .maybe we need
    xtype: 'fingermenu',

    tankyou
    my ext js site
    http://www.itoto4.com/

  2. #22
    Sencha - Community Support Team mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    2,639
    Answers
    33
    Vote Rating
    103
    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


    xtype is an ExtJS concept, not applicable for Core...

  3. #23
    Sencha User
    Join Date
    Dec 2007
    Posts
    167
    Vote Rating
    0
    hello2008 is on a distinguished road

      0  

    Default


    thanks for sharing, it's really nice!

  4. #24
    Ext User DigitalSkyline's Avatar
    Join Date
    Apr 2007
    Location
    Rochester, MI
    Posts
    461
    Vote Rating
    0
    DigitalSkyline is on a distinguished road

      0  

    Default


    Just wanted to say good work... I did something like that but its just a single button, not a menu like yours. Cool!

    _____________________________________________

    For ExtJS Consultation and Custom Development ->
    Contact Paul[at]digitalskyline.com

  5. #25
    Ext User Joe's Avatar
    Join Date
    Apr 2007
    Posts
    243
    Vote Rating
    0
    Joe is on a distinguished road

      0  

    Default Added to MIT Open Source Code Library ...

    Added to MIT Open Source Code Library ...


    @mankz - Per our discussions / messages .. I have added your control to the google library.
    Note: As a member you should be able to commit changes / new controls.

    Still in baby stage .. but here is the SVN url.
    http://code.google.com/p/extjscoremitux/
    * for scripts are designed to help with basic content site creation using ExtJS Core.

    If you think the name is too long / crazy .. I am open to a new name and can move over the code .. ideas / ok with that name?

    I want to add a few more controls and then make a post related to this code library.
    Joseph Francis,
    CoreLan / Meeting Consultants

  6. #26
    Sencha - Community Support Team mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    2,639
    Answers
    33
    Vote Rating
    103
    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


    Good work!

    I'll keep it up to date with future changes!

  7. #27
    Ext User
    Join Date
    Nov 2008
    Posts
    12
    Vote Rating
    0
    manduks is on a distinguished road

      0  

    Default


    very good work looks nice, i can wait to use it in a page thanks for sharing

  8. #28
    Ext User Joe's Avatar
    Join Date
    Apr 2007
    Posts
    243
    Vote Rating
    0
    Joe is on a distinguished road

      0  

    Default Suggestions .. posting here for comment

    Suggestions .. posting here for comment


    @mankz (primarily) - here are some suggested updates (already complete in the code below)

    1) Allow fingerWidth and fingerHeight to be specified
    2) I wanted an option (for lazy ol' me) where I can specify iconWidth and hoverOffset .. and that computes the collapsedX and hoverX values ... but it still works the other way if you do not specify the iconWidth. If you specify iconWidth and no hoverOffset .. it just uses the same for hoverX.
    3) Added selectByPos. Added to allow selecting a finger via a call (not just clicking it). This is so I can sync up with other components. Example, using the slider ux, I can set the finger - which sets the page and just link them up .. with these changes.
    4) I needed to render this into a specific spot (not body). So I updated the code to allow for a renderTo in the config, which can be a dom, string id or Element.

    Your thoughts?

    Code:
    /*
    The MIT License
    
    Copyright (c) 2009 Mats Bryntse
    
    Permission is hereby granted, free of charge, to any person obtaining a copy
    of this software and associated documentation files (the "Software"), to deal
    in the Software without restriction, including without limitation the rights
    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
    copies of the Software, and to permit persons to whom the Software is
    furnished to do so, subject to the following conditions:
    
    The above copyright notice and this permission notice shall be included in
    all copies or substantial portions of the Software.
    
    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
    THE SOFTWARE.
    */
    
    /**
     * Ext.ux.FingerMenu
     *
     * @author    Mats Bryntse 
     * @version   1.0
     * 
     * This menu fires a 'change' event when an item is activated
     * 
     */
     
    Ext.ns('Ext.ux');
    
    Ext.ux.FingerMenu = Ext.extend(Ext.util.Observable, {
        /*
         * @cfg (array) array of menu config objects 
         *              The menu is built for 32x32 icons, if you need different size icons
         *              you'll have to modify the CSS.
         * 
         *              Example object : 
         *              {
         *                  text : 'Menu item 1',
         *                  iconCls : 'myIconClass',    
         *                  tooltip : 'This option is optional'
         *              }
         *
         */
        items : [],
        
        /*
         * @cfg (int) selected menu index
         */
        selectedIndex : 0,
        
        /*
         * @cfg (int) the X position of a selected menu item
         */
        expandedX: 0,
        
        /*
         * @cfg (int) the X position of the collapsed menu items
         */
        collapsedX : -150,
        
        /*
         * @cfg (int) the X position of a menu item on hover
         */
        hoverX : -147,
        
        //Joe - Added below
        /*
         * @cfg (int) the width of the menu item when expanded
         */
        fingerWidth : 190,
        
        //Joe - Added below
        /*
         * @cfg (int) the height of the menu item 
         */
        fingerHeight : 42,
    
        /*
         * @public (int) returns the currently selected item index
         */
        getSelectedIndex : function() {
            return this.selectedIndex;
        },
        
        /*
         * @private
         */
       onItemClick : function(e, t) {
            this.selectEntry.call(this,t)
       },
        /*
         * select entry by 0 based position
         */
       selectByPos : function(thePos) {
            this.selectEntry.call(this,Ext.getDom('menuitem-' + (thePos)) )
       },
        //Joe - Moved code to select entry below .. from the onItem Click and exposed to allow setting by position
        /*
         * @private
         */
        selectEntry : function(entry) {
    
            var target = entry.dom ? entry : Ext.get(entry);
            var t = target.dom;
            
            if (!target.hasClass('fingermenu-show')){
                var current = this.el.child('.fingermenu-show');
                target.radioClass('fingermenu-show');
                
                current.setX(this.collapsedX, {
                    duration : 0.3
                });
                
                target.setX(this.expandedX, {
                    duration : 0.3,
                    callback : function() {
                        this.selectedIndex = parseInt(t.id.substring('menuitem-'.length), 10);
                        this.fireEvent.defer(10, this, ['change', this, this.selectedIndex, this.items[this.selectedIndex]]);
                    },
                    scope : this
                });
            }
       },
       
       /*
         * @private
         */
       onHover : function(e, t) {
           var target = Ext.get(t);
           target = target.is('div') ? target : target.up('div');
           if (target.getX() === this.collapsedX){
               target.setX(this.hoverX, {
                    duration : 0.1
               });
           }
       },
       
       /*
        * @private
        */
       onHoverLeave : function(e, t) {
           var target = Ext.get(t);
           target = target.is('div') ? target : target.up('div');
           
           if (!target.hasClass('fingermenu-show')){
               target.setX(this.collapsedX,{
                    duration : 0.2
               });
           }
       },
        
       /*
        * @private
        */
       constructor : function(config) {
            if (!config || !config.items) throw 'Invalid arguments, see documentation';
            
            //Joe - Preprocess Config to support icons width and optionally hoverOffset
            if (config.iconWidth ){
                config.collapsedX = 0 - ( (config.fingerWidth || this.fingerWidth ) - config.iconWidth )
                config.hoverX = config.collapsedX + (config.hoverOffset || 0)
            }
            Ext.apply(this, config);
            
            var tabCfg = {
                    tag: 'div',
                    cls: 'fingermenu-panel ' + (config.cls || ''),
                    children : []
                },
                items = config.items,
                item,
                selected,
                i;
            
            
            this.addEvents('change');
            
            for (i = 0; i < items.length; i++) {
                item = items[i];
                selected = (i === this.selectedIndex);
                
                tabCfg.children.push({
                    id : 'menuitem-' + i,  
                    cls : selected ? 'fingermenu-show' : '',
                    style : {
                        width : this.fingerWidth + 'px',
                        position : 'absolute',
                        left : (selected ? this.expandedX : this.collapsedX) + 'px',
                        top : (i*this.fingerHeight) + 'px'
                    },
                    tag: 'div', children : [{
                            tag : 'span',
                            cls : item.iconCls ? ('fingermenu-icon ' + item.iconCls) : '',
                            html : item.text,
                            title : item.tooltip || item.text
                        }
                    ]
                });
            }
            //Joe - Added config.renderTo || ... below for more options        
            this.el = Ext.DomHelper.append(config.renderTo || Ext.getBody(), tabCfg, true);
            
            this.el.on('click', this.onItemClick, this, { delegate: 'div' });
            
            var divs = this.el.select('div');
            divs.on('mouseenter', this.onHover, this);
            divs.on('mouseleave', this.onHoverLeave, this);
            
            Ext.ux.FingerMenu.superclass.constructor.call(this);
        }
    });
    Joseph Francis,
    CoreLan / Meeting Consultants

  9. #29
    Sencha - Community Support Team mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    2,639
    Answers
    33
    Vote Rating
    103
    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


    Looks ok, I'll clean it up and release v1.1 once I get some free time. Going for a vacation tomorrow...

    Btw, what's up with:

    Code:
    this.selectEntry.call(this,t)
    Why not just do:

    Code:
    this.selectEntry(t)
    Thanks for helping out

  10. #30
    Ext User Joe's Avatar
    Join Date
    Apr 2007
    Posts
    243
    Vote Rating
    0
    Joe is on a distinguished road

      0  

    Default Both those call functions can be changed

    Both those call functions can be changed


    I was having scope issues and changed that but can't recreate any issues when flipped back, so both those calls can be changed as you suspected.

    Code:
        /*
         * @private
         */
       onItemClick : function(e, t) {
            //this.selectEntry.call(this,t)
            this.selectEntry(t)
       },
        /*
         * select entry by 0 based position
         */
       selectByPos : function(thePos) {
            //this.selectEntry.call(this,Ext.getDom('menuitem-' + (thePos)) )
            this.selectEntry(Ext.getDom('menuitem-' + (thePos)) )
       },
    Joseph Francis,
    CoreLan / Meeting Consultants

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar