JS之小練習(xí)代碼
更新時(shí)間:2008年10月12日 23:24:08 作者:
初學(xué)者不建議看,這些都是用類實(shí)現(xiàn)的代碼,高手推薦學(xué)習(xí)
沒有html代碼,只有JS代碼,小練習(xí)內(nèi)容如下:(從陳治文老師的課程中學(xué)到)
<script>
Ext.onReady(function(){
// Ext.Msg.alert("系統(tǒng)提示(thtwinj2ee)","環(huán)境配置正確!") ;
var myPosition = Ext.data.Record.create(
[{name:"position"}]
) ;//返回一個(gè)function
new Ext.Window({
title:"測(cè)試用窗口(絕不裸奔)",
width:550,
height:370,
labelWidth:70,
plain:true ,
layout:"form",
defaults:{anchor:"95%"},
// buttonAlign:"center",
items:
[
{
layout:"column",
baseCls:"x-plain",
style:"padding:8px",
items:
[
{
columnWidth:.5,
layout:"form",
baseCls:"x-plain",
labelWidth:70,
defaults:{width:150},
defaultType:"textfield",
items:
[
{
fieldLabel:"姓名"
},
{
fieldLabel:"年齡",
value:23,
readOnly:true
},
{
xtype:"datefield",
format:"Y-m-d",
value:"1986-11-16",
readOnly:true,
fieldLabel:"出生日期",
listeners:
{
"blur":function(_df)
{
var _age = _df.ownerCt.findByType("textfield")[1] ;
_age.setValue(new Date().getFullYear() - _df.getValue().getFullYear() + 1) ;
}
}
},
{
fieldLabel:"聯(lián)系電話"
},
{
fieldLabel:"手機(jī)號(hào)碼"
},
{
fieldLabel:"電子郵件"
},
{
xtype:"combo",
fieldLabel:"性別",
readOnly:true,
displayField:"sex",
value:"男",
triggerAction:"all",
mode:"local",
store:new Ext.data.SimpleStore
(
{
fields:["sex"],
data:[["男"],["女"]]
}
)
}
]
},
{
columnWidth:.5,
layout:"form",
baseCls:"x-plain",
labelWidth:55,
items:
[
{
xtype:"textfield",
width:185,
height:178,
fieldLabel:"個(gè)人頭像",
inputType:"image"
}
]
}
]
},
{
layout:"form",
baseCls:"x-plain",
style:"padding:2px,8px,8px,8px",
defaultType:"textfield",
labelWidth:71,
items:
[
{
fieldLabel:"身份證號(hào)碼",
width:415
},
{
fieldLabel:"具體住址",
width:415
}
]
},
{
layout:"column",
baseCls:"x-plain",
style:"padding:2px,8px,8px,8px",
items:
[
{
columnWidth:.4,
layout:"form",
baseCls:"x-plain",
labelWidth:70,
items:
[
{
xtype:"combo",
readOnly:true,
mode:"local",
triggerAction:"all",
displayField:"position",
width:100,
fieldLabel:"職稱",
value:"初級(jí)程序員",
store:new Ext.data.SimpleStore
(
{
fields:["position"],
data:[["中級(jí)程序員"],["高級(jí)程序員"],["項(xiàng)目經(jīng)理"]]
}
)
}
]
},
{
columnWidth:.2,
layout:"form",
baseCls:"x-plain",
items:
[
{
xtype:"button",
text:"添加職位",
handler:function()
{
var _window = this.ownerCt.ownerCt.ownerCt ;
var _position = _window.findByType("combo")[1] ;
Ext.Msg.prompt
(
"添加職位",
"請(qǐng)輸入將要添加的職位內(nèi)容",
function(_btn,_text)
{
if(_btn == "ok")
{
var _store = this.store ;
_store.insert(0,new myPosition({position:_text})) ;
this.setValue(_text) ;
}
}, _position //用來代替前面function()中的this對(duì)象
);
}
}
]
},
{
columnWidth:.2,
layout:"form",
baseCls:"x-plain",
items:
[
{
xtype:"button",
text:"修改職位",
handler:function()
{
var _window = this.ownerCt.ownerCt.ownerCt ;
var _position = _window.findByType("combo")[1] ;
Ext.Msg.prompt(
"修改職位(絕不裸奔)",
"請(qǐng)輸入你將要修改的內(nèi)容:",
function(_btn,_text)
{
if(_btn == "ok")
{
this.setValue(_text) ;
}
},
_position,
false,
_position.getValue()
) ;
}
}
]
},
{
columnWidth:.2,
layout:"form",
baseCls:"x-plain",
items:
[
{
xtype:"button",
text:"刪除職位",
handler:function()
{
var _window = this.ownerCt.ownerCt.ownerCt ;
var _position = _window.findByType("combo")[1] ;
Ext.Msg.confirm
(
"警告(thtwinj2ee)",
"你真的要?jiǎng)h除該項(xiàng)內(nèi)容嗎?",
function(_btn)
{
if(_btn == "yes")
{
this.store.remove(this["selectItem"]) ;
if(this.store.getCount() != 0)
{
this.setValue(this.store.getAt(0).get("position")) ;
this["selectItem"] = this.store.getAt(0).get("position") ;
}
}
},
_position
) ;
}
}
]
}
]
}
],
listeners:
{
"show":function(_window)
{
_window.findByType("textfield")[5].getEl().dom.src = "02.jpg" ;
}
},
buttons:
[
{
text:"確定"
},
{
text:"取消"
}
]
}).show() ;
}) ;
</script>
<script>
Ext.onReady(function(){
// Ext.Msg.alert("系統(tǒng)提示(thtwinj2ee)","環(huán)境配置正確!") ;
var myPosition = Ext.data.Record.create(
[{name:"position"}]
) ;//返回一個(gè)function
new Ext.Window({
title:"測(cè)試用窗口(絕不裸奔)",
width:550,
height:370,
labelWidth:70,
plain:true ,
layout:"form",
defaults:{anchor:"95%"},
// buttonAlign:"center",
items:
[
{
layout:"column",
baseCls:"x-plain",
style:"padding:8px",
items:
[
{
columnWidth:.5,
layout:"form",
baseCls:"x-plain",
labelWidth:70,
defaults:{width:150},
defaultType:"textfield",
items:
[
{
fieldLabel:"姓名"
},
{
fieldLabel:"年齡",
value:23,
readOnly:true
},
{
xtype:"datefield",
format:"Y-m-d",
value:"1986-11-16",
readOnly:true,
fieldLabel:"出生日期",
listeners:
{
"blur":function(_df)
{
var _age = _df.ownerCt.findByType("textfield")[1] ;
_age.setValue(new Date().getFullYear() - _df.getValue().getFullYear() + 1) ;
}
}
},
{
fieldLabel:"聯(lián)系電話"
},
{
fieldLabel:"手機(jī)號(hào)碼"
},
{
fieldLabel:"電子郵件"
},
{
xtype:"combo",
fieldLabel:"性別",
readOnly:true,
displayField:"sex",
value:"男",
triggerAction:"all",
mode:"local",
store:new Ext.data.SimpleStore
(
{
fields:["sex"],
data:[["男"],["女"]]
}
)
}
]
},
{
columnWidth:.5,
layout:"form",
baseCls:"x-plain",
labelWidth:55,
items:
[
{
xtype:"textfield",
width:185,
height:178,
fieldLabel:"個(gè)人頭像",
inputType:"image"
}
]
}
]
},
{
layout:"form",
baseCls:"x-plain",
style:"padding:2px,8px,8px,8px",
defaultType:"textfield",
labelWidth:71,
items:
[
{
fieldLabel:"身份證號(hào)碼",
width:415
},
{
fieldLabel:"具體住址",
width:415
}
]
},
{
layout:"column",
baseCls:"x-plain",
style:"padding:2px,8px,8px,8px",
items:
[
{
columnWidth:.4,
layout:"form",
baseCls:"x-plain",
labelWidth:70,
items:
[
{
xtype:"combo",
readOnly:true,
mode:"local",
triggerAction:"all",
displayField:"position",
width:100,
fieldLabel:"職稱",
value:"初級(jí)程序員",
store:new Ext.data.SimpleStore
(
{
fields:["position"],
data:[["中級(jí)程序員"],["高級(jí)程序員"],["項(xiàng)目經(jīng)理"]]
}
)
}
]
},
{
columnWidth:.2,
layout:"form",
baseCls:"x-plain",
items:
[
{
xtype:"button",
text:"添加職位",
handler:function()
{
var _window = this.ownerCt.ownerCt.ownerCt ;
var _position = _window.findByType("combo")[1] ;
Ext.Msg.prompt
(
"添加職位",
"請(qǐng)輸入將要添加的職位內(nèi)容",
function(_btn,_text)
{
if(_btn == "ok")
{
var _store = this.store ;
_store.insert(0,new myPosition({position:_text})) ;
this.setValue(_text) ;
}
}, _position //用來代替前面function()中的this對(duì)象
);
}
}
]
},
{
columnWidth:.2,
layout:"form",
baseCls:"x-plain",
items:
[
{
xtype:"button",
text:"修改職位",
handler:function()
{
var _window = this.ownerCt.ownerCt.ownerCt ;
var _position = _window.findByType("combo")[1] ;
Ext.Msg.prompt(
"修改職位(絕不裸奔)",
"請(qǐng)輸入你將要修改的內(nèi)容:",
function(_btn,_text)
{
if(_btn == "ok")
{
this.setValue(_text) ;
}
},
_position,
false,
_position.getValue()
) ;
}
}
]
},
{
columnWidth:.2,
layout:"form",
baseCls:"x-plain",
items:
[
{
xtype:"button",
text:"刪除職位",
handler:function()
{
var _window = this.ownerCt.ownerCt.ownerCt ;
var _position = _window.findByType("combo")[1] ;
Ext.Msg.confirm
(
"警告(thtwinj2ee)",
"你真的要?jiǎng)h除該項(xiàng)內(nèi)容嗎?",
function(_btn)
{
if(_btn == "yes")
{
this.store.remove(this["selectItem"]) ;
if(this.store.getCount() != 0)
{
this.setValue(this.store.getAt(0).get("position")) ;
this["selectItem"] = this.store.getAt(0).get("position") ;
}
}
},
_position
) ;
}
}
]
}
]
}
],
listeners:
{
"show":function(_window)
{
_window.findByType("textfield")[5].getEl().dom.src = "02.jpg" ;
}
},
buttons:
[
{
text:"確定"
},
{
text:"取消"
}
]
}).show() ;
}) ;
</script>
相關(guān)文章
分步解析JavaScript實(shí)現(xiàn)tab選項(xiàng)卡自動(dòng)切換功能
這篇文章主要分步解析JavaScript實(shí)現(xiàn)tab選項(xiàng)卡自動(dòng)切換功能代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-01-01Javascript之高級(jí)數(shù)組API的使用實(shí)例
今天小編就為大家分享一篇關(guān)于Javascript之高級(jí)數(shù)組API的使用實(shí)例,小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來看看吧2019-03-03JavaScript實(shí)現(xiàn)QueryString獲取GET參數(shù)的方法
本文為大家詳細(xì)介紹下如何通過JavaScript實(shí)現(xiàn)QueryString獲取GET參數(shù),具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下哈,希望對(duì)大家有所幫助2013-07-07JavaScript Spread Syntax (...)的十種使用方法
這篇文章主要介紹了JavaScript Spread Syntax (...)的十個(gè)強(qiáng)大用途,擴(kuò)展語法即Spread Syntax(…) 是 ES6 中引入的一個(gè)新特性,它允許我們從可迭代對(duì)象中快速提取元素2022-07-07微信小程序項(xiàng)目實(shí)踐之驗(yàn)證碼倒計(jì)時(shí)功能
這篇文章主要介紹了微信小程序項(xiàng)目實(shí)踐之驗(yàn)證碼倒計(jì)時(shí)功能,當(dāng)用戶點(diǎn)擊發(fā)送驗(yàn)證碼按鈕,按鈕背景變色,不可點(diǎn)擊,顯示倒計(jì)時(shí)文字,需要的朋友可以參考下2018-07-07javascript中checkbox使用方法實(shí)例演示
這篇文章通過簡單的實(shí)例演示了javascript中checkbox使用方法,感興趣的小伙伴們可以參考一下2015-11-11