Question

以下是创建简单表单的代码。它不起作用。任何解决方案？

运行此代码时没有显示任何内容。

   Ext.onReady(function(){
   Ext.QuickTips.init();
var simple=new Ext.FormPanel({
    lableWidth:75,
    frame:true,
url:'save-form.php',
title:'Login',
  bodyStyle:'padding:5px 5px 0',
   width: 350,
   defaults:{width: 230},
    defaultType:'textfield',
    xtype: 'fieldset',
    items:[
    {
        fieldLabel: 'username',
        name:'Username',
        id:'user',
        allowBlank:false
    },
    {
        fieldLabel:'password',
        name:'Password',
        id:'pass',
        allowBlank:false,
        inputType:'password'
    },
    {
        xtype:'combobox',
        store: Ext.create('Ext.data.Store',
        {
            fields:['abbr','name'],
            data:[
            {
                'abbr':'dev',
                'name':'Developer'
            },
            {
                'abbr':'test',
                'name':'tester'
            }]

        }),
        displayField:'name',
        emptyText:'Select user type..'
    },
    {
        fieldLabel:'Email',
        name:'Email',
        allowBlank:false,
        vtype:'email'
    },
    {
        boxLabel:'Remember me',
        xtype:'checkbox'
    }],

    buttons:[
    {
        text:'Login',
        handler:function()
        {
            var a=Ext.getCmp('user').getValue();
            var b=Ext.getCmp('pass').getValue();
            if(a=="saturn"&&b=="saturn")
                alert('Succesfull');
            else
                alert('id and password missmatch');
            simple.getForm().reset();
        }
    }]
})
simple.render(document.body);
    });

HTML：

<html>
<head>
    <title>Login</title>
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">      
    <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext/ext-all.js"></script>
    <script type="text/javascript" src="login.js"></script> 
</head>
</html>

Answer 1

如果您想使用此格式，则直接在表单中使用 fieldset ，然后在表单的项内添加。请参阅ExtJs Docs

我已经创建了一个希望它会帮助你的演示。 Sencha Fiddle

Ext.create('Ext.form.Panel', {
    title: 'Simple Form',
    renderTo: Ext.getBody(),
    lableWidth: 75,
    frame: true,
    url: 'save-form.php',
    bodyStyle: 'padding:5px 5px 0',
    width: '80%',
    items: [{
        xtype: 'fieldset',
        padding: 20,
        defaults: {
            width: '100%',
            flex: 1
        },
        defaultType: 'textfield',
        items: [{
            fieldLabel: 'username',
            name: 'Username',
            id: 'user',
            allowBlank: false
        }, {
            fieldLabel: 'password',
            name: 'Password',
            id: 'pass',
            allowBlank: false,
            inputType: 'password'
        }, {
            xtype: 'combobox',
            store: Ext.create('Ext.data.Store', {
                fields: ['abbr', 'name'],
                data: [{
                    'abbr': 'dev',
                    'name': 'Developer'
                }, {
                    'abbr': 'test',
                    'name': 'tester'
                }]

            }),
            displayField: 'name',
            emptyText: 'Select user type..'
        }, {
            fieldLabel: 'Email',
            name: 'Email',
            allowBlank: false,
            vtype: 'email'
        }, {
            boxLabel: 'Remember me',
            xtype: 'checkbox'
        }],
    }],

    buttons: [{
        text: 'Login',
        formBind: true,
        handler: function () {
           //your login here
           Ext.Msg.alert('Success','You have clicked on Login...!');
        }
    }]
});

Ext Js代码创建一个不起作用的表单

1 个答案: