1. #1
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    14
    Vote Rating
    6
    Solovyevk is on a distinguished road

      0  

    Default Ext.ux.ButtonColumn - button and menu

    Ext.ux.ButtonColumn - button and menu


    Recently I had a task to execute number of actions from the grid. I couldn't use Ext.grid.column.Action because there are not just a few but many actions, the actions set is unique for each record and user want to select them from drop down. My first implementation was a real split button injected into grid with http://skirtlesden.com/ux/component-column component.It works fine but some of my clients use IE7 and performance degraded, So I looked into button rendering and simulate it:

    A Ext.grid.column.Column subclass which renders a button like background in each column cell. It offers a scoped click handler for it. You can make it like a Split Button with a dropdown menu to execute multiple actions. The dropdown can be configured like a Ext.grid.column.Action with "items" array config option or generated at runtime with "setupMenu" method. Options provided for styling, enabling/disabling button and it's menu items


    Source and Examples on GitHub:
    https://github.com/solovyevk/ExtJSButtonColumn

    Download Source from GitHub:
    https://github.com/solovyevk/ExtJSBu...ive/master.zip

    Snapshot:
    button-column.png
    Last edited by Solovyevk; 5 Sep 2013 at 6:00 PM. Reason: remove attached zip, GitHub host the source

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,704
    Vote Rating
    750
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Don't forget to give your components an xtype. Also, I'd recommend using GitHub to host the source instead of attaching the file here for your updates.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Ext JS Premium Member mcouillard's Avatar
    Join Date
    Jun 2008
    Location
    Bucks County, PA
    Posts
    102
    Vote Rating
    7
    mcouillard is on a distinguished road

      0  

    Thumbs up


    Looks great! When more than 3 icons are needed per row it's often better to reconsider the UI. This method would provide a great alternative. Or if the actions don't fit into icons that typical users understand, your menu allows for some text to describe each function nicely.

  4. #4
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    14
    Vote Rating
    6
    Solovyevk is on a distinguished road

      0  

    Default


    Thank You Mitchell for your suggestion,
    I remove attached zip and provided link for download from GitHub.
    Also the xtype for this component is 'buttoncolumn'

  5. #5
    Sencha User
    Join Date
    May 2007
    Posts
    191
    Vote Rating
    0
    temporary is on a distinguished road

      0  

    Default


    Should this work with ExtJS 4.2.1?

    Button is displayed weird when calling the example. See image.

    Bildschirmfoto 2013-08-28 um 14.49.23.png

  6. #6
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    14
    Vote Rating
    6
    Solovyevk is on a distinguished road

      0  

    Default


    Thank You for letting me know about problem with 4.2.
    I only tested it with 4.0 and 4.1.
    I will work on making it looks right with 4.2.

  7. #7
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    14
    Vote Rating
    6
    Solovyevk is on a distinguished road

      0  

    Default


    I adapt component to Ext4.2. It was tested on 4.0, 4.1 and 4.2. Browsers IE8,9,10, FF and Chrome. One limitation with 4.2 the button blue highlight on mouse over not supported. This is due to button's grid cell not receiving 'mouseout' events reliably in ExtJS 4.2. If you have ideas why is that please let me know. I'll work to overcome it.

    Latest Source on GitHub:
    https://github.com/solovyevk/ExtJSBu...ive/master.zip

  8. #8
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    14
    Vote Rating
    6
    Solovyevk is on a distinguished road

      0  

    Default Button blue highlight on mouse over in version 4.2 is supported now

    Button blue highlight on mouse over in version 4.2 is supported now


    I found that with buffering of mouseover and mouseout event handling on view items in Ext.view.View,
    we losing "mouseout" event. It almost never get propogated down to the grid, only "mouseover":

    Here I just log event type at the beginning of Ext.view.View.handleMouseOverOrOut method src/view/View.js:480
    as I move mouse accros grid view items

    1) Buffering - the default set with mouseOverOutBuffer for 20 milliseconds. The 'mouseout' event lost

    Ext.view.View.handleMouseOverOrOut - process event: mouseover
    Ext.view.View.handleMouseOverOrOut - process event: mouseover
    Ext.view.View.handleMouseOverOrOut - process event: mouseover
    Ext.view.View.handleMouseOverOrOut - process event: mouseover
    Ext.view.View.handleMouseOverOrOut - process event: mouseover


    2) No buffering - the mouseOverOutBuffer set to false. The 'mouseout' events propogated fine : .

    Ext.view.View.handleMouseOverOrOut - process event: mouseover
    Ext.view.View.handleMouseOverOrOut - process event: mouseout
    Ext.view.View.handleMouseOverOrOut - process event: mouseover
    Ext.view.View.handleMouseOverOrOut - process event: mouseout
    Ext.view.View.handleMouseOverOrOut - process event: mouseover
    Ext.view.View.handleMouseOverOrOut - process event: mouseout

    Since Ext.ux.ButtonColumn blue highlight logic is driven by "mouseover" and"mouseout" events
    we need to turn off buffer of mouseover and mouseout event to support it. It is done in grid config like this:

    viewConfig: {
    mouseOverOutBuffer:false
    }








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