Extjs温习笔记（六）-完整的浮动窗口
日期：2014-05-16 浏览次数：20499 次
前面搞了这么久的基础，下面该来做这个界面了：
这是一个浮动窗口，可以在页面内到处拉动。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<title>登陆窗体</title>
<script type="text/javascript" src="../../adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="../../ext-all.js">
</script>
<script type="text/javascript" src="../../build/locale/ext-lang-zh_CN.js">
</script>
<script type="text/javascript">
Ext.onReady(function(){
var win = new Ext.Window({
title:"添加个人信息",
width:440,
layout:"form",
labelWidth:55,
plain:true,
bodystyle:"padding:5px",
height:370,
buttonAlign:"center",
defaults:{xtype:"textfield",width:360},
items:[{
xtype:"panel",
baseCls:"x-plain", //base class 基类，和plain:true效果差不多
layout:"column",
style:"padding:5px",
items:[{
baseCls:"x-plain",
columnWidth:.5,
layout:"form",
labelWidth:55,
defaults:{xtype:"textfield",width:115},
items:[{
fieldLabel:"姓名"
},{
fieldLabel:"年龄",
readOnly:true //只读
},{
xtype:"datefield",
fieldLabel:"出生日期",
value:new Date(),//也可"2010-10-1"
//readOnly:true, //这个一设置，都不能选择了
editable:false, //不可编辑
format:"Y-m-d", //格式化成：2010-10-30
listeners:{
"blur":function(){ //当失去焦点的时候就触发此事件
var dayDif = new Date().getFullYear()-this.getValue().getFullYear();
//把年龄设成今年和出生日期之差
this.ownerCt.findByType("textfield")[1].setValue(dayDif);
}
}
},{
fieldLabel:"联系电话"
},{
fieldLabel:"手机号码"
},{
fieldLabel:"电子邮件"
},{
fieldLabel:"性别",
xtype:"combo",
editable:false,//不可编辑
mode:"local",
value:"男",
triggerAction:"all",//如果上面设置了value的话，这个就是必须的，它默认值是query
displayField:"sex",//数据选择列，下面的store之后会讲，这里面只是稍微知道有这么一个东西就行了
store:new Ext.data.SimpleStore({
fields:["sex"],
data:[["男"],["女"]]
})
}]
},{
baseCls:"x-plain",
columnWidth:.5,
layout:"form",
labelWidth:45,
items:{
xtype:"textfield",
fieldLabel:"照片",
width:150,
height:150,
inputType:"image" //设置成图片
}
}]
},{
fieldLabel:"身份证号"
},{
fieldLabel:"个体地址"
},{
fieldLabel:"职务"
}],
buttons:[{
text:"确定"
},{
text:"取消"
}],
listeners:{
"show":function(win){ //用“render”的话getEl()取不到值，所以只能用show
win.findByType("textfield")[7].getEl().dom.src="conan.png";
}
}
}).show();
});
</script>
</head>
<body>
</body>
</html>
?其中有两个地方需要再解释：
?
1、getEl（）的官方解释
Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but that may be overridden using the autoEl config.
?
Note: this element will not be available until this Component has been rendered.
?
To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), see the listeners config for a suggestion, or use a render listener directly:
new Ext.Panel({
?? ?title: 'The Clickable Panel',
?? ?listeners: {
?? ? ? ?render: function(p) {
?? ? ? ? ? ?// Append the Panel to the click handler's argument list.
?? ? ? ? ? ?p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
?? ? ? ?},
?? ? ? ?single: true ?// Remove the listener after first invocation
?? ?}
});
Para
