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 按钮的更多相关文章

  1. [转载]ExtJs4 笔记（5） Ext.Button 按钮

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...

  2. 89. Ext.Button 按钮

    转自:http://www.cnblogs.com/lipan/archive/2011/12/13/2274797.html 从本篇开始讲基础控件,ExtJs对所有的UI控件都有它自己的一套封装.本 ...

  3. button 按钮，结合onclick事件，验证和提交表单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 如何在MFC界面开发中响应Button按钮的Down和Up事件

    通过尝试有两种方案可以解决这个问题,第一种方案是通过PreTranslateMessage函数在调度消息之前对消息类型进行筛选,第二种方案是重载CButton类,在重载后的类CForTestButto ...

  5. 遭遇input与button按钮背景图失效不显示的解决办法

    笔者从事网页前端代码页面工程师已有多年,作为一个网页重构人员常常会遇到一些莫名其妙的DIV+CSS(正确的说法是XHTML+CSS)在 IE.FireFox火狐. 谷歌浏览器CHROME.苹果浏览器S ...

  6. button按钮

    button按钮只加类名不加type时,点击此按钮页面会刷新

  7. Unity3D NGUI 给button按钮添加单间事件

    Unity3D中, NGUI 给button按钮添加单间事件的方法很多,在这里只给推荐一种比较常用的方法. 推荐方法:使用UIListener. 1.给button组价添加上UIListener.选择 ...

  8. iphone中button按钮显示为圆形解决

    iphone中button按钮显示为圆形解决: 添加样式: -webkit-appearance:button; 如果需要为直角: border-radius:0 在源码中添加如:style=&quo ...

  9. 【html】button按钮的一些问题

    问题: button 按钮在不设置 type 属性时,在不同的浏览器作用不一样.举个例子: html: <!doctype html> <html lang="en&quo ...

随机推荐

  1. 发布两款JQ小插件（图片查看器 + 分类选择器），开源

    图片查看器,github地址:https://github.com/VaJoy/imgViewer 效果如下: 这款当初大概写了2小时,有点匆忙地赶出来的,使用的接口很简单: $.bindViewer ...

  2. Python黑帽编程3.0 第三章 网络接口层攻击基础知识

    3.0 第三章 网络接口层攻击基础知识 首先还是要提醒各位同学,在学习本章之前,请认真的学习TCP/IP体系结构的相关知识,本系列教程在这方面只会浅尝辄止. 本节简单概述下OSI七层模型和TCP/IP ...

  3. 那些证书相关的玩意儿(SSL,X.509,PEM,DER,CRT,CER,KEY,CSR,P12等)

    之前没接触过证书加密的话,对证书相关的这些概念真是感觉挺棘手的,因为一下子来了一大堆新名词,看起来像是另一个领域的东西,而不是我们所熟悉的编程领域的那些东西,起码我个人感觉如此,且很长时间都没怎么搞懂 ...

  4. 非正规方法处理AngulurJS模块管理问题

    1.起因 自己一直做winform,有幸从某个大神手里接了一个node.js,express,angulurJS等集众多开源框架的一个项目,赶鸭子上架,于是一边学习,一边用自己以往的思中去整理,重构代 ...

  5. Maven 最佳实践

    持续不断地学习maven Maven是一个很好的工具,但同时也拥有陡峭的学习曲线.因此,将 http://books.sonatype.com/mvnref-book/reference/ 加入到你的 ...

  6. Thrift架构~目录

    回到占占推荐博客索引 概念相关 thrift是一个软件框架,用来进行可扩展且跨语言的服务的开发.它结合了功能强大的软件堆栈和代码生成引擎,以构建在 C++, Java, Python, PHP, Ru ...

  7. 用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  8. Java基础-输入输出-3.编写BinIoDemo.java的Java应用程序，程序完成的功能是：完成1.doc文件的复制，复制以后的文件的名称为自己的学号姓名.doc。

    3.编写BinIoDemo.java的Java应用程序,程序完成的功能是:完成1.doc文件的复制,复制以后的文件的名称为自己的学号姓名.doc. try { FileInputStream in = ...

  9. memset

    函数原型: void *memset(void *s, int ch, size_t n); 函数解释:将s中当前位置后面的n个字节 (typedef unsigned int size_t )用 c ...

  10. 解密jQuery内核 Sizzle引擎筛选器 - 位置伪类（一）

    本章开始分析过滤器,根据API的顺序来 主要涉及的知识点 jQuery的组成 pushStack方法的作用 sizzle伪类选择器 首页我们知道jQuery对象是一个数组对象 内部结构 jQuery的 ...