258
技術社區[雲棲]
Ext4.0中window窗體使用詳解(常用屬性)
先看看效果圖
首先在jsp中導入一下文件
<link rel="stylesheet" type="text/css" href="<%= path %>/extJs/resources/css/ext-all.css">
<script type="text/javascript" src="<%= path %>/extJs/ext-all.js"></script>
下麵看源碼，源碼中有注釋，有看不懂的請聯係博主。
<script type="text/javascript">
Ext.onReady(function(){
Ext.create('Ext.window.Window', {
title: 'Hello',//標題
titleAlign : 'center',//標題顯示位置
//titleCollapse : true,
height: 200,//高度
width: 400,//寬度
layout: 'fit',//填充布局
//activeItem:0,//默認激活itmes中的第0個項目
autoScroll:true,//容器過高或者過寬時，窗體自動顯示滾動條
baseCls : 'x-window',//默認樣式
bbar: [
{ xtype: 'button', text: 'Button 1' }
],//在窗體下方顯示工具按鈕
fbar: [
{ type: 'button', text: 'Button 3' }
],//左邊工具欄
lbar : [
{ type: 'button', text: 'Button 4' }
],//左邊工具欄
rbar : [
{ type: 'button', text: 'Button 5' }
],//右邊工具欄
tbar : [
{ type: 'button', text: 'Button 5' }
],//上邊工具欄
bodyBorder : true,//顯示邊框
bodyCls: ['foo', 'bar'],//窗體樣式
bodyPadding : '5 5 5 5',//內邊距
bodyStyle: {
background: '#ffc',
padding: '10px'
},//窗體樣式
border: 5,//邊框
style: {
borderColor: 'red',
borderStyle: 'solid'
},//邊框樣式
bubbleEvents : ["add", "remove"],//冒泡事件
buttonAlign : 'center',//按鈕排放位置,居中
buttons:[
{xtype: 'button', text: 'Button 2'}
],
closable : false,//隱藏右上角close關閉按鈕
closeAction : 'destroy' ,//關閉窗體時,銷毀
cls:'',//class樣式,默認為空
collapsible : true,//可折疊
//collapsed : false,折疊狀態
//columnWidth : 100,//列布局時的列寬
constrain : true,//設置窗體活動區域不能超過瀏覽器內容區域
//constrainHeader : true,設置窗體活動區域可以移動超過瀏覽器下方
//constrainTo : Ext.getBody(),//設置窗體隻能在body部分
//disabled : false,//禁用
//draggable : false,//禁止拖動
frame : true,//設置為應用框架
formBind : false,//綁定form
hideCollapseTool : true,//隱藏關閉，顯示工具欄
//html : '<h1>我是內容html</h1>',
id : 'windowsId',//id唯一標識
items: {
id:'demo0',
xtype: 'grid',
border: false,
columns: [{header: 'World'}],
store: Ext.create('Ext.data.ArrayStore', {})
},//
listeners: {
click: {
element: 'el', //
fn: function(){ alert('click el'); }
},
dblclick: {
element: 'body', //
fn: function(){ alert('dblclick body'); }
}
},//監聽事件
// margin : '5 5 5 5',//外邊框
//maxHeight : 500,//最大高度
//maxWidth : '500',//最大寬度
//minHeight : 500,//最小高度
//minWidth : 300,//最小寬度
modal : true,//顯示遮罩層
//padding : '5 5 5 5',//內邊距
//region : 'north'//border布局顯示的位置
//renderTo:Ext.getBody(),//顯示位置
}).show();
});
</script>
最後更新：2017-04-03 12:54:03