Ext學習筆記5-window窗體
14-Ext_Window
示例程式碼1:
Ext.onReady(function(){
//var lp = new LP();
//lp.render(Ext.getBody());
var _loginBox = new Ext.Window({
title : '登陸',
width : 265,
deferHeight:true,//true表示根據外接的組建計算高度,false表示允許該組建自行設定高度,預設為false
resizable:false, //是否可以調整大小寫
closable:true, //是否有右上角的關閉按鈕
collapsible:true,//是否可以摺疊,右上角的摺疊按鈕
animCollapse:false,//摺疊時,是否有動畫效果,預設為有
minimizable:true, //是否有最小化按鈕,需要自己實現最小化功能
maximizable:true, //是否現實最大化按鈕
closeAction:'close',//點選關閉按鈕是觸發的事件,預設為先hide後close,如果設定其為close那麼也是先hide後close
hideMode:'display', //這個組建是怎麼隱藏的.可支援的值有visibility,offsets(偏移),預設為display
//draggable:false, //是否允許拖動window,預設為true
//constrain:true,//約束window在檢視內顯示,預設為false,即不約束
constrainHeader:true,//約束window拖手在檢視內現實,預設為false,即不約束
//plain:true, //使內部的背景色接近與外面
//headerAsText:false, //是否現實頭部標題,預設為true
layout:'form',
frame:true,
labelWidth : 57,
labelAlign : 'right',
buttonAlign :'center',
minButtonWidth:70,//此皮膚上按鈕的最小寬度,預設為75
//defaultType:'textfield',//容器的預設型別,預設為panel
defaults : {xtype:'textfield',width:150},
bodyStyle:'padding:5px;',
listeners:{
'show':function(){alert("show事件");}, //擁有show事件
'hide':function(){alert("hide事件");}, //擁有hide事件 點選關閉(右上角X)也會觸發hide事件
'close':function(){alert("close事件");}, //擁有close事件 點選關閉按鈕時,也會啟用close事件
'minimize':function(){alert("minimize最小化事件")}, //擁有最小化事件
'maximize':function(){alert("maximize最大化事件")}, //擁有最大化事件 最大化後復原,有復原事件
'restore':function(){alert("restore最大化後復原事件")}, //最大化後復原事件
'collapse':function(){alert("collapse摺疊事件")} //摺疊事件
},
items:[{ //此容器的組建集合
id : 'username',
fieldLabel : '使用者名稱'
},{
id : 'password',
fieldLabel : '密 碼'
}],
buttons:[{ //此容器的按鈕集合
text : '登陸',
handler:function(){
alert(String.format('使用者名稱是:{0}\n密碼是:{1}',Ext.getCmp('username').getValue(),Ext.getCmp('password').getValue()));
}
},{
text:'註冊',
handler : function(){
alert('註冊');
}
},{
text : '退出',
handler:function(){
_loginBox.hide();
}
}]
});
_loginBox.show('hello');
})
示例程式碼2:
Ext.onReady(function(){
var _window = new Ext.Window({
title:'測試',
layout:'form',
width:250,
labelWidth:60,
labelAlign:'right',
buttonAlign:'center',
bodyStyle:'padding:5px;',
defaults:{xtype:'textfield',width:140},
items:[{
id:'text1',
fieldLabel:'帳戶'
},{
id:'text2',
fieldLabel:'密碼'
}],
buttons:[{
text:'按鈕',
handler:function(){
// alert(Ext.getCmp('text1').getValue()); 第一種得到容器內組建的辦法,通過id
// alert(this.ownerCt.items.first().getValue()); //ownerCt屬性,可以得到包含他的容器組建,容器訪問其組建,可以使用items
var _collection = this.ownerCt.items;
alert(String.format('帳戶:{0},密碼:{1}',_collection.itemAt(0).getValue(), _collection.itemAt(1).getValue() ));
/*
這裡的items屬性返回的是MixedCollection集合
MixedCollection中的方法:
first() 集合的第一個元素
itemAt(Number index) 根據索引找到item元素
*/
}
}]
});
_window.show();
})
綜合示例
Ext.BLANK_IMAGE_URL = './ext/resources/images/default/s.gif';
Ext.onReady(function(){
Ext.get('btn').on('click',function(){
_window.show('btn');
});
var JOB = Ext.data.Record.create([{
name:'job'
}]);
var _window = new Ext.Window({
title:'新增人員',
width:500,
// height:400,
closeAction:'hide',
resizable:false,
plain:true, //window有該屬性
items:[{
baseCls:'x-plain',//panel沒有plain屬性,所以只能使用該樣式
layout:'column',
style:'padding:5px;',
items:[{
columnWidth:.5,
layout:'form',
defaultType:'textfield',
labelWidth:55,
//labelAlign:'right',
defaults:{width:160},
baseCls:'x-plain', //panel沒有plain屬性,所以只能使用該樣式
items:[{
fieldLabel:'姓名'
},{
fieldLabel:'年齡',
value:26,
id:'age',
readOnly:true
},{
xtype:'datefield',
fieldLabel:'出生日期',
format:'Y-m-d', //format方法
value:'1984-05-17', //預設值 這裡需要注意的是:日期和月份為雙數
minValue:'1970-01-01',
maxValue:'2000-01-01', //最大最小日期 預設為null
readOnly:true, //只讀
listeners:{
'blur':function(_df){
/*
這裡做了一個 出生日期 和 年齡 的級聯
*/
var _age = _df.ownerCt.findById('age'); //獲得年齡(age)框裡的值
_age.setValue(new Date().getFullYear() - _df.getValue().getFullYear());
}
}
},{
fieldLabel:'聯絡電話'
},{
fieldLabel:'手機號碼'
},{
fieldLabel:'電子郵件'
},{
fieldLabel:'性別',
xtype:'combo',
width:100,
readOnly:true,
triggerAction:'all', //該屬性值預設為query,即:按照文字里面已有的內容進行匹配顯示
store:new Ext.data.SimpleStore({ //設定資料
fields:['sex'],
data:[['男'],['女']]
}),
mode:'local', //combobox的讀取模式 有local和remote(遠端)
displayField:'sex' //指定其現實的列
}]
},{
columnWidth:.5,
layout:'form',
baseCls:'x-plain', //panel沒有plain屬性,所以只能使用該樣式
labelWidth:60,
items:[{
id:'personImg',
xtype:'textfield',
inputType:'image', //textfield 中的inputType 可以是 image,password,或者file
fieldLabel:'個人照片' ,
width:150,
height:175,
style:'border:solid 2px #fcf'
}]
}]
},{
layout:'form',
defaultType:'textfield',
style:'padding:5px;',
baseCls:'x-plain', //panel沒有plain屬性,所以只能使用該樣式
labelWidth:55,
defaults:{
width:395
// anchor:'90%' //錨點佈局
},
items:[{
fieldLabel:'身份證號'
},{
fieldLabel:'具體地址'
},{
xtype:'panel',
anchor:'93%',
baseCls:'x-plain',
layout:'column',
items:[{
columnWidth:.48,
layout:'form',
labelWidth:55,
baseCls:'x-plain',
defaults:{xtype:'combo'},
items:[{
xtype:'combo',
id:'job',
fieldLabel:'職位',
width:140,
triggerAction:'all',
readOnly:true,
store:new Ext.data.SimpleStore({
fields:['job'],
data:[['軟體工程師'],['硬體工程師'],['網路工程師']]
}),
displayField:'job',
mode:'local',
listeners:{
'select':function(_combo, _record, _index){ //select 只有在選中選項時才觸發,setValue不會觸發該事件
// alert(_record.get('job'));
_combo['selectItem'] = _record;
}
}
}]
},{
columnWidth:.17,
baseCls:'x-plain',
style:'float:left',
defaults:{xtype:'button'},
items:[{
text:'新增職位',
handler:function(_df){
var _window = _df.ownerCt.ownerCt;
var _job = _window.findById('job');
Ext.Msg.prompt('請輸入職位的名稱','職位名稱',function(_btn, _msg){ //prompt組建中的函式 第一個引數可以獲得點選了那個按鈕,第二個引數可以獲得輸入的值
if(_btn == 'ok'){
var _store = this.store;
var _newStoreItem = new JOB({
job:_msg
});
_store.insert(0,_newStoreItem);
this.setValue(_msg);
this['selectItem'] = _newStoreItem;
}
},_job);
}
}]
},{
columnWidth:.17,
baseCls:'x-plain',
items:[{
xtype:'button',
text:'修改職位',
handler:function(){
var _window = this.ownerCt.ownerCt;
var _job = _window.findById('job');
if(_job['selectItem'] != null)
{
Ext.Msg.prompt('請輸入修改後的職位名稱','職位名稱',function(_btn, _msg){ //prompt組建中的函式 第一個引數可以獲得點選了那個按鈕,第二個引數可以獲得輸入的值
if(_btn == 'ok'){
this['selectItem'].set('job',_msg);
this.setValue(_msg);
}
},_job,false,_job.getValue());
}
}}]
},{
columnWidth:.17,
baseCls:'x-plain',
items:[{
xtype:'button',
text:'刪除職位',
handler:function(){
var _window = this.ownerCt.ownerCt;
var _job = _window.findById('job');
if(_job['selectItem'] != null)
{
Ext.Msg.confirm('系統提示','你確認刪除當前職位嗎?',function(_btn){
if(_btn == 'yes'){
this.store.remove(this['selectItem']); //刪除
if(_job.store.getCount() >0){ //getCount()可以獲得store中recode的數量
this.setValue(this.store.getAt(0).get('job'));
this['selectItem'] = this.store.getAt(0);
}else{
this.setValue('');
this['selectItem'] = null;
}
}
},_job);
}
}
}]
}]
}]
}],
showLocal:false, //自定義屬性,以防止載入多次圖片
listeners:{
/*
重要說明: 由於window內部的組建是在window show的時候才將其內部的dom元素插入頁面而不是render時
*/
'show':function(_df){
if(!_window['showLocal'])
{
alert('載入圖片');
_window.findById('personImg').getEl().dom.src='img/P1060188.JPG';
// _window.findByType('textfield')[7].getEl().dom.src='img/P1060188.JPG'; //所有容器都有方法findByType('xtype')[n] 可以找到容器內的item元素
_window['showLocal']=true; //將showLocal自定義屬性設定為true 那麼下次再show的時候就不會再重新載入了
}
var _job = _df.findById('job');
var _store = _job.store; //通過combo的屬性得到其 store
_job.setValue(_store.getAt(0).get('job')); //設定初始值: _store.getAt(0)得到一行資料 get('列名') 獲得具體的值
//Ext.getCmp('personImg').
_job['selectItem'] = _store.getAt(0);
}
},
buttons:[{
text:'確定',
handler:function(){
alert('第二個按鈕是:'+_window.buttons[1].text); // Ext中buttons返回的是button陣列
}
},{
text:'取消',
handler:function(){
_window.hide();
}
}]
});
});
綜合示例2:
/// <reference path="../ext/vswd-ext_2.0.2.js" />
Ext.BLANK_IMAGE_URL = './ext/resources/images/default/s.gif';
Ext.QuickTips.init();//初始化提示資訊
Ext.form.Field.prototype.msgTarget="side";//讓提示資訊在邊上顯示
Ext.onReady(function(){
Ext.applyIf(Ext.form.VTypes, {
"telphone":function(_v){ //驗證函式 返回true or false
return /(^\d{3}\-\d{7,8}$)|(^\d{3}\d{7,8}$)|(^\d{4}\d{7,8}$)|(^\d{7,8}$)/.test(_v);
},
"telphoneText":"該輸入項必須是電話號碼格式,格式如: 0514-87315143,051487315143,87315143", //上面函式返回false時返回的提示
"telphoneMask":/[0-9\-]/i, //xxxMask為鍵盤可以輸入的鍵
"mobile":function(_v){ //驗證函式 返回true or false
return /^1[1-9][0-9]\d{8}$/.test(_v);
},
"mobileText":"該輸入項必須是手機號碼格式,格式如: 13952569274", //上面函式返回false時返回的提示
"mobileMask":/[0-9]/i //xxxMask為鍵盤可以輸入的鍵
})
var JOB = Ext.data.Record.create([{
name:'job'
}]);
var _window = new Ext.form.FormPanel({
renderTo:Ext.getBody(),
title:'新增人員',
waitMsgTarget:true, //將等待進度條限制到該元件範圍內
url:'http://localhost:8080/test/test_ajax.do', //url
listeners:{
'requestcomplete':function(_form, _action){ //回撥函式
alert(_action.response.responseText);
}
},
errorReader:new Ext.data.XmlReader({ //reader
record:''
},[]),
frame:true,
width:500,
// height:400,
closeAction:'hide',
resizable:false,
plain:true, //window有該屬性
buttonAlign:'right',
items:[{
baseCls:'x-plain',//panel沒有plain屬性,所以只能使用該樣式
layout:'column',
style:'padding:5px;',
items:[{
columnWidth:.5,
layout:'form',
defaultType:'textfield',
labelWidth:55,
//labelAlign:'right',
defaults:{width:160},
baseCls:'x-plain', //panel沒有plain屬性,所以只能使用該樣式
items:[{
name:'username',
fieldLabel:'姓名',
emptyText:'請輸入姓名',
regex:/^[\u4e00-\u9FA5]+$/,
regexText:'只能輸入漢字',
allowBlank:false,
maxLength:4,
minLength:2
},{
fieldLabel:'年齡',
value:26,
id:'age',
readOnly:true
},{
xtype:'datefield',
fieldLabel:'出生日期',
format:'Y-m-d', //format方法
value:'1984-05-17', //預設值 這裡需要注意的是:日期和月份為雙數
minValue:'1970-01-01',
maxValue:'2000-01-01', //最大最小日期 預設為null
readOnly:true, //只讀
listeners:{
'blur':function(_df){
/*
這裡做了一個 出生日期 和 年齡 的級聯
*/
var _age = _df.ownerCt.findById('age'); //獲得年齡(age)框裡的值
_age.setValue(new Date().getFullYear() - _df.getValue().getFullYear());
}
}
},{
fieldLabel:'聯絡電話',
vtype:'telphone'
},{
fieldLabel:'手機號碼',
vtype:'mobile'
},{
fieldLabel:'電子郵件',
vtype:'email'
},{
fieldLabel:'性別',
xtype:'combo',
width:100,
readOnly:true,
triggerAction:'all', //該屬性值預設為query,即:按照文字里面已有的內容進行匹配顯示
store:new Ext.data.SimpleStore({ //設定資料
fields:['sex'],
data:[['男'],['女']]
}),
mode:'local', //combobox的讀取模式 有local和remote(遠端)
displayField:'sex' //指定其現實的列
}]
},{
columnWidth:.5,
layout:'form',
baseCls:'x-plain', //panel沒有plain屬性,所以只能使用該樣式
labelWidth:60,
items:[{
id:'personImg',
xtype:'textfield',
inputType:'image', //textfield 中的inputType 可以是 image,password,或者file
fieldLabel:'個人照片' ,
width:150,
height:175,
style:'border:solid 2px #fcf',
listeners:{
'render':function(){
this.getEl().dom.src='img/P1060188.JPG';
}
}
}]
}]
},{
layout:'form',
defaultType:'textfield',
style:'padding:5px;',
baseCls:'x-plain', //panel沒有plain屬性,所以只能使用該樣式
labelWidth:55,
defaults:{
width:395
// anchor:'90%' //錨點佈局
},
items:[{
fieldLabel:'身份證號'
},{
fieldLabel:'具體地址'
},{
xtype:'panel',
anchor:'93%',
baseCls:'x-plain',
layout:'column',
items:[{
columnWidth:.48,
layout:'form',
labelWidth:55,
baseCls:'x-plain',
defaults:{xtype:'combo'},
items:[{
xtype:'combo',
id:'job',
fieldLabel:'職位',
width:140,
triggerAction:'all',
readOnly:true,
store:new Ext.data.SimpleStore({
fields:['job'],
data:[['軟體工程師'],['硬體工程師'],['網路工程師']]
}),
displayField:'job',
mode:'local',
listeners:{
'select':function(_combo, _record, _index){ //select 只有在選中選項時才觸發,setValue不會觸發該事件
// alert(_record.get('job'));
_combo['selectItem'] = _record;
}
}
}]
},{
columnWidth:.17,
baseCls:'x-plain',
style:'float:left',
defaults:{xtype:'button'},
items:[{
text:'新增職位',
handler:function(_df){
var _window = _df.ownerCt.ownerCt;
var _job = _window.findById('job');
Ext.Msg.prompt('請輸入職位的名稱','職位名稱',function(_btn, _msg){ //prompt組建中的函式 第一個引數可以獲得點選了那個按鈕,第二個引數可以獲得輸入的值
if(_btn == 'ok'){
var _store = this.store;
var _newStoreItem = new JOB({
job:_msg
});
_store.insert(0,_newStoreItem);
this.setValue(_msg);
this['selectItem'] = _newStoreItem;
}
},_job);
}
}]
},{
columnWidth:.17,
baseCls:'x-plain',
items:[{
xtype:'button',
text:'修改職位',
handler:function(){
var _window = this.ownerCt.ownerCt;
var _job = _window.findById('job');
if(_job['selectItem'] != null)
{
Ext.Msg.prompt('請輸入修改後的職位名稱','職位名稱',function(_btn, _msg){ //prompt組建中的函式 第一個引數可以獲得點選了那個按鈕,第二個引數可以獲得輸入的值
if(_btn == 'ok'){
this['selectItem'].set('job',_msg);
this.setValue(_msg);
}
},_job,false,_job.getValue());
}
}}]
},{
columnWidth:.17,
baseCls:'x-plain',
items:[{
xtype:'button',
text:'刪除職位',
handler:function(){
var _window = this.ownerCt.ownerCt;
var _job = _window.findById('job');
if(_job['selectItem'] != null)
{
Ext.Msg.confirm('系統提示','你確認刪除當前職位嗎?',function(_btn){
if(_btn == 'yes'){
this.store.remove(this['selectItem']); //刪除
if(_job.store.getCount() >0){ //getCount()可以獲得store中recode的數量
this.setValue(this.store.getAt(0).get('job'));
this['selectItem'] = this.store.getAt(0);
}else{
this.setValue('');
this['selectItem'] = null;
}
}
},_job);
}
}
}]
}]
}]
}],
showLocal:false, //自定義屬性,以防止載入多次圖片
listeners:{
/*
重要說明: 由於window內部的組建是在window show的時候才將其內部的dom元素插入頁面而不是render時
*/
/*
'show':function(_df){
if(!_window['showLocal'])
{
_window.findById('personImg').getEl().dom.src='img/P1060188.JPG';
// _window.findByType('textfield')[7].getEl().dom.src='img/P1060188.JPG'; //所有容器都有方法findByType('xtype')[n] 可以找到容器內的item元素
_window['showLocal']=true; //將showLocal自定義屬性設定為true 那麼下次再show的時候就不會再重新載入了
}
var _job = _df.findById('job');
var _store = _job.store; //通過combo的屬性得到其 store
_job.setValue(_store.getAt(0).get('job')); //設定初始值: _store.getAt(0)得到一行資料 get('列名') 獲得具體的值
//Ext.getCmp('personImg').
_job['selectItem'] = _store.getAt(0);
}
*/
},
buttons:[{
text:'確定',
handler:function(){
this.ownerCt.getForm().submit({waitTitle:'提交',waitMsg:'資料提交中'}); //提交
}
},{
text:'匯入',
handler:function(){
//this.ownerCt.getForm().load(); //載入--還沒有實現
//Ext.Msg.alert('系統提示','該功能還未實現!');
/* var _store = new Ext.data.Store();
var _data = ['name','sex']; //欄位名陣列
var _record = new Ext.data.Record(_data); //建立record
_record.set("name","王五"); //向_record中放值
_record.set("sex","男");
_store.add(_record);
alert('_store中有'+_store.getCount()+'條資料');
alert("姓名 : "+_store.getAt(0).get("name"));
*/
}
},{
text:'取消',
handler:function(){
this.ownerCt.getForm().reset();//reset
}
}]
});
});
相關文章
- Ext2.x學習筆記筆記
- 智慧窗-學習筆記（二）筆記
- iOS學習筆記--PresentedVC自定義彈窗iOS筆記
- 學習筆記（三十）：ArkUi-UIContext.getPromptAction(彈窗)筆記UIContext
- 學習筆記（四十七）：@ohos.window (視窗)筆記
- 學習筆記（二十七）：ArkUi-警告彈窗（AlertDialog）筆記UI
- vim學習筆記——多檔案、多視窗編輯筆記
- GO 學習筆記->結構體Go筆記結構體
- HexMap學習筆記(八)——水體筆記
- 【軟體測試】學習筆記筆記
- numpy的學習筆記\pandas學習筆記筆記
- 學習筆記（二十八）：ArkUi-自定義彈窗 (CustomDialog)筆記UI
- 整體二分學習筆記筆記
- 2020.09.29 軟體需求工程學習筆記筆記
- Oracle體系結構學習筆記Oracle筆記
- Django學習筆記（15）——中介軟體Django筆記
- Linux 學習筆記 - 軟體安裝Linux筆記
- JVM學習筆記——自動記憶體管理JVM筆記記憶體
- 強化學習-學習筆記13 | 多智慧體強化學習強化學習筆記智慧體
- 學習筆記筆記
- 作業系統——記憶體管理學習筆記作業系統記憶體筆記
- XV6學習筆記(2) :記憶體管理筆記記憶體
- 模擬積體電路學習筆記筆記
- substrate學習筆記1：Substrate初體驗筆記
- 演算法學習筆記(40): 具體數學演算法筆記
- 【學習筆記】數學筆記
- 《JAVA學習指南》學習筆記Java筆記
- 機器學習學習筆記機器學習筆記
- 學習筆記-粉筆980筆記
- 學習筆記（3.29）筆記
- 學習筆記（4.1）筆記
- 學習筆記（3.25）筆記
- 學習筆記（3.26）筆記
- JavaWeb 學習筆記JavaWeb筆記
- golang 學習筆記Golang筆記
- Nginx 學習筆記Nginx筆記
- spring學習筆記Spring筆記
- gPRC學習筆記筆記
- GDB學習筆記筆記