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. 谷歌发布的首款基于HTTP/2和protobuf的RPC框架：GRPC

    Google 刚刚开源了grpc,  一个基于HTTP2 和 Protobuf 的高性能.开源.通用的RPC框架.Protobuf 本身虽然提供了RPC  的定义语法,但是一直以来,Google 只开 ...

  2. JavaScript面向对象之我见

    序言 在JavaScript的大世界里讨论面向对象,都要提到两点:1.JavaScript是一门基于原型的面向对象语言 2.模拟类语言的面向对象方式.对于为什么要模拟类语言的面向对象,我个人认为:某些 ...

  3. 进一步封装highchart，打造自己的图表插件：jHighChart.js

    Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表.支持的图表类型有曲线图.区域图.柱状图.饼状图.散状点图和综合 ...

  4. Git命令汇总

    1. 工作区和版本库 说明: 工作区(Working Directory)就是创建仓库的文件夹 版本库(Repository)就是工作区的隐藏目录.git,版本库中有暂存区(stage/index)和 ...

  5. 2013 duilib入门简明教程 -- 事件处理和消息响应 (17)

        界面的显示方面就都讲完啦,下面来介绍下控件的响应.     前面的教程只讲了按钮和Tab的响应,即在Notify函数里处理.其实duilib还提供了另外一种响应的方法,即消息映射DUI_BEG ...

  6. 2017预防bug的重要性

    Bug,中文名缺陷.一个让软件测试员兴奋,让开发人员头疼的词.来源二次大战期间,一个称为"马克二型"的计算机,由于天气过热,硬件跟不上导致死机.最后发现是因为飞蛾,被继电器电死,将 ...

  7. Data Profiling Task

    Data Profiling Task 是用于收集数据的Metadata的Task,在使用ETL处理数据之前,应该首先检查数据质量,对数据进行分析,这将对Table Schema的设计结构和生成ETL ...

  8. HighCharts从数据库中读取数据

    1.index.js router.get('/', function(req, res, next) { res.render('index', { title: 'Express' }); }); ...

  9. Oracel_子查询

    SQL子查询 子查询语法 SELECT select_list FROM table WHERE expr operator (SELECT select_list FROM table) 子查询 ( ...

  10. ASP.NET：在一般处理程序中通过 Session 保存验证码却无法显示图片？

    using System.Drawing; using System.Web; using System.Web.SessionState; /// <summary> /// Captc ...