1. #1
    Ext User
    Join Date
    Aug 2009
    Posts
    13
    Vote Rating
    0
    dwfresh is on a distinguished road

      0  

    Default Adding static text or html between form fields (FormPanel)

    Adding static text or html between form fields (FormPanel)


    Hi guys,
    In my form i am trying to accomplish something like a 'fill in the blanks' format.
    ie:
    Hello, my name is <textbox> and i was born in <textbox>. I am <textbox> years old and my favorite animal is <textbox>.....blah blah


    A user then fills in the 'blanks' (textfields), which submits like a regular form.

    Make sense ? I'm not really following a basic form pattern where you have label>textfield in a column.

    Get someone point me in the right direction ? I have seen that someone built a miscText extension. Do i need to use this or is there something already built into the EXT framework?

    Thanks for any help.

  2. #2
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,169
    Vote Rating
    28
    jay@moduscreate.com is a jewel in the rough jay@moduscreate.com is a jewel in the rough jay@moduscreate.com is a jewel in the rough jay@moduscreate.com is a jewel in the rough

      0  

    Default


    Quick and dirty
    Code:
    Ext.ns('Ext.ux');
    
    Ext.ux.TextBox = Ext.extend(Ext.BoxComponent, {
        constructor : function(cfg) {
            cfg = cfg || {};
            this.autoEl = {
               tag  : 'div',
               html : cfg.text
            };
            Ext.ux.TextBox.superclass.constructor.apply(this, arguments);
        }
    });
    
    Ext.reg('textbox', Ext.ux.TextBox);
    
    var row1 = {
        xtype       : 'container',
        autoEl      : {},
        layout      : 'column',
        defaultType : 'textfield',
        defaults    : {
            width : 70,
            style : 'margin-right: 3px;'
        },
        items       : [
            {
                xtype  : 'textbox',
                width  : 75,
                text   : 'Hi! My name is'
            },
            {
                name      : 'firstName',
                emptyText : 'first'
    
            },
            {
                name      : 'lastName',
                emptyText : 'last'
            },
            {
                xtype  : 'textbox',
                width  : 75,
                text   : '. And I drive a'
            },
            {
                name      : 'car',
                emptyText : 'car'
            }
        ]
    
    
    };
    
    new Ext.Window({
        width  : 400,
        height : 100,
        layout : 'fit',
        border : false,
        items  : {
            xtype  : 'form',
            frame  : true,
            layout : 'anchor',
            items  : [
                row1
            ]
    
        }
    }).show()

    Jay Garcia @ModusJesus || Modus Create co-founder
    Ext JS in Action author
    Sencha Touch in Action author

    Get in touch for Ext JS & Sencha Touch Touch Training

    We are also working on Video-based Sencha Touch training: Check it out here.

  3. #3
    Ext User
    Join Date
    Aug 2009
    Posts
    13
    Vote Rating
    0
    dwfresh is on a distinguished road

      0  

    Default


    Thanks very much that will work