1. #1
    Sencha User
    Join Date
    Jul 2010
    Location
    Russia, Yekaterinburg
    Posts
    8
    Vote Rating
    0
    isqad88 is on a distinguished road

      0  

    Default Ext.form.field.Button

    Ext.form.field.Button


    Hello! I am released custom form field - button:

    Code:
    Ext.define('Ext.form.field.Button',{    extend: 'Ext.form.Field',
        alias: 'widget.formbutton',
    
    
        fieldSubTpl: [
            '<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tbody><tr>',
            '<td class="x-btn-left"><i>&#160;</i></td><td class="x-btn-center"><em><button class="x-btn-text" id="{id}">Выбрать</button></em></td><td class="x-btn-right"><i>&#160;</i></td><td style="padding-left:4px"></td>',
            '</tr></tbody></table>',
            {
                compiled: true,
                disableFormats: true
            }
        ],
    
    
        initComponent: function() {
            this.callParent();
    
    
            this.addEvents(
                    'click'
                );
        },
    
    
        initEvents: function() {
            var me = this;
            me.callParent();
    
    
            me.mon(me.inputEl, 'click', me.onBtnClick, me);
        },
    
    
        onBtnClick: function(e) {
            this.fireEvent('click', this, e);
        }
    });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,533
    Vote Rating
    871
    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


    What about configuring the text in the button?
    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
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,533
    Vote Rating
    871
    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


    Here is a version that may be nice:

    Code:
    Ext.define('Ext.form.field.Button',{
        extend: 'Ext.form.Field',
        alias: 'widget.formbutton',
    
        /**
         * @cfg {Boolean} [text=true]
         * True to listen for click on the label to fire the click event
         * and execute the handler function
         */
        clickOnLabel : true,
    
        /**
         * @cfg {String} [text='']
         * The text to display on the button
         */
        text : '',
    
        /**
         * @cfg {Function} handler
         * A function called when the button is clicked (can be used instead of click event).
         * @cfg {Ext.form.field.Button} handler.button This form field.
         * @cfg {Ext.EventObject} handler.e The click event.
         */
    
        fieldSubTpl: [
            '<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tbody><tr>',
            '<td class="x-btn-left"><i>&#160;</i></td><td class="x-btn-center"><em><button class="x-btn-text" id="{id}">{text}</button></em></td><td class="x-btn-right"><i>&#160;</i></td><td style="padding-left:4px"></td>',
            '</tr></tbody></table>',
            {
                compiled: true,
                disableFormats: true
            }
        ],
    
        initComponent: function() {
            this.callParent();
    
            this.addEvents(
                /**
                 * @event click
                 * Fires when the button or optionally the label is clicked on
                 * @param {Ext.form.field.Button} this
                 * @param {Ext.EventObject} The click event
                 */
                'click'
            );
        },
    
        initEvents: function() {
            var me = this;
    
            me.callParent();
    
            if (me.clickOnLabel) {
                me.mon(me.inputEl, 'click', me.onBtnClick, me);
            }
        },
    
        onBtnClick: function(e) {
            var me      = this,
                handler = me.handler;
    
            me.fireEvent('click', me, e);
    
            if (handler) {
                handler.call(me, me, e);
            }
        },
    
        getSubTplData : function() {
            var data = this.callParent();
    
            data.text = this.text;
    
            return data;
        }
    });
    Usage:

    Code:
    new Ext.form.Panel({
        renderTo : document.body,
        width    : 400,
        height   : 200,
        items    : [
            {
                xtype      : 'formbutton',
                fieldLabel : 'Test',
                text       : 'Hi',
                handler    : function(field, e) {
                    console.log('click!');
                }
            }
        ]
    });
    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.

  4. #4
    Sencha User
    Join Date
    Jul 2010
    Location
    Russia, Yekaterinburg
    Posts
    8
    Vote Rating
    0
    isqad88 is on a distinguished road

      0  

    Default


    Oh! Thank you!So really the best .I just have not reached the level of professional in ExtJs

  5. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,533
    Vote Rating
    871
    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


    You were 95% there. I just helped you a little bit more.
    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.

Thread Participants: 1

Tags for this Thread