![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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 });