ExtJs学习笔记11 - Window及Window中的布局

Window

复习一下，先来构造一个Window对象：

Js代码

Ext.onReady(function(){
var _window=new Ext.Window({
title:"New Person",
width:500,
height:100,
plain:true,
items:[
{}
],
buttons:[
{text:"OK"},
{text:"Cancel"}
]
});
_window.show();
});

Ext.onReady(function(){ var _window=new Ext.Window({ title:"New Person", width:500, height:100, plain:true, items:[ {} ], buttons:[ {text:"OK"}, {text:"Cancel"} ] }); _window.show(); });

和Panel很像吧，items:[{}]，如果没有指定defaultType，items中默认就是Panel类型

这时Panel的背景是白色，想要背景色和外面的Container统一，首先想到了Plain这个构造参数，但是看API中的Panel定义是没有Plain的，它提供了另外一种方式 baseCls ，

Js代码

items:[
{baseCls:"x-plain"}
],

items:[ {baseCls:"x-plain"} ],

指定baseCls值为“x-plain”，效果：

这样Panel的背景色和外部的Container就统一了

这样一个Window对象就构建成功了，但是Window对象里面什么也没有，往Window里面加一些内容。

列布局

Window中的Button：

Buttons 在Window是比较特殊的布局，总是在Window中所有元素的最下方，这里先说一下，Buttons是一组Button元素的集合，它的取值使用前面谈到的向下索引的方式可以实现：

Js代码

buttons:[
{
text:"OK",
handler:function(){
alert(this.ownerCt.buttons[1].text);
}
},
{text:"Cancel"}
]

buttons:[ { text:"OK", handler:function(){ alert(this.ownerCt.buttons[1].text); } }, {text:"Cancel"} ]

弹出结果是“Cancel”，是Buttons集合中第二个元素的文本。

下面来说其他的布局形式，在Window中加上两列：

Js代码

Ext.onReady(function(){
var _window=new Ext.Window({
title:"New Person",
width:500,
height:100,
plain:true,
items:[{
baseCls:"x-plain",
layout:"column",
items:[{
columnWidth:.5
},
{
columnWidth:.5
}
]
}],
buttons:[
{text:"OK"},
{text:"Cancel"}
]
});
_window.show();
});

Ext.onReady(function(){ var _window=new Ext.Window({ title:"New Person", width:500, height:100, plain:true, items:[{ baseCls:"x-plain", layout:"column", items:[{ columnWidth:.5 }, { columnWidth:.5 } ] }], buttons:[ {text:"OK"}, {text:"Cancel"} ] }); _window.show(); });

]

}

]

},{

fieldLabel:"ID",

width:"400"

},{

fieldLabel:"Address",

width:"400"

},{

fieldLabel:"Depart",

width:"400"

}],

showLock:false,

listeners:{

"show":function(_window){

if(!_window["showLock"]){

_window.findByType("textfield")[6].getEl().dom.src = "../../../image/default_pic.gif";

_window["showLock"]=true;

}

},

buttons:[

{

text:"OK",

handler:function(){

alert(this.ownerCt.buttons[1].text);

}

},

{text:"Cancel"}

]

});

_window.show();

});

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Window Layout</title> <link type="text/css" rel="stylesheet" href="../../../ext/resources/css/ext-all.css"> <script type="text/javascript" src="../../../ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../../../ext/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function(){ var _window=new Ext.Window({ title:"New Person", width:500, height:320, plain:true, layout:"form", defaultType:"textfield", labelWidth:45, bodyStyle:"padding-top: 10px; padding-left:10px;", defaults:{anchor:"100%"}, items:[{ xtype:"panel", baseCls:"x-plain", layout:"column", items:[{ columnWidth:.5, layout:"form", defaults:{xtype:"textfield", width:170}, labelWidth:45, baseCls:"x-plain", /*bodyStyle:"padding-top: 10px; padding-left:10px;",*/ items:[ {fieldLabel:"Name"}, {fieldLabel:"Gender"}, {fieldLabel:"Age"}, {fieldLabel:"Birth"}, {fieldLabel:"Phone"}, {fieldLabel:"Email"} ] }, { columnWidth:.5, layout:"form", style:"padding:10px 10px 0 10px", labelWidth:45, baseCls:"x-plain", items:[ { xtype:"textfield", inputType:"image", width:150, height:140, fieldLabel:"Photo" } ] } ] },{ fieldLabel:"ID", width:"400" },{ fieldLabel:"Address", width:"400" },{ fieldLabel:"Depart", width:"400" }], showLock:false, listeners:{ "show":function(_window){ if(!_window["showLock"]){ _window.findByType("textfield")[6].getEl().dom.src = "../../../image/default_pic.gif"; _window["showLock"]=true; } } }, buttons:[ { text:"OK", handler:function(){ alert(this.ownerCt.buttons[1].text); } }, {text:"Cancel"} ] }); _window.show(); }); </script> </head> <body> </body> </html>

转载：http://meizhi.javaeye.com/blog/460411