1. #1
    Ext JS Premium Member stevil's Avatar
    Join Date
    Nov 2007
    Location
    Denver, CO
    Posts
    1,045
    Vote Rating
    9
    stevil will become famous soon enough

      0  

    Default Ext.ux.panel.TextTool - Simple text-based Panel tool and SASS mixin

    Ext.ux.panel.TextTool - Simple text-based Panel tool and SASS mixin


    The html below contains an extension to Ext.panel.Tool, called Ext.ux.panel.TextTool, xtype: 'texttool'.

    This allows you to create, and style to your own needs, simple text buttons to be used as panel tools, without the need to photoshop text into an image.

    Since the presentation is purely CSS and text, I've included a SASS mixin to facilitate creating the styles you'll need to create your own tools.

    To demonstrate, put the code below into an HTML file.

    To use in your own project:
    1. Put the Ext.define block below into your own code
    2. When declaring a panel config, where you specify tools, use xtype: 'texttool', and caption: 'tool caption'
    3. In CSS, make sure there's a selector .x-tool-<yourtoolid> with appropriate style rules (see below for an example)
    4. For SCSS, use the mixin declared in the comments below



    PHP Code:
    <!DOCTYPE html>
    <
    html>
        <
    head>
            <
    title>TextTool sample</title>
        
            <!-- 
    change paths to point to your extjs root -->
            <
    link id="extjs-theme-base" rel="stylesheet" type="text/css" href="ext-4.0.4/resources/css/ext-all.css">
            <
    script type="text/javascript" src="ext-4.0.4/ext-all.js"></script>

            <style> 
                /* Static (non-SASS) tool style - don't use if you're using SASS as described below */
                .x-tool-clickme {
                    background-color: #aa0000;
                    color: white;
                    font: 12px Arial;
                    height: 15px;
                    line-height: 11px !important;

                    padding: 1px 5px 1px 5px !important;
                    margin: 0 2px 0 2px;

                    cursor: pointer;
                }    
        
                /*
                    If you want better theme support, use the following in your theme's SCSS file:

                    // define SASS mixin
                    @mixin ux-text-tool($id) {
                        .x-tool-#{$id} {
                            background-color: #aa0000;
                            color: white;
                            font: $app-font;
                            height: 15px;
                            line-height: 11px !important;

                            padding: 1px 5px 1px 5px !important;
                            margin: 0 2px 0 2px;

                            cursor: pointer;
                        }    
                    }

                    // whereever you want to style a text tool
                    // call the mixin with the type you declared 
                    // when you created the text tool:
                    @include ux-text-tool("clickme");

                    // Compile your theme and go!
                */
           </style>


        </head>
        <body />
        <script type="text/javascript">

           // Define the tool extension
           Ext.define('Ext.ux.panel.TextTool', {
               extend: 'Ext.panel.Tool',
               alias: 'widget.texttool',
               renderTpl: ['<span class="{baseCls}-{type}" role="presentation" >{caption}</span>'],

               initComponent: function () {
                   // caption is the config you'll use to set the tool text
                   Ext.apply(this.renderData, { caption: this.caption });

                   this.callParent();
               }
           });

           Ext.onReady(function () {

               // Demonstrate on a window
               new Ext.Window({
                   renderTo: Ext.getBody(),
                   title: 'Hello, World!',
                   height: 100,
                   width: 300,
                   layout: 'fit',
                   html: 'Hello!',
                   tools: [
                        {
                            // specify TextTool xtype
                            xtype: 'texttool',
                            // make sure you have a x-tool-clickme CSS rule
                            type: 'clickme',
                            // tell TextTool what to use for its caption
                            caption: 'Click me!',
                            // everything else is regular tool behavior
                            handler: function () {
                                alert("On second thought, don't click me.");
                            }
                        }
                    ]
               }).show();
           });
        </script>
     </html> 
    Last edited by stevil; 5 Jul 2011 at 10:00 AM. Reason: change DIV to SPAN in template for IE8

  2. #2
    Ext JS Premium Member stevil's Avatar
    Join Date
    Nov 2007
    Location
    Denver, CO
    Posts
    1,045
    Vote Rating
    9
    stevil will become famous soon enough

      0  

    Default


    ZIP with tool extension and SASS mixin attached.
    Attached Files
    Last edited by stevil; 5 Jul 2011 at 10:03 AM. Reason: Change DIV to SPAN in template for IE8

  3. #3
    Ext JS Premium Member westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    796
    Vote Rating
    37
    westy is a jewel in the rough westy is a jewel in the rough westy is a jewel in the rough

      0  

    Default


    Heh, nice one mate

    Not sure I have a need at the moment, but sure I can come up with one...

    Cheers,
    Westy
    Product Architect
    Altus Ltd.

  4. #4
    Sencha User
    Join Date
    Sep 2011
    Posts
    2
    Vote Rating
    0
    tomiroth is on a distinguished road

      0  

    Default


    How would one do this in extjs 3.3?

  5. #5
    Sencha User
    Join Date
    Jun 2008
    Posts
    33
    Vote Rating
    0
    Psychokrameur is on a distinguished road

      0  

    Default


    Hi stevil,

    I found a little issue in your plugin, just using your example.

    When you drag a window, style of your button disapear (only while draging, it came back when you release).

    Anyway, look nice

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