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. Python黑帽编程 2.0 第二章概述

    Python黑帽编程 2.0 第二章概述 于 20世纪80年代末,Guido van Rossum发明了Python,初衷据说是为了打发圣诞节的无趣,1991年首次发布,是ABC语言的继承,同时也是一 ...

  2. 基于HttpModule的简单.NET网站授权方案

    摘要 本文介绍一种入门级的网站授权(注:这里所指的授权指的是注册码效果,而不是网站登陆时的身份授权)方案,仅供学习交流及对付小白客户使用.复杂的网站授权涉及网站加密等一系列复杂的技术,不做本文介绍内容 ...

  3. dofile执行ANDROID APK里面的文件

    我使用dofile执行APK文件是不行的,比如 dofile("assets/res/flist")只能先拷贝到writablePath然后再dofile拿到数据后再清除这个临时文 ...

  4. ASP.NET MVC 过滤器(一)

    ASP.NET MVC 过滤器(一) 前言 前面的篇幅中,了解到了控制器的生成的过程以及在生成的过程中的各种注入点,按照常理来说篇幅应该到了讲解控制器内部的执行过程以及模型绑定.验证这些知识了.但是呢 ...

  5. [SDK2.2]Windows Azure Storage (15) 使用WCF服务，将本地图片上传至Azure Storage (上) 服务器端代码

    <Windows Azure Platform 系列文章目录> 这几天工作上的内容,把项目文件和源代码拿出来给大家分享下. 源代码下载:Part1 Part2 Part3 我们在写WEB服 ...

  6. eclipse启动时报告错误：Java was started but returned exit code=-805306369

    这两天也没改过eclipse和java的配置,但eclipse启动时报告错误:Java was started but returned exit code=-805306369 后来在eclipse ...

  7. HTTP学习一：HTTP基础知识

    1 HTTP介绍 HTTP协议(HyperText Transfer Protocol,超文本传输协议)是用于从WWW服务器传输超文本到本地浏览器的传送协议. 它的发展是万维网协会(World Wid ...

  8. python中协程

    在引出协成概念之前先说说python的进程和线程. 进程: 进程是正在执行程序实例.执行程序的过程中,内核会讲程序代码载入虚拟内存,为程序变量分配空间,建立 bookkeeping 数据结构,来记录与 ...

  9. 【开源】OSharp3.3框架解说系列：开发计划与进度

    OSharp是什么? OSharp是个快速开发框架,但不是一个大而全的包罗万象的框架,严格的说,OSharp中什么都没有实现.与其他大而全的框架最大的不同点,就是OSharp只做抽象封装,不做实现.依 ...

  10. FragmentPagerAdapter+ViewPager实现Tab切换效果

    1.Activity  加载布局文件,获取Viewpager控件   给ViewPager填充适配器. import android.app.ActionBar; import android.app ...