ExtJs之文本框及数字输入

时间：2024-03-26 09:45:48

结合HTML来理解，

比较容易。

ExtJs之文本框及数字输入
<!DOCTYPE html>
<html>
<head>
    <title>ExtJs</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">
        <script type="text/javascript" src="ExtJs/ext-all.js"></script>
        <script type="text/javascript" src="ExtJs/bootstrap.js"></script>
        <script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
        
    <script type="text/javascript">
            Ext.onReady(function() {
                Ext.QuickTips.init();
                var testForm = new Ext.form.Panel({
                    title: 'Ext.form.field.TextAreaSample',
                    bodyStyle: 'padding: 5 5 5 5',
                    frame: true,
                    height: 150,
                    width: 250,
                    renderTo: 'formArea',
                    items: [{
                        xtype: 'textarea',
                        fieldLabel: 'memo',
                        id: 'memo',
                        labelSeparator: ':',
                        labelWidth: 60,
                        width: 200
                    }],
                    buttons: [{text: 'ok', handler: showValue}]
                });
                var loginForm = new Ext.form.Panel({
                    title: 'Ext.form.field.Text Sample',
                    bodyStyle: 'padding: 5 5 5 5',
                    frame: true,
                    height: 150,
                    width: 550,
                    renderTo: 'form',
                    defaultType: 'textfield',
                    defaults: {
                        labelSeparator: ':',
                        labelWidth: 150,
                        width: 500,
                        allowBlank: false,
                        labelAlign: 'left',
                        msgTarget: 'side'
                    },
                    items: [{
                        fieldLabel: 'username',
                        name: 'userName',
                        selectOnFocus: true,
                        regex: /^([\w]+)(.[\w+]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/,
                        regexText: 'format error'
                    }, {
                        name: 'password',
                        fieldLabel: 'password',
                        inputType: 'password'
                    }],
                    buttons: [{
                        text: 'login',
                        handler: function() {
                            loginForm.form.setValues({userName: '[email protected]', password: '123456'});
                        }
                    }]
                });
                var numberForm = new Ext.form.FormPanel({
                    title: 'Ext.form.field.Number.Sample',
                    bodyStyle: 'padding: 5 5 5 5',
                    renderTo: 'numberForm',
                    frame: true,
                    height: 350,
                    width: 550,
                    defaultType: 'numberfield',
                    defaults: {
                        labelSeparator: ':',
                        labelWidth: 80,
                        width: 200,
                        labelAlign: 'left',
                        msgTarget: 'side'
                    },
                    items: [{
                        fieldLabel: 'Int',
                        hideTrigger: true,
                        allowDecimals: false,
                        nanText: 'input valid number.'
                    }, {
                        fieldLabel: 'Float',
                        decimalPrecision: 2,
                        allowDecimals: true,
                        nanText: 'input valid number.'
                    }, {
                        fieldLabel: 'Limit number',
                        baseChars: '12345'
                    },{
                        fieldLabel: 'Limit number',
                        maxValue: 100,
                        minValue: 50
                    }]
                });
                function showValue(){
                    var memo = testForm.getForm().findField('memo');
                    alert(memo.getValue());
                };
            });
    </script>
</head>
<body>
    <div id='form'></div>
        <div id='formArea'></div>
        <div id='numberForm'></div>
        <div id='errorMsg'></div>

</body>
</html>
ExtJs之文本框及数字输入

ExtJs之文本框及数字输入

相关文章