Not getting the text box value for tabpanel?

**arindam.hit** · 2 Aug 2012 12:51 AM

In my application, i have a tab panel in the bottom of the screen. The three tabs are Home, Add Wishlog and Add Feedback. Now when i am clicking the home tab, it is showing me some icons. In Add Wishlog and Add Feedback tab, i added some text boxes and some buttons. I added the addwishlog tabs like below in the screen

Code:

        xtype : 'addwishlog',
        styleHtmlContent : true,
        title : '+ Wishlog',
        iconCls : 'favorites',
},

Here is the addwishlog.js file:::

Code:

Ext.define('MyApp.view.AddtoWishlog', {                    extend : 'Ext.Container',
                    xtype : 'addwishlog',
                    config : {
                        ui : 'light',
                        scrollable: {
                            direction: 'vertical',
                            directionLock: true
                        },
                        items : [
                                {
                                    xtype : 'container',
                                    id : 'LoginScreen',
                                    docked : 'top',
                                    items : [
                                            {
                                                xtype : 'image',
                                                docked : 'left',
                                                height : 92,
                                                id : 'Logoimage',
                                                ui : '',
                                                width : 120,
                                                src : 'app/images/small_logo.png'
                                            },
                                            {
                                                xtype : 'titlebar',
                                                cls : 'mytitlebar',
                                                docked : 'top',
                                                height : 80,
                                                ui : 'blue',
                                                items : [ {
                                                    xtype : 'label',
                                                    height : 36,
                                                    html : 'Add to Wishlog',
                                                    id : 'title',
                                                    margin : 20,
                                                    style : 'font: normal Bold 20px droid sans; color:#AB3951',
                                                } ]
                                            } ]
                                },
                                {
                                    xtype : 'panel',                                    
                                    autoHeight: true,
                                    items: [{
                                        xtype : 'container',
                                        id : 'dashboardiconcontainer',
                                        height: 400,
                                        layout: 'vbox',
                                        items : [
                                                {
                                                    xtype : 'container',
                                                    id : 'topitembox',
                                                    layout : {
                                                        type : 'hbox'
                                                    },
                                                    margin : '10 0 0 10',
                                                    height : 50,
                                                    items : [ {
                                                        xtype : 'textfield',
                                                        id : 'itemname',
                                                        labelWidth : '40%',
                                                        label : 'Name of the item',
                                                        width : 320
                                                    }, {
                                                        xtype : 'textfield',
                                                        id : 'barcodetextfield',
                                                        width : 300,
//                                                        value: 'test', 
                                                        margin : '0 0 0 10',
                                                        labelWidth : '40%',
                                                        label : 'Enter Barcode'
                                                    }, {
                                                        xtype : 'button',
                                                        height : 40,
                                                        scope: this,
                                                        margin : '0 0 0 10',
                                                        id : 'scanbutton',
                                                        ui : 'orange',
                                                        width : '80',
                                                        text : 'scan barcode'
                                                    } ]
                                                },


                                                {
                                                    xtype : 'container',
                                                    height : 160,
                                                    id : 'cameraimagecontainer',
                                                    margin : '10 0 0 10',
                                                    layout : {
                                                        type : 'hbox'
                                                    },
                                                    items : [
                                                            {
                                                                
                                                                html : '<img style="width:180px; height:150px;display:none;" id="capturedimage" src="" />'
                                                            },
                                                            {
                                                                xtype : 'container',
                                                                id : 'btncontainer',
                                                                width : 120,
                                                                margin : '0 0 0 10',
                                                                layout : {
                                                                    type : 'vbox'
                                                                },
                                                                items : [
                                                                        {
                                                                            xtype : 'button',
                                                                            height : 73,
                                                                            cls : 'capturebtn',
                                                                            id : 'capturebtn',
                                                                            width : 100
                                                                        },
                                                                        {
                                                                            xtype : 'button',
                                                                            height : 73,
                                                                            margin : '10 0 0 0',
                                                                            cls : 'choosephotobtn',
                                                                            id : 'selectphoto',
                                                                            width : 100
                                                                        } ]
                                                            },


                                                            {
                                                                xtype : 'container',
                                                                id : 'additionalinfo',
                                                                margin : '10 0 0 10',
                                                                width : 400,
                                                                layout : {
                                                                    type : 'vbox'
                                                                },
                                                                items : [
                                                                        {
                                                                            xtype : 'textareafield',
                                                                            height : 80,
                                                                            width : 380,
                                                                            id : 'additionalinfo',
                                                                            label : 'Add Additiona Details',
                                                                            labelWidth : '40%',
                                                                            placeHolder : ''
                                                                        },
                                                                        {
                                                                            xtype : 'selectfield',
                                                                            margin : '5 0 0 0',
                                                                            width : 300,
                                                                            label : 'Select Category',
                                                                            options : [
                                                                                    {
                                                                                        text : 'Food',
                                                                                        value : 'first'
                                                                                    },
                                                                                    {
                                                                                        text : 'Sports',
                                                                                        value : 'second'
                                                                                    },
                                                                                    {
                                                                                        text : 'Electronics',
                                                                                        value : 'third'
                                                                                    } ],
                                                                            labelWidth : '40%'
                                                                        },
                                                                        {
                                                                            xtype : 'textareafield',
                                                                            id : 'Addmoretag',
                                                                            margin : '10 0 0 0',
                                                                            width : 320,
                                                                            placeHolder : 'Add any other tags you want '
                                                                        },
                                                                        {
                                                                             xtype : 'button',
                                                                             height : 54,
                                                                             id : 'Addwishlog',
                                                                             margin : '10 0 0 0',
                                                                             ui : 'orange',
                                                                             width : 250,
                                                                             text : 'Add to my wishlog'
                                                                             }
                                                                        
                                                                        ]
                                                            } ]
                                                } ]
                                    }]
                                } ]
                    }

                });

The same way i am doing for addFeedback also. Now while i am trying to fetch the value of any of the text field from the addWislog screen, I am getting the error. Some time it is telling the getValue() method is not for this object..while trying to do using

Code:

this.getIDofTextbox().getValue();

although i took the correct reference in the controller. If i am trying using getCmp(), i am getting null value.I am literally confused, because for other screen, i am getting the value from text boxes. The problem i am getting only in this tabpanel js files.Here is my app.js file:

Code:

/*

Code:

 * File: app.js
 *
 * This file was generated by Sencha Architect version 2.0.0.
 * http://www.sencha.com/products/architect/
 *
 * This file requires use of the Sencha Touch 2.0.x library, under independent license.
 * License of Sencha Architect does not include license for Sencha Touch 2.0.x. For more
 * details see http://www.sencha.com/license or contact license@sencha.com.
 *
 * This file will be auto-generated each and everytime you save your project.
 *
 * Do NOT hand edit this file.
 */
Ext.Loader.setConfig({
    enabled : true
});


Ext.application({
    views : ['dashboardpanel', 'TitlePanel', 'wishlogsummary', 'ConsumerSignup', 'FeedbackSummary', 'ConsumerSignin', 'AddFeedback'],
    models : [ 'MyModel', 'wishlistmodel', 'feedbacksummarymodel' , 'loginmodel'],
    stores : [ 'name', 'wishlistsummarystore', 'feedbacksummarystore' ],
    name : 'MyApp',
    controllers : [ 'MyController' ],
    requires:['Ext.ux.touch.Rating'],
    
    fullscreen: true,




    launch : function() {
        
        var Login = {
                xtype: 'login'
        }
        var Dashboard = {
                xtype: 'dashboard'
        }
        
        var Wishlogsummary = {
                xtype: 'wishlogsummarylist'
        }
        
        var AddtoWishlog = {
                xtype: 'addwishlog'
        }
        var Consumersignup = {
                xtype: 'consumersignup'
        }
        var FeedbackSummaryList = {
                xtype: 'feedbacksummarylist'
        }
        var Consumersignin = {
                xtype: 'Consumersignin'
        }
        
        Ext.Viewport.add([Login,Dashboard,Wishlogsummary, FeedbackSummaryList,Consumersignup,Consumersignin]);
    }


});

Did i have to change something in the application architecture??Please help as i am stuck in this issue for a long while and not able to find out the solution..

**jerome76** · 2 Aug 2012 4:34 AM

You should put all of your textfields into a FormPanel. That way you can just reference the FormPanel and use the getValues() method on it to return you an array of the values based on the fields' names.

**arindam.hit** · 2 Aug 2012 6:45 AM

I tired that also.. i put inside the form panel and try to get the value. But i am getting null. If i am trying to get the Label of the component using getCmp() and getLabel(), it is returning me the label.

**jerome76** · 2 Aug 2012 6:56 AM

Are you sure you're referencing the formPanel when you use getValues()? I think you have too many subcomponents in your AddWishlog container.

Edit:

I tried changing your code. Look at it and try it out if you'd like.

Code:

Ext.define('MyApp.view.AddtoWishlog', {
    extend : 'Ext.Container',
    xtype : 'addwishlog',
    config : {
        ui : 'light',
        layout: 'fit',
        items : [{
            xtype : 'formpanel',
            height: 400,
            id : 'dashboardiconpanel',
            items: [{
                xtype : 'fieldset',
                title : 'Enter the Item',
                items : [{
                    xtype : 'textfield',
                        name : 'itemname',
                        labelWidth : '40%',
                        label : 'Name of the item',
                        width : 320
                    },
                    {
                        xtype : 'textfield',
                        name : 'barcodetextfield',
                        width : 300,
                        margin : '0 0 0 10',
                        labelWidth : '40%',
                        label : 'Enter Barcode'
                    },
                    {
                        xtype : 'button',
                        height : 40,
                        scope: this,
                        margin : '0 0 0 10',
                        id : 'scanbutton',
                        ui : 'orange',
                        width : '80',
                        text : 'scan barcode'
                    }]
            },
            {
                xtype : 'container',
                height : 160,
                id : 'cameraimagecontainer',
                margin : '10 0 0 10',
                layout : 'hbox',
                items : [{
                    html : '<img style="width:180px; height:150px;display:none;" id="capturedimage" src="" />'
                },
                {
                    xtype : 'container',
                    id : 'btncontainer',
                    width : 120,
                    margin : '0 0 0 10',
                    layout : 'vbox',
                    items : [{
                        xtype : 'button',
                        height : 73,
                        cls : 'capturebtn',
                        id : 'capturebtn',
                        width : 100
                    },
                    {
                        xtype : 'button',
                        height : 73,
                        margin : '10 0 0 0',
                        cls : 'choosephotobtn',
                        id : 'selectphoto',
                        width : 100
                    }]
                },
                {
                    xtype : 'fieldset',
                    id : 'additionalinfo',
                    margin : '10 0 0 10',
                    width : 400,
                    items : [{
                        xtype : 'textareafield',
                        height : 80,
                        width : 380,
                        name : 'additionalinfo',
                        label : 'Add Additional Details',
                        labelWidth : '40%'
                    },
                    {
                        xtype : 'selectfield',
                        margin : '5 0 0 0',
                        width : 300,
                        name : 'category',
                        label : 'Select Category',
                        options : [{
                            text : 'Food',
                            value : 'first'
                        },
                        {
                            text : 'Sports',
                            value : 'second'
                        },
                        {
                            text : 'Electronics',
                            value : 'third'
                        }],
                        labelWidth : '40%'
                    },
                    {
                        xtype : 'textareafield',
                        name : 'Addmoretag',
                        margin : '10 0 0 0',
                        width : 320,
                        placeHolder : 'Add any other tags you want '
                    },
                    {
                         xtype : 'button',
                         height : 54,
                         id : 'Addwishlog',
                         margin : '10 0 0 0',
                         ui : 'orange',
                         width : 250,
                         text : 'Add to my wishlog'
                    }]
                }]
            }]
        }]
    }
});

**arindam.hit** · 2 Aug 2012 7:15 AM

Yes..Even for other one means Add Feedback i added the below js file:

Code:

Ext.define('MyApp.view.AddFeedback', {    extend : 'Ext.Container',
    xtype : 'addfeedback',
    config : {
        ui : 'light',
        items : [ {
            xtype : 'image',
            docked : 'left',
            height : 92,
            id : 'Logoimage',
            ui : '',
            width : 120,
            src : 'app/images/small_logo.png'
        }, {
            xtype : 'titlebar',
            cls : 'mytitlebar',
            docked : 'top',
            height : 80,
            ui : 'blue',
            items : [ {
                xtype : 'label',
                height : 36,
                html : 'Feedback on the Experience',
                id : 'title',
                margin : 20,
                style : 'font: normal Bold 20px droid sans; color:#AB3951',
            } ]
        }, {
            xtype : 'container',
            id : 'feedbackaddcontainer',
            docked : 'top',
            layout : {
                pack : 'center',
                align : 'center',
                type : 'vbox'
            },
            items : [ {
                xtype : 'label',
                docked : 'top',
                html : 'Your feedback is valuable to us',
                id : 'signinlabel',
                margin : '0 0 0 200',
                style : 'font: normal bold 20px droid sans'
            }, {
                xtype : 'formpanel',
                id : 'feedbackformpanel',              
                margin : '10 0 0 0',
                width : 600,
                height : 180,
                items : [ {


                    xtype : 'fieldset',
                    id : 'feedbacktextfield',
                    items : [ {
                        xtype : 'textfield',
                        id : 'feedbackname',
                        name : 'feedbackname',
                        label : 'Name:',
                        labelWidth : '40%',
                    }, {
                        xtype : 'textfield',
                        id : 'feedbacklocationname',
                        name : 'feedbacklocationname',
                        label : 'Location:',
                        labelWidth : '40%',
                    },


                    {
                        xtype : 'textareafield',
                        id : 'comments',
                        name : 'comments',
                        style : 'font: Droid Sans',
                        label : 'Comments',
                        labelWidth : '40%'
                    },


                    {
                        xtype : 'selectfield',
                        label : 'Area',
                        name : 'selectArea',
                        id : 'selectArea',
                        labelWidth : '40%',
                        options : [ {
                            text : 'Products Quality',
                            value : 'first'
                        }, {
                            text : 'Sales Executive',
                            value : 'second'
                        }, {
                            text : 'Service Experience',
                            value : 'third'
                        } ]
                    } ]
                } ]


            },


            {
                xtype : 'button',
                height : 40,
                id : 'feedbacksubmitbtn',
                margin : '10 0 0 0',
                ui : 'orange',
                width : 220,
                text : 'Submit'
            } ]
        } ]
    }
});


// new Ext.ux.touch.Rating(
// {
// label : 'Rating',
// width : 400,
// itemsCount : 5,
// margin : '10 0 0 0',
// labelWidth : '40%',
// itemCls : 'x-rating-star',
// itemHoverCls : 'x-rating-star-hover'
// }),

Here you can see i am directly taking the form panel and trying..but the result is same. Getting the null value..

**jerome76** · 2 Aug 2012 7:20 AM

Your code looks fine to me. What code do you use to reference the formPanels and get the values and such?

**arindam.hit** · 2 Aug 2012 8:06 AM

Now i changed my code..but getting Uncaught TypeError: Cannot call method 'substring' of undefined

**jerome76** · 2 Aug 2012 8:37 AM

Where is that error coming from?

**arindam.hit** · 2 Aug 2012 8:44 AM

Uncaught TypeError: Cannot call method 'substring' of undefined in sencha-touch-all.js-15

**jerome76** · 2 Aug 2012 8:54 AM

You should test/debug your programs with the debug version of the sencha-touch.js and use the minified version for production.

Not getting the text box value for tabpanel?

Thread Tools

Search Thread

Display

Unanswered: Not getting the text box value for tabpanel?

Unanswered: Not getting the text box value for tabpanel?

Tags for this Thread