Alternatives to textfield

[kevinjset]

Hey all,

I have a set of data in my dataStore, and I output my data using textfields within containers in a .js view. I also disabled the fields only to show data and be uneditable. I was wondering if there are any alternatives to using 'xtype: textfield', and 'xtype: textareafield' ? Any help is appreciated.

[mitchellsimoens]

You can use a container with two components using hbox.

[kevinjset]

Ahh I see, can you show me some example code of how I could go around doing that? Thanks

[kevinjset]

Hey mitchellsimoens, so I followed what you said about using a container with two components using hbox, and this is what I have so far...

        var formContainer1 = new Ext.Container({
            width: '100%',
            height: '65%',            
            layout: {
                type: 'vbox',
            //    type: 'hbox',
                align: 'stretch',
            },
            defaults: {
                labelAlign:'left',            
            //    labelWidth:'30%',
                labelWidth:'25%',
            },
            items: [
                { 
                    bodyStyle: "background-color: #52ABD5;", //Color = Light Blue
                    html: '<font face="Helvetica" size="4" color="white" ><p>Information</p>'
                },
                {
                    xtype: 'textfield',
                //    xtype: 'component',
                    name: 'Description',
                    disabled: true,
                    label: 'Desc',                    
                },{
                    xtype: 'textfield',
                //    xtype: 'component',
                    name: 'Number',
                    disabled: true,
                    label: 'ANumber',
                    id: 'ANumber',
                },{
                    xtype: 'textareafield',
                //    xtype: 'component',
                    name: 'directions',
                    disabled: true,
                    label: 'Directions',
                    height: 'auto',
                //    defaults: {
                        //required: true,
                //        labelAlign: 'left',
                //        labelWidth: '100%'
                //    },                        
                },
            ],
        /*    dockedItems: [
                {
                    layout: 'hbox',
                    xtype: 'toolbar',
                    dock: 'top',
                    title: 'Information',
                //    scroll: 'horizontal',
                }
            ]*/
        });

Now this code works just fine, except i don't want to use 'textfield' or 'textareafield'. I'm still using those because I tried using xtype: component, but it didn't work. Also when I tried this in hbox layout, it didn't show up like I wanted it to (row after row). I'm pretty sure I'm just not understanding the "components using hbox" part because yeah I want this container to look really close to this:


(note: referring to the right most iphone picture w/ the containers, and this is from the following post I made earlier this month: http://www.sencha.com/forum/showthre...050#post748050 "How to create a custom textfield like this?")

Please clarify for me on the "w/ 2 components usnig hbox" part. Or if anybody could help me out that would be awesome. Thanks!