Extjs.Button 按钮
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>
Extjs.Button 按钮的更多相关文章
- [转载]ExtJs4 笔记（5） Ext.Button 按钮
作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...
- 89. Ext.Button 按钮
转自:http://www.cnblogs.com/lipan/archive/2011/12/13/2274797.html 从本篇开始讲基础控件,ExtJs对所有的UI控件都有它自己的一套封装.本 ...
- button 按钮，结合onclick事件，验证和提交表单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 如何在MFC界面开发中响应Button按钮的Down和Up事件
通过尝试有两种方案可以解决这个问题,第一种方案是通过PreTranslateMessage函数在调度消息之前对消息类型进行筛选,第二种方案是重载CButton类,在重载后的类CForTestButto ...
- 遭遇input与button按钮背景图失效不显示的解决办法
笔者从事网页前端代码页面工程师已有多年,作为一个网页重构人员常常会遇到一些莫名其妙的DIV+CSS(正确的说法是XHTML+CSS)在 IE.FireFox火狐. 谷歌浏览器CHROME.苹果浏览器S ...
- button按钮
button按钮只加类名不加type时,点击此按钮页面会刷新
- Unity3D NGUI 给button按钮添加单间事件
Unity3D中, NGUI 给button按钮添加单间事件的方法很多,在这里只给推荐一种比较常用的方法. 推荐方法:使用UIListener. 1.给button组价添加上UIListener.选择 ...
- iphone中button按钮显示为圆形解决
iphone中button按钮显示为圆形解决: 添加样式: -webkit-appearance:button; 如果需要为直角: border-radius:0 在源码中添加如:style=&quo ...
- 【html】button按钮的一些问题
问题: button 按钮在不设置 type 属性时,在不同的浏览器作用不一样.举个例子: html: <!doctype html> <html lang="en&quo ...
随机推荐
- 让浏览器不再显示 https 页面中的 http 请求警报
HTTPS 是 HTTP over Secure Socket Layer,以安全为目标的 HTTP 通道,所以在 HTTPS 承载的页面上不允许出现 http 请求,一旦出现就是提示或报错: Mix ...
- Meteor+AngularJS：超快速Web开发
为了更好地描述Meteor和AngularJS为什么值得一谈,我先从个人角度来回顾一下这三年来WEB开发的变化: 三年前,我已经开始尝试前后端分离,后端使用php的轻量业务逻辑框架.但 ...
- 《Entity Framework 6 Recipes》中文翻译系列 (28) ------ 第五章 加载实体和导航属性之测试实体是否加载与显式加载关联实体
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 5-11 测试实体引用或实体集合是否加载 问题 你想测试关联实体或实体集合是否已经 ...
- web应用中使用JavaMail发送邮件
现在很多的网站都提供有用户注册功能, 通常我们注册成功之后就会收到一封来自注册网站的邮件.邮件里面的内容可能包含了我们的注册的用户名和密码以及一个激活账户的超链接等信息.今天我们也来实现一个这样的功能 ...
- java中集合类中Collection接口中的Set接口的常用方法熟悉
1:Set集合由Set接口和Set接口的实现类组成,Set接口继承了Collection接口,因为包含Collection接口的所有方法. 2:由于Set接口中不允许存在重复值,因此可以使用Set集合 ...
- Python介绍
本节内容 Python简史 Python是一门什么样的语言? Python的优点与缺点 Python解释器 一.Python简史 历史背景 在20世纪80年代,IBM和苹果已经掀起了个人电脑的浪潮.但 ...
- android知识点随笔
android project中Manifest.xml中的<uses-sdk>标签元素决定的. 此标签包含如下3个属性: android:minSdkVersion —— 此属性决定你的 ...
- Android微信分享图片大于32k进行压缩
微信分享视频的时候,需要传一个图片数组,大小不能大于32k. 解决方案:使用Bitmap自带的compress方法解决了这个问题. 源码如下: <span style="font-si ...
- MySQL学习笔记五：数据类型
MySQL支持多种数据类型,大致可以分为数值,日期/时间和字符类型. 数值类型 MySQL支持所有标准SQL数值数据类型,包括严格数值数据类型(INTEGER.SMALLINT.DECIMAL和NUM ...
- Lua 学习笔记（十一）元表与元方法
在Lua中的每个值都有一套预定义的操作集合.例如可以将数字相加,可以连接字符串,还可以在table中插入一对key-value等.但是我们无法将两个table相加,无法对函数作比较,也无法调用一个字符 ...