(三)ExtJs小例子之:带有输入框的提示框(prompt)

1.写ext代码之前,引入ext相关文件(由于所建文件不同,引入资源路径不经相同,但是红色字体部分必须一致)

<link rel="stylesheet" type="text/css" href="../ext1/resources/css/ext-all.css"/>
<script type="text/javascript" src="../ext1/adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="../ext1/ext-all.js"></script>

2.今天学习MessageBox(或 Msg)的prompt()方法。使用该方法后的弹出框带有输入框。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>extPrompt.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<link rel="stylesheet" type="text/css" href="../ext1/resources/css/ext-all.css"/>
	<script type="text/javascript" src="../ext1/adapter/ext/ext-base.js"></script>	
	<script type="text/javascript" src="../ext1/ext-all.js"></script>
	<script type="text/javascript">
		Ext.onReady(function(){
			//ext获得dom元素的方法。参数为元素的id值
			var testDiv = Ext.get("divTest");
			var testTxt = Ext.get("txtTest");
			var testButton = Ext.get("buttonTest");
			//含有value属性的值 dom.value,获得标签之间的值用dom.innerHTML
			alert(testDiv.dom.innerHTML+testTxt.dom.value+testButton.dom.innerHTML);
			//给testDiv绑定点击事件(这中绑定必须防砸)
			testDiv.on('click',function(){
				//修改ok按钮的值为:确认,默认为ok.
				Ext.Msg.buttonText.ok="确认";
				Ext.Msg.prompt("系统提示","请输入您的qq账号",callback);
			})
			function callback(but,txt){
				
				Ext.Msg.alert("提示", "您选择了" + but + ":您的QQ信息是" + txt );
			}
		})
	</script>
  </head>
  
  <body>
   	<div id="divTest">点击我进行prompt测试</div>
   	<input type="text" value="hello" id="txtTest">
   	<button id="buttonTest">点击</button>
  </body>
</html>
3.效果:






4.注意

(1)ext中获得html的dom元素的方法:Ext.get("dom元素的id属性的值")。并且这个方法必须放在Ext.onReady()中才起作用。

(2)ext中获得dom元素中值的方法:如果dom元素有value属性,则Ext.get("dom元素的id属性的值").dom.value;如何dom元素之间的值,则Ext.get("dom元素的id属性的值").dom.innerHTML.

 


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值