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

最新推荐文章于 2021-05-31 07:29:33 发布
最新推荐文章于 2021-05-31 07:29:33 发布
阅读量1.8k 收藏
点赞数
分类专栏： ExtJS 2.0 文章标签： html ext class stylesheet div 日历
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fengkuanghun/article/details/3532143
版权
ext 2.0 渲染HTML表单 (含中文版日期选单控件)

08.jpg

<!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,
  width : 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>
fengkuanghun
关注
专栏目录
【Ext2.0】只有月份的日期控件
04-11
【Ext2.0】只有月份的日期控件 在网页应用开发中，用户界面的交互性和易用性是至关重要的。对于日期相关的输入，我们常常会遇到需要用户选择月份而不是具体日期的情况。Ext JS是一个强大的JavaScript组件库，它提供...
Ext.form表单中各种属性应用详解！
花开的声音
11-27 165
Ext.form.NumberField 继承自Ext.form.TextField,因为Ext.form.TextField虽然强大,但写起来的确还是有点麻烦,后面的类都继承自Ext.form.TextField,没有自定义的方法,属性和事件 config定义为{ allowDecimals : Boolean //true allowNegative : Boo...
Ext.form.ComboBox 属性详解及使用方法介绍和级联使用
热门推荐
南极光经验分享
07-18 2万+
Ext.form.ComboBox 属性详解（见注释）及使用方法定义一个ComboBox： Wayfoon.YearComb = new Ext.form.ComboBox({    id:cbid,    name:year,//name只是改下拉的名称     hiddenName:hyear,//提交到后台的input的name     width
qt5开发及实例第四版代码_Qt 5.15 LTS发布，Qt 6要来了
weixin_39603132的博客
11-16 1040
Qt 5.15 LTS 已经发布了，这是 Qt 5 系列的最后一个功能版本，为下一个主要版本 Qt 6 做了大量准备工作。此版本将为所有商业许可证持有者提供三年的长期支持，在三年的支持期后，可以选择提供扩展支持，而对于开源用户，它将以与其它常规 Qt 版本相同的方式得到支持，直到 Qt 6 发布为止。此版本亮点包括：抽象 3D 图形 API过去的一年中，开发团队一直在努力对图形技术栈的架...
Extjs 登录界面源码
weixin_33858485的博客
07-16 101
17ext.com上的，本来有很多，我精简了一部分，把其他国家的精简掉了，很多朋友说不显示中文，中文显示为乱码，我修改的这个好像没有乱码此代码仅供新手学习，老鸟请绕道效果图如下Ext.ux.form.IconCombo.js1//JS脚本2Ext.namespace('Ext.ux.form');34Ext.ux.form.IconCombo=Ext.extend(Ext.form...
Ext Form全攻略1
小S
10-21 2522
1 Form概述Formpanel是一个重要的页面组件，在具体的应用开发中，信息的添加和修改，数据的提交和加载， 都离不开formpanel的支持。Formpanel自动实现了form布局模式。　　虽然没有列出的选项,配置FormPanel一样,FormPanel类还接受了所有的配置选项要求配置内部Ext.form.BasicForm为文件上传或提供的功能,验证并递交了加载形式。　　注:如果子类F
Ext2.0学习入门
07-22
资源名称：Ext2.0学习入门资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
ext 4.0 日期选择控件 时分秒 中文版
04-12
这个"EXT 4.0 日期选择控件 时分秒 中文版"显然是一个经过本地化处理的版本，支持中文显示，并且在选择日期的同时还能选择具体的时间，精确到时、分、秒。 日期选择控件在Web应用中非常常见，用于用户输入或选择...
ext2.0 DateTimeField控件
06-09
在EXT JS 2.0框架中，DateTimeField控件是一个非常实用的组件，它扩展了基本的DateField控件，提供了更丰富的日期时间选择功能，包括小时、分钟和秒的显示与选择。这个控件是为了解决用户需要输入精确到秒的日期时间...
JSP+EXt2.0实现分页的方法
10-23
EXt2.0是一个基于Ext JS框架的组件库，它包含了一系列可重用的用户界面组件，使开发者可以快速构建富互联网应用（RIA）。在WEB开发中，实现数据分页是一种常见需求，可以让用户更加方便地浏览和管理大量数据。 在这...
ext中加载html,ExtJS中更新html内容以及iframe中内容打印
weixin_29601703的博客
05-31 525
工作一年多来，最近的开发，虽说前台和后台都有分工，但是大部分经历都放在前台，界面上有太多的东西需要修改和完善，调试程序更是需要更多的时间，最近的工作在用xsl写样式将xml中的内容显示在界面上，而我们的界面是基于Extjs的，这样我们就在panel中使用html属性，获取内容显示，这样就存在一个问题，当我们需要更新panel中的内容时该怎么办，换面板是一个可以实现目标的方法，但是这似乎又是很笨的方...
获取form里面的field的三种方法
小宝
06-25 3445
1)Ext.getCmp('id');2)FormPanel.getForm().findField('id/name');3)Ext.get('id/name');//前提是FormPanel在界面上显示出来了
ExtJs_Ext.form.Field解说
cenyebao的专栏
09-16 5437
/*!  * Ext JS Library 3.3.0  */ /**  * @class Ext.form.Field  * @extends Ext.BoxComponent  * Base class for form fields that provides
Ext.form.ComboBox使用方法介绍和级联使用
ghjzzhg的博客
02-22 1302
Ext.form.ComboBox 属性详解（见注释）及使用方法 定义一个ComboBox：   Wayfoon.YearComb = new Ext.form.ComboBox({     id:'cbid',     name:'year',//name只是改下拉的名称     hiddenName:'hyear',//提交到后台的input的name     w
模仿extjs风格写的jquery combobox
做你自己喜欢的事情。
09-01 162
[code="js"] (function($) { jQuery.fn.combobox = function(options){ var defaults = { dynamic:false, dataurl:'', imgsrc:"./images/s.gif", width: 162, data : [{text:"text",value...
Ext框架的Grid使用介绍
LightSun----让成功成为可能!
12-18 1万+
Ext2.0是一个JS框架，它的Grid控件和其它可以显示数据的控件，能够支持多种数据类型，如二维数组、Json数据和XML数据，甚至包括我们自定义的数据类型。Ext为我们提供了一个桥梁Ext.data.Store，通过它我们可以把任何格式的数据转化成grid可以使用的形式，这样就不需要为每种数据格式写一个grid的实现了。首先，一个表格应该有列定义，即定义表头ColumnModel：//
EXT 二级联动下拉列表
LightSun----让成功成为可能!
12-08 3327
page.html代码如下>    html>    head>      title>省份与城市联动的例子title>        meta http-equiv="content-type" content="text/html; charset=utf-8">      link rel="stylesheet" type="text/css" href="../../../r
EXT form表单提交 window中显示
LightSun----让成功成为可能!
12-05 3308
/添加人员表单var addPersonForm = new Ext.FormPanel({        baseCls:         x-plain,        labelWidth:     65,        labelAlign :     right,        bodyStyle :         padding-top:5px, 
extJs之下拉框联动
LightSun----让成功成为可能!
12-08 2774
首先,两个下拉框,第一个下拉框首先load数据源,在select的事件中在load第二个数据源,这就是一个简单的二级联动的实现原理了.Js代码 //  第一个下拉框  var parentStore = new Ext.data.Store({      proxy: new Ext.data.HttpProxy({          url: loadByParentid.action?p
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值