Question

我正在尝试创建嵌入Panel中的表单，并尝试从控制器中检索表单字段的内容。

以下是我的视图和控制器代码。

Ext.define('MyApp.view.SignIn', {
            extend: 'Ext.Container',
            requires: ['Ext.Button','Ext.form.Panel'],
            xtype: 'loginPage',

            config : {
                fullscreen: true,

                items: [
                {
                    docked: 'top',
                    xtype: 'titlebar',
                    html:'<img src="resources/icons/logo.png" />',
                    items: {
                                    iconMask: true,
                                    align: 'left',
                                    text: 'Sign In',


                                    handler: function(){

                                    var panel = Ext.create('Ext.Panel', {
                                             left: 0,
                                             padding: 10,                                   
                                             xtype: 'loginPage',
                                             url: 'contact.php',
                                             layout: 'vbox',
                                             id: 'signinform',

                                             items: [
                                                 {   
                                                            xtype: 'fieldset',
                                                            title : 'Enter Login Information:',
                                                            instructions: 'All fields are required',
                                                            layout: {
                                                                    type: 'vbox'
                                                            },                                              
                                                            items: [
                                                                {
                                                                    xtype: 'emailfield',
                                                                    name: 'Email',
                                                                    label: 'Email',
                                                                    placeHolder: 'Valid email'
                                                                },
                                                                {
                                                                    xtype: 'passwordfield',
                                                                    name: 'Password',
                                                                    label: 'Password',
                                                                    placeHolder: '6 characters'
                                                                }]
                                                  },
                                                  {                                            
                                                            layout: 'hbox',
                                                            items: [
                                                                 {
                                                                    xtype: 'button',
                                                                    text: 'Login',
                                                                    ui:'confirm',
                                                                    id:'Login-btn',
                                                                    width: '100px',
                                                                    flex: 1

                                                                  }, {
                                                                    width: '100px'
                                                                  }, {
                                                                    xtype: 'button',
                                                                    text: 'Register',
                                                                    ui: 'decline',
                                                                    width: '100px',
                                                                    flex: 1,
                                                                    handler: function(){                                                                
                                                                        this.getParent().getParent().destroy();                                                                                                                         
                                                                    }
                                                              }]//Buttons array

                                                   }//Form completion

                                            ]

                                        }).showBy(this); //Panel created


                                    }//Function complete                            
                    }
                },
                {
                    layout: {
                                type: 'vbox',
                                pack:'center',
                                align: 'center'
                    },
                    items:[{
                            html:'<h2>My tool</h2><h3 style="color:#F47621">Simple, intuitive and powerful data management tool.</h3>',
                            styleHtmlContent: true,
                    }
                    ]
                },
    ]
        },
         initialize: function() {
            this.callParent(arguments);
        },  
    });

这是我的控制器代码。我只是通过更简单的表单视图检查了控制器代码。所以我想这个问题与观点有关。

Ext.define("MyApp.controller.SignIn", {
    extend : 'Ext.app.Controller',

    config : {
        refs    : {
            home      : '#homePage',
            login     : '#loginPage',
            SignIn : '#signinform'
        },

        control : {
            '#Login-btn': {
                tap : 'onLoginButtonTap'
            }
        }
    },

    onLoginButtonTap: function() {
        var formValues = this.getSignIn().getValues();
        console.log(formValues.username);
        console.log(formValues.password);
    }
});
        ]
    },
     initialize: function() {
        this.callParent(arguments);
    },  
});

What is wrong with the form creation in the View page. Why is the form coming as undefined. Experts please help

Answer 1

下面：

var panel = Ext.create('Ext.Panel', {
...

您正在实例化一个简单的面板而不是表单面板。可能你想说：

var panel = Ext.create('Ext.form.Panel', {
...

Answer 2

我认为您未定义的原因是因为创建视图时这些组件不存在。

不是在视图中创建面板（Ext.create（'Ext.Panel'...），而是使用处理函数，您应该考虑将其定义为xtype：loginpage容器中的项目，隐藏：true。然后通过来自控制器的监听器调用隐藏组件上的show（）。

我发现如果我在控制器中保留事件监听器/处理程序，并在我的视图中使用布局/显示逻辑，那么我的应用程序就会变得更容易管理。

我也尽量避免调用Ext.create（Ext.SomeCmpt）而是使用隐藏属性。

希望这有帮助。

Sencha Touch 2 - 从控制器检索表单值时未定义的getValues（）

2 个答案: