Extjs Button 的簡單使用 ，同時調用Ajax服務
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="JS/ext-all.js"></script>
<script src="JS/ext-theme-classic.js"></script>
<link href="resources/ext-theme-classic/ext-theme-classic-all.css" rel="stylesheet" />
<script type="text/javascript">
Ext.onReady(function () {
Ext.create('Ext.Button', {
text: 'Click Me', //名稱
renderTo: Ext.getBody(),// body的時候就加載ext
handler: function () {//事件
Ext.Msg.alert('系統提示', '你點擊了該Button');
}
});
Ext.create('Ext.Button', {
text: 'Menu Button',
renderTo: Ext.getBody(),
menu:[
{ text: 'Item1' },
{ text: 'Item2' },
{ text: 'Item3' },
{ text: 'Item4' }
],
handlder: function () {
}
});
Ext.create('Ext.button.Cycle', {
showText: true,
prependText: 'View as ',
renderTo: Ext.getBody(),
menu: {
id: 'view-type-menu',
items: [{
text: 'text only',
iconCls: 'view-text',
checked: true
}, {
text: 'HTML',
iconCls: 'view-html'
}]
},
changeHandler: function (cycleBtn, activeItem) {
Ext.Msg.alert('Change View', activeItem.text);
}
});
/*
拆分按鈕，提供了一個內置的下拉箭頭，
可分別從默認的按鈕的click事件觸發一個事件。
通常情況下，這將被用來顯示一個下拉菜單，
可提供額外的選項主要按鈕的動作，
但任何自定義處理程序可以提供的arrowclick實現
*/
Ext.create('Ext.button.Split', {
renderTo: Ext.getBody(),
text: 'Options',
handler: function() {
},
menu: new Ext.menu.Menu({
items: [
{
text: 'item1',
handler: function() {
}
},
{text:'item2',
handler: function() {
}
}
]
})
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<div id="head"><input id="usercode" type="text" /></div>
<div id="container"></div>
</form>
</body>
</html>
<script type="text/javascript">
var mydata;
Ext.onReady(function() {
new Ext.Button({
text: "查詢用戶信息",
handler: function() {
Ext.Ajax.request({
url: "getXtemplateData.aspx?code=" + Ext.get("usercode").dom.value, //獲取人員編號
success: function(request) {
mydata = request.responseText;
mydata = eval('(' + mydata + ')');
var tpl2 = new Ext.XTemplate(
'<table><thead><tr><th>編號</th><th class= "namewidth">名稱</th><th class="urlwidth">地址</th><th>電話</th></tr></thead><tbody>',
'<tpl for="results">',
'<tr><td>{#}</td><td>{UserName}</td><td>{addressl}</td><td>{phone}</td><tr>',
'</tpl></tbody></table>'
);
tpl2.compile();
tpl2.overwrite(Ext.get("container"), mydata);
},
failure: function() {
alert("failure!");
}
});
}
}).render(document.body, "head");
});
</script>