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. RemoteIE 开发者可跨平台使用IE测试网页

    RemoteIE,这是一个基于微软Azure的服务,它允许开发者在最新版本的IE(Windows 10技术预览版)中测试他们的网页,而不需要安装或在虚拟机中设置对应的系统.要想使用这项服务,开发者需要 ...

  2. 推荐:图片轮播插件Nivo Slider

          因为项目需要一款切换样式多一些的轮播插件,不经意找到了NivoSlider,非常好用,比bootstrap要好用,而且样式丰富.值得注意的是,这款插件是在MIT协议下免费的.        ...

  3. Stored Procedure 里的 WITH RECOMPILE 到底是干麻的？

    在 SQL Server 创建或修改「存储过程(stored procedure)」时,可加上 WITH RECOMPILE 选项,但多数文档或书籍都写得语焉不详,或只解释为「每次执行此存储过程时,都 ...

  4. TODO：Ubuntu下安装Node

    TODO:Ubuntu下安装Node Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高 ...

  5. SQL语句来查询今天、昨天、7天内、30天的数据，经典！

    ---恢复内容开始--- 今天的所有数据:select * from 表名 where DateDiff(dd,datetime类型字段,getdate())=0 昨天的所有数据:select * f ...

  6. Vue.js学习笔记（8）拖放

    小颖在目前负责的项目中,负责给同事提供所需组件,在这期间,我们家大颖姐姐让我 写个拖拽组件,一开始我是用click实现,先将你要拖拽的dom点一下,然后再点你要放的位置,这个dom再通过小颖写的方法, ...

  7. Eclipse开发工具组合键介绍

    1.  编辑类 Ctrl + Q              跳到最后一次的编辑处     Ctrl + 1               快速修复提示     Alt + ↓               ...

  8. poj 3414 Pots bfs+模拟

    #include<iostream> #include<cstring> #define fillA 1 #define pourAB 2 #define dropA 3 #d ...

  9. SQL Server-语句类别、数据库范式、系统数据库组成（一）

    前言 终于等到这一天,我要开始重新系统学习数据库了,关于数据库这块,不出意外的话,每天会定时更新一篇且内容不会包含太多,简短的内容,深入的理解,Always to review the basics. ...

  10. Android标题栏最右边添加按钮

    step1:重写activity的onCreateOptionsMenu方法 @Override public boolean onCreateOptionsMenu(Menu menu){ Menu ...