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 });

Sencha小案例