Sencha小案例

 1 Ext.require('Ext.TabPanel');
 2 Ext.application({
 3     name: 'MyApp',
 4     icon: 'images/icon.png',
 5     glossOnIcon: false,
 6     tabletStartupScreen: 'img/tablet_startup.png',
 7     phoneStartupScreen: 'img/phone_startup.png',
 8     launch: function () {
 9         var Content = Ext.create("Ext.form.Panel", {
10             id: 'PanelMain',
11             scrollable: 'vertical',
12             items: [{
13                 xtype: 'fieldset',
14                 title: '查詢信息',
15                 defaults: {
16                     labelwidth: '10%'
17                 },
18                 items: [{
19                     xtype: 'textfield',
20                     id: 'txt_title',
21                     name: 'title',
22                     lable: '條件',
23                     //文本框的提示
24                     placeHolder: '請輸入查詢條件',
25                     //必須的
26                     required: true,
27                     clearIcon: true,
28                     //事件監聽
29                     listeners: {
30                         //change是當失去焦點,keyup是按鍵擡起事件
31                         change: function (item, newValue, oldValue) {
32                             var tempValue = this.getValue();
33                             //若是用戶輸入的值長度大於等於2且小於等於3
34                             if (tempValue.length >= 2 & tempValue.length <= 3) {
35                                 Ext.Ajax.request({
36                                     //鏈接地址
37                                     url: 'http://localhost:5167/Tb_StuInfo.ashx',
38                                     //傳遞方法
39                                     method: 'post',
40                                     //參數
41                                     params: {
42                                         TempTc: "GetStuInfoByName",
43                                         tempName: this.getValue(),
44                                     },
45                                     //請求成功的回調函數
46                                     success: function (response) {
47                                         var tem = eval("(" + response.responseText + ")");
48                                         if (tem != null) {
49                                             //判斷
50                                             var tempSex = tem.stu_Sex == 1 ? "男" : "女";
51                                             //getCmd是按ID拿到要的控件，而後賦值
52                                             Ext.getCmp('Temp_Show').setHtml("編號爲:" + tem.stu_Id + "號<br/>姓名爲:" + tem.stu_Name + "<br/>年齡是:" + tem.stu_Age + "歲<br/>性別爲:" + tempSex + "<br/>電話號碼:" + tem.stu_Tel);
53                                         } else { Ext.getCmp('Temp_Show').setHtml('請輸入您要查詢的名稱'); }
54                                     },
55                                     failure: function () { alert("獲取目錄請求失敗！"); }  // 請求失敗的回調函數
56                                 });
57                             } else { console.log("還沒運行!"); }
58 
59                         }
60                     },
61                 }, {
62                     id: 'Temp_Show',
63                     name: 'Temp_Show',
64                     xtype: 'panel',
65                     title: '內容',
66                     style: 'margin-top:2px;background-color:#808080;',
67                     height: '400px',
68                     html: '請輸入您要查詢的名稱'
69                 }]
70             }
71             ]
72         });
73         Ext.Viewport.add(Content);
74     }
75 });

View Code