1. #1
    Ext User
    Join Date
    Dec 2008
    Posts
    74
    Vote Rating
    0
    Hemant Bob is on a distinguished road

      0  

    Default how to display suffix label infront of textfield

    how to display suffix label infront of textfield


    Hello All,

    On a page I am displaying a textfield, infront of this field I want to display a suffix label.
    FOr ex I want to display a textfield with label price and infront of that I want to display "Dollar" suffix.

    I haven't found any way to do it in docs.

    So, I am displaying it in column layout with items as textfield and suffix label.

    Code:
     
    layout: 'column',
    border: false,items{
    id : 'price',
    name : 'price',
    xtype : 'textfield',
    allowBlank: false, 
    width : 200 
    },{
    xtype: 'label',
    text: 'Dollar'
    Code:
    }]



    But by this way it doesn't show the label of the text field. And I can see a textbox + suffix on page.
    Am I missing something here?
    How can I display a textbox with label + suffix on page?.
    I can add one more item in this column layout to display the text label. But that is not the proper way, I think.

    Is there any way to show suffixinfront of textbox.

    Thanks.

  2. #2
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    6
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    I'm confused when you say suffix and your code shows it after the textfield, but then you keep saying in front. So do you want the additional text before or after the textfield?

  3. #3
    Ext User
    Join Date
    Dec 2008
    Posts
    74
    Vote Rating
    0
    Hemant Bob is on a distinguished road

      0  

    Default


    Thanks for your reply mjlecomte,

    What I want to display in page is like this. FOr ex if I want to display a price field with "Dollar" as label infront of text field like this.

    Price: TextField Dollar

    Am I clear here?

    So, what I am doing in the code is to put it in column model, something like this,
    Code:
    layout: 'column',
    border: false,
    items{
    fieldLabel: 'Price',
    id : 'price',
    name : 'price',
    xtype : 'textfield',
    allowBlank: false, 
    width : 200 
    },{
    xtype: 'label',
    text: 'Dollar'
    }]
    By this way the textField label i.e. Price is not displayed and I can see only textbox + Dollar on page.

    Is there any other way to achieve this task(not by using column layout) Or what should i do in this case.

    Thanks and appreciate your response.

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    57
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    maybe configure the form layout Container using

    Code:
    layoutConfig: {
        fieldTpl: new Ext.Template(
            '<div class="x-form-item {5}" tabIndex="-1">',
                '<div class="x-form-element" id="x-form-el-{0}" style="{3}"></div>',
                '<label for="{0}" style="{2}" class="x-form-item-label">{1}{4}</label>',
                '<div class="{6}"></div>',
            '</div>'
        )

  5. #5
    Ext User
    Join Date
    Dec 2008
    Posts
    74
    Vote Rating
    0
    Hemant Bob is on a distinguished road

      0  

    Default allignment issue in IE

    allignment issue in IE


    Can you explained more on this Animal.

    Meanwhile I tried to use extension called InlineItems http://extjs.com/forum/showthread.ph...743#post174743.

    I am using this extensionlike this,

    Code:
                                    
                                    fieldLabel: 'Account URL',
                                    id : 'account-url',
                                    name : 'account-url',
                                    xtype : 'textfield',
                                    style: 'font:normal 12px tahoma,arial,helvetica,sans-serif;',
                                    allowBlank: false,                       
                                    width : 200,
                                    plugins: [Ext.ux.plugins.InlineItems],
                                    inlineItems: [{
                                        xtype: 'label',
                                        text: 'xyz.net'
                                    }]
                            }]
    This way it works ok in all browser except IE.
    Now I can see following thing on my page,
    Account URL: TextField .xyz.net(this is suffix which I want to display infront of txtbox)

    But this field doesn't look align in IE.
    I have attached the image. Please have a look at it.

    I tried to set labelstyle: 'width=108px' and it looks ok in IE, but get disturbed in other browser.
    is it possible to set this propert conditionaly on check of browser like if(Ext.isIE) then set his property otherwise not. I tried that but not having success with it like this
    Code:
                 listeners:{
                            beforerender: function(){ 
                                alert('beforerender ' + Ext.getCmp('account-url').labelStyle);
                                alert('isIE ' + Ext.isIE);
                            if(Ext.isIE)    labelStyle= 'width: 108px';                                         
                            }
                    },
    Any suggestion will be greately appreciated.

    Thanks.
    Attached Images

  6. #6
    Ext User
    Join Date
    Dec 2008
    Posts
    74
    Vote Rating
    0
    Hemant Bob is on a distinguished road

      0  

    Default


    Any Idea?

Thread Participants: 2