Extjs.Button 按钮

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>