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>