ext 2.0 渲染HTML表单 (含中文版日期选单控件)

zoukankan html css js c++ java

ext 2.0 渲染HTML表单 (含中文版日期选单控件)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ext form render</title>
<link rel='stylesheet' href='ext-all.css'>
<style type='text/css'> .x-form-field-wrap {}{display:inline;} /**//* display DateFields inline */ .x-form-field-wrap .x-form-date-trigger-nonie {}{top:-1px;} /**//* remove 1px top padding for non-IE browsers */ </style>
<link rel="stylesheet" type="text/css"
    href="framework/ext-2.0.2/resources/css/ext-all.css" />
<script type="text/javascript"
    src="framework/ext-2.0.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="framework/ext-2.0.2/ext-all.js"></script>
<script type="text/javascript"
    src='framework/ext-2.0.2/adapter/yui-utilities.js'></script>
</head>
<body>
<div class="x-box-tl">
<div class="x-box-tr">
<div class="x-box-tc"></div>
</div>
</div>
<div class="x-box-ml">
<div class="x-box-mr">
<div class="x-box-mc">
<form id="form2" method="post">
<h3>表单范例</h3>
<table>
    <tr>
        <td class="title">文字输入：</td>
        <td style="font-family: verdana;"><input type="text" id="tf"
            name="text2" /></td>
    </tr>
    <tr>
        <td class="title">下拉选单：</td>
        <td style="font-family: verdana;"><select id="cb" name="st2">
            <option></option>
            <option>Aeiou</option>
            <option>Andy</option>
            <option>Amy</option>
            <option>Aloha</option>
            <option>Apple</option>
            <option>Application</option>
            <option>Aprik</option>
            <option>Backup</option>
            <option>Book</option>
        </select></td>
    </tr>
    <tr>
        <td class="title">日期选择：</td>
        <td style="font-family: verdana;"><input type="text" id="df"
            name="df" /></td>
    </tr>
    <tr>
        <td class="title">多行输入：</td>
        <td><textarea id="ta2" name="ta" cols="50" rows="6"></textarea></td>
    </tr>
    <tr>
        <td class="title"></td>
        <td>
        <div id="btn"></div>
        </td>
    </tr>
</table>
</form>
</div>
</div>
</div>
<div class="x-box-bl">
<div class="x-box-br">
<div class="x-box-bc"></div>
</div>
</div>
</body>
</html>
<script type='text/javascript'>

Ext.onReady(function(){
    // 定义表单
    userForm = new Ext.form.BasicForm('form2');
    // 渲染输入框
    var tf = new Ext.form.TextField({
        applyTo: 'tf',
        id: 'tf',
        allowBlank: false,
         340
    });
    // 渲染下拉框
    var cb = new Ext.form.ComboBox({
        transform: 'cb'
    });
    // 渲染日历框
    var df = new Ext.form.DateField({
        applyTo: 'df',
        timePicker: true
    });
    // 渲染文本域
    var ta = new Ext.form.TextArea({
        applyTo: 'ta'
    });
    var btn = new Ext.Button({
        applyTo: 'btn',
        text: '提交'
    });
    userForm.add(tf);
    userForm.add(df);
    userForm.add(cb);
    // 覆写日历
    Date.dayNames = ["日", "一", "二", "三", "四", "五", "六"];
    if (Ext.DatePicker) {
        Ext.apply(Ext.DatePicker.prototype, {
            todayText: "今天",
            minText: "日期在最小日期之前",
            maxText: "日期在最大日期之后",
            disabledDaysText: "",
            disabledDatesText: "",
            monthNames: Date.monthNames,
            dayNames: Date.dayNames,
            nextText: '下月 (Control+Right)',
            prevText: '上月 (Control+Left)',
            monthYearText: '选择一个月 (Control+Up/Down 来改变年)',
            todayTip: "{0} (Spacebar)",
            okText: "确定",
            cancelText: "取消",
            format: "y年m月d日"
        });
    }
});
</script>

查看全文

相关阅读:
docker logs－查看docker容器日志
 初探 Elasticsearch，学习笔记第一讲
 Centos7 环境下设置固定IP
强制使用索引查询方法
 linux 常用命令
 MySQL 调优
 docker 常用命令
 mysql 创建临时表
 mysql or in union all 使用方法
 mysql 创建存储过程

原文地址：https://www.cnblogs.com/meetrice/p/1206027.html