0

我正在尝试创建一个嵌入在 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
4

2 回答 2

0

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

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

我发现如果我在我的控制器中保留事件侦听器/处理程序,并在我的视图中保留布局/显示逻辑,我的应用程序变得更易于管理。

我也尽量避免调用 Ext.create(Ext.SomeCmpt) 而是使用 hidden 属性。

希望这可以帮助。

于 2013-06-11T04:14:40.573 回答
0

这里:

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

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

var panel = Ext.create('Ext.form.Panel', {
...
于 2012-06-20T15:26:44.017 回答