Results 1 to 10 of 10

Thread: Not getting the text box value for tabpanel?

  1. #1
    Sencha User arindam.hit's Avatar
    Join Date
    May 2012
    Location
    Hyderabad
    Posts
    99
    Answers
    1
    Vote Rating
    1
      0  

    Default Unanswered: Not getting the text box value for tabpanel?

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

  2. #2
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    101
      0  

    Default

    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.

  3. #3
    Sencha User arindam.hit's Avatar
    Join Date
    May 2012
    Location
    Hyderabad
    Posts
    99
    Answers
    1
    Vote Rating
    1
      0  

    Default

    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.

  4. #4
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    101
      0  

    Default

    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'
                        }]
                    }]
                }]
            }]
        }
    });
    Last edited by jerome76; 2 Aug 2012 at 7:15 AM. Reason: Added code

  5. #5
    Sencha User arindam.hit's Avatar
    Join Date
    May 2012
    Location
    Hyderabad
    Posts
    99
    Answers
    1
    Vote Rating
    1
      0  

    Default

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

  6. #6
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    101
      0  

    Default

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

  7. #7
    Sencha User arindam.hit's Avatar
    Join Date
    May 2012
    Location
    Hyderabad
    Posts
    99
    Answers
    1
    Vote Rating
    1
      0  

    Default

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

  8. #8
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    101
      0  

    Default

    Where is that error coming from?

  9. #9
    Sencha User arindam.hit's Avatar
    Join Date
    May 2012
    Location
    Hyderabad
    Posts
    99
    Answers
    1
    Vote Rating
    1
      0  

    Default

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

  10. #10
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    101
      0  

    Default

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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •