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. 使用EntityFramework6连接MySql数据库（db first方式）

    准备工具: VS2013.MySQL For VisualStudio 1.1.4.Connector/Net 6.8.3(百度网盘里) 程序包管理器执行命令: Install-Package Ent ...

  2. 编译可在Android上运行的qemu user mode

    前言 本文在Ubuntu 64位系统上对qemu项目进行交叉编译,并且只编译与qemu user mode有关的代码. 下文中的”NDK”若无特殊说明均指”Android NDK”. 下文中”$NDK ...

  3. ENode框架Conference案例分析系列之 - 架构设计

    Conference架构概述 先贴一下Conference案例的在线地址,UI因为完全拿了微软的实现,所以都是英文的,以后我有空再改为中文的. Conference后台会议管理:http://www. ...

  4. Lesson 6 Percy Buttons

    Text I have just moved to a house in Bridge Street. Yesterday a bagger knocked at my door. He asked ...

  5. HTML和CSS经典布局3

    如下图: 需求: 1. 如图 2. 可以从body标签开始. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xht ...

  6. 初学者 bootstrap（二）----在路上（4）

    ---------------------------------------------------------曾经认真书写的笔记啊,别来无恙啊--------------------------- ...

  7. JS面向对象（2） -- this的使用，对象之间的赋值，for...in语句，delete使用，成员方法，json对象的使用，prototype的使用，原型继承与原型链

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

  8. FontAwesome 4.4.0 中完整的585个图标样式CSS参考

    做一记录,免得每次都去网上搜图标对应的class. 在线版本:http://dnt.dkill.net/dnt/font/  

  9. 轻量级前端MVVM框架avalon - ViewModel

    废话说了大几篇,我们开始来点干货了~ ViewModel的内部机制 在MVVM中,数据是核心.而jQuery则以DOM为核心. 而DOM只是HTML在JS的世界的抽象,是一个很易变的东西.因此如果业务 ...

  10. 利用angular结合translate为项目实现国际化

    前言 利用H5项目第一版本已经上线,话说有了第一期就有了第二期,这不要为第二期做准备了,老大发话第一件事就要利用Angular JS实现项目的国际化以及后续要借助这个框架来实现其他功能,好吧我表示没怎 ...