1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    12
    Vote Rating
    0
    kevinjset is on a distinguished road

      0  

    Default Alternatives to textfield

    Alternatives to textfield


    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.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,065
    Vote Rating
    852
    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 can use a container with two components using hbox.
    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 User
    Join Date
    Nov 2011
    Posts
    12
    Vote Rating
    0
    kevinjset is on a distinguished road

      0  

    Default


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

  4. #4
    Sencha User
    Join Date
    Nov 2011
    Posts
    12
    Vote Rating
    0
    kevinjset is on a distinguished road

      0  

    Default


    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...

    Code:
            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!

Thread Participants: 1