Question

I am unable to set the value for the textfield which is inside fieldcontainer. I want to set the value and other config for the “textfield” which is inside the “fieldcontainer”. So basically i set the configuration for the textfield which i receive from the server, like for example : allowBank: true , maxlength: 4, value: ‘Hello World’ i get from the server and want to supply it to the textdfield which is inside my custom control which is fieldcontainer. All other configuration is applied except for the value config using the built in textConfig. Below is my code:

Ext.define('PTextField', { extend: 'Ext.form.FieldContainer',
            alias: 'widget.ptextfield',
            requires: ['Ext.form.TextField', 'Ext.Img'],
            width: 170,
            fieldLabel: 'Empty Label',
            labelAlign: 'top',
            layout: {
                type: 'hbox'
            },
            BLANK_IMAGE_URL: '',


            constructor: function (config) {
                this.callParent(arguments);


                Ext.apply(this.down('textfield'), this.textConfig);
                Ext.apply(this.down('image'), this.imgConfig);


            }, // eo function constructor




            initComponent: function () {
                var me = this;
                this.textBox = this.createTextField();
                this.imageBox = this.createImagefield();
                this.items = [this.imageBox, this.textBox];
                this.callParent(arguments);
            }, //eo initComponent
            createTextField: function () { return {xtype: 'textfield'} },
            createImagefield: function () { return { xtype: 'image', height: 20, width: 20} }
        });

var fname = Ext.create('PTextField', {
            fieldLabel: 'First Name',
            textConfig: { value: 'Hello World', allowBlank: false, readOnly: true,     maxLength: 4, width: 100 },
            imgConfig: { src: 'http://www.sencha.com/img/20110215-feat-html5.png' }
        });

fname.render(Ext.getBody());

I am using extjs 4.1.
Any help is appreciated.

Answer 1

You should simply create the textfield and image using your configs. Then define your items array using the created objects, like this:

initComponent: function() { 
    var me = this,
        textfield = Ext.widget('textfield', me.textConfig),
        image = Ext.widget('image', me.imgConfig);

    me.items = [textfield, image];
    me.callParent(arguments); 
},