`
it_iweb
  • 浏览: 9558 次
  • 性别: Icon_minigender_1
  • 来自: 天津
文章分类
社区版块
存档分类
最新评论

将extjs时间组件,下拉框渲染到页面

 
阅读更多

extjs版本:Extjs2.1

往HTML页面的图片上指定位置渲染extjs时间卡及下拉框,代码:

主页面:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>将extjs时间组件,下拉框渲染到页面</title>
		<link rel="stylesheet" type="text/css" href="ext-2.1/resources/css/ext-all.css" />
		<script type="text/javascript" src="ext-2.1/ext-base.js"></script>
		<script type="text/javascript" src="ext-2.1/ext-all.js"></script>
		<script type="text/javascript" src="ext-2.1/ext-lang-zh_CN.js"></script>
		<script type="text/javascript" src="ext_render.js"></script>
		<style>
			.kcb{
				width:500px;
				height:700px;
				float:left;
				margin-left:700px;
				background:url(assets/images/kcb.png) no-repeat 0px 0px;
				position:relative;
			}
		</style>
	</head>

	<body>
		<div class="kcb">
		  <table width="100%" height="583" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td height="212" width="59"></td>
              <td width="61"></td>
              <td width="324"></td>
              <td></td>
            </tr>
            <tr>
              <td height="20"></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td height="26"></td>
              <td><div id="sj"/></td>
              <td><div id="kc"/></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </table>
		</div>
		<table>
			<tr>
				<td></td>
				<td></td>
			</tr>

		</table>
	</body>

</html>

extjs组件代码: 

Ext.onReady(function() {
	// 渲染日历卡
	var kcsj = new Ext.form.DateField({
		id: 'sjsle',
		emptyText: '',
		width: 60,
		height: 40,
		format: 'Y-m-d H:i:s'
	});
	kcsj.render(document.getElementById("sj"));
	// 渲染下拉框
	/*
	 * 1.创建数据源
	 * 2.创建下拉框组件
	 * 3.渲染到页面div
	 */
	var store = new Ext.data.SimpleStore({
		fields: ['id', 'mc'],
		data: [
			['1', '语文'],
			['2', '数学'],
			['3', '生物'],
			['4', '化学'],
			['5', '物理']
		]
	});
	var kcmc = new Ext.form.ComboBox({
		//id:'',
		fieldLabel: '课程名称',
		triggerAction: 'all',
		store: store,
		displayField: 'mc',
		valueField: 'mc',
		mode: 'local',
		forceSelection: true,
		resizable: true,
		typeAhead: true,
		value: '全部',
		handleHeight: 10,
		width: 324
	});
	kcmc.render(document.getElementById("kc"));
});

注:请看博客描述,更新一系列文章只是自己平时工作用到的东西,在博客上写一个小demo以作记录备份;有很多不完善之处,对你有用请拿走,请轻喷!

运行结果截图:


分享到：
| 弹出窗口js实现
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics