如何在sencha中处理事件和发起服务器请求

how to handle events and initiating server request in sencha?

本文关键字：服务器请求处理事件 sencha 更新时间：2023-09-26

我正在使用sencha的应用程序，我有一个登录屏幕，有两个按钮退出和提交。在这里，我正在努力处理这些事件。此外，我有两个处理程序的两个按钮。但是我怎么能得到文本字段的文本?如何启动服务器请求。非常感谢任何帮助。

Ext.setup({
    icon: 'icon.png',
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    glossOnIcon: false,
    onReady: function() {
        var form;
        var formBase = {
            scroll : 'vertical',            
            standardSubmit : false,
            items: [
                {
                    xtype: 'fieldset',
                    title: 'Login Screen',
                    instructions: 'Enter agent number and password to login.',
                    defaults: {
                        required: true,
                        labelAlign: 'left',
                        labelWidth: '45%'
                    },
                    items: [
                    {
                        xtype: 'textfield',
                        name : 'username',
                        label: 'Agent Number',
                        useClearIcon: true
                    }, {
                        xtype: 'passwordfield',
                        name : 'password',
                        label: 'Password',
                        useClearIcon: false
                    }]
                }],
            listeners : {
                submit : function(form, result){
                    console.log('success', Ext.toArray(arguments));
                },
                exception : function(form, result){
                    console.log('failure', result);
                }
            },
            dockedItems: [
                {
                    xtype: 'toolbar',
                    dock: 'bottom',
                    items: [
                        {
                            text: 'Login',
                            ui: 'confirm',
                            handler: function() {
                                  alert('Login please wait..');
                            } 
                        }, 
                        {
                            text: 'Exit',
                            ui: 'exit',
                            handler: function() {
                                  alert('Are you sure ?');                               
                            } 
                        }
                    ]
                }
            ]
        };
        if (Ext.is.Phone) {
            formBase.fullscreen = true;
        } else {
            Ext.apply(formBase, {
                autoRender: true,
                floating: true,
                modal: true,
                centered: true,
                hideOnMaskTap: false,
                height: 385,
                width: 480
            });
        }
        form = new Ext.form.FormPanel(formBase);
        form.show();
    }
});

使用form.getValues();从文本字段获取值。发出请求使用:

Ext.Ajax.request({
     url: 'ajax_demo/sample.json',
    method: 'GET',
    params:{
          username:usernameValue, 
          password:passValue},
    success: function(response, opts) {
        var obj = Ext.decode(response.responseText);
        console.dir(obj);
    },
    failure: function(response, opts) {
        console.log('server-side failure with status code ' + response.status);
    }});

首先将字段的名称更改为user和pass，然后将以下代码替换为alert('Login please wait..');

Ext.Ajax.request({
  url: '140.45.45.20:9010/TService/Sms/Services',
  params: form.getValues(),
  method: 'GET',
  success: function(response, opts) {
    var obj = Ext.decode(response.responseText);
    console.dir(obj);
    //The request was successful - see the response in the response object
 },
 failure: function(response, opts) {
    console.log('server-side failure with status code ' + response.status);
}});