无法从叠加层内的表单面板获取文本字段值

时间:2013-03-24 15:55:18

标签: extjs sencha-touch sencha-touch-2

嗨,我正在尝试按下按钮时将字段集放在叠加层中。但是,当我尝试按如下方式检索值时

"var values = Ext.getCmp('reviewscontainer').getValues();" 

我收到错误:“未捕获的TypeError:无法调用未定义的方法'getValues'”。 如何引用这些值以从叠加层内部检索它们?如果它不在叠加层中,它确实有效。

Ext.define('FirstApp.view.ReviewsContainer',{
extend:'Ext.NavigationView',
xtype:'reviewscontainer',
config:{

    title:'Reviews',
    iconCls:'compose',
    items:[
        {
            xtype:'reviews'

        },
        {
          xtype: 'button',
                    align: 'right',
                    ui: 'confirm',
                    text:'Leave Review',
            docked: 'bottom',
            centered: 'true',


              handler: function() {
                if (!this.overlay) {
                    this.overlay = Ext.Viewport.add({
                        xtype: 'formpanel',    
                        modal: true,
                        hideOnMaskTap: true,
                        showAnimation: {
                            type: 'popIn',
                            duration: 250,
                            easing: 'ease-out'
                        },
                        hideAnimation: {
                            type: 'popOut',
                            duration: 250,
                            easing: 'ease-out'
                        },
                        centered: true,
                        width: Ext.os.deviceType == 'Phone' ? 260 : 400,
                        height: Ext.os.deviceType == 'Phone' ? 220 : 400,
                        styleHtmlContent: true,

                        items: [
                            {
                                docked: 'top',
                                xtype: 'toolbar',
                                title: 'Overlay Title'
                            },

            {
                xtype:'fieldset',
                title: 'Reviews',
             items: [
                    {
                        xtype:'textfield',
                        name: 'name',
                        label:'Name',
                        placeHolder: 'name'
                    },
                    {
                        xtype:'textfield',
                        name:'business',
                        label:'Place'
                    },
                      {
                        xtype:'textfield',
                        name:'rating',
                        label:'Rating'
                    },
                    {
                        xtype:'textareafield',
                        name:'review',
                        label:'Review'
                    }
                ]
            },
            {
            items:[
                {
                    xtype:'button',
                    text: 'Submit',
                    ui:'confirm',
                    handler: function(){
                      var values = Ext.getCmp('reviewscontainer').getValues();
                      // prints the values filled in the form 
                      // text fields of name, email and message.     
                      console.log(values.name+","+values.place+","+values.rating);                          


                      Ext.Ajax.request({
                        url: 'http://insert.php',
                        params : values,
                        success: function(response){
                            var text = response.responseText;
                             Ext.getCmp('reviewscontainer').reset();
                            Ext.Msg.alert('Success', "Review successfully created.",    this.overlay.hide()); 
                        }
                       });
                    }
                }
            ]
        }
                        ],
                        scrollable: false
                    });
                }

                this.overlay.show();
            }
        }

    ]
}
})

1 个答案:

答案 0 :(得分:1)

这是因为您没有为表单面板指定任何ID:

Ext.getCmp('reviewscontainer')

用于检索id: reviewscontainer而不是xtype:'reviewscontainer'的项目。

因此,您只需将id: reviewscontainer添加到表单面板即可。