<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>Extjs ajax实现文本框联系功能</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css"
href="./scripts/ext/resources/css/ext-all.css">
<script type="text/javascript"
src="./scripts/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./scripts/ext/ext-all.js"></script>
</head>
<style type="text/css" media="screen">
body
{
font: 11pxarial;
}
.suggest_link
{
background-color: #FFFFFF;
padding: 2px6px2px6px;
border:1 solid black;
}
.suggest_link_over
{
background-color: #E8F2FE;
padding: 2px6px2px6px;
}
#search_suggest
{
position: absolute;
background-color: #FFFFFF;
text-align: left;
border: 1pxsolid#000000;
}
</style>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'js/extjs/resources/images/default/s.gif';
//显示层鼠标移入特效
function suggestOver(div_value) {
div_value.className = "suggest_link_over";
}
//显示层鼠标移出特效
function suggestOut(div_value) {
div_value.className = "suggest_link";
}
//显示层鼠标点击事件
function setSearch(obj) {
document.getElementById("txtSearch").value = obj;
var div = document.getElementById("search_suggest");
div.innerHTML = "";
div.style.display = "none";
}
//鼠标离开文本框处理
function tbblur() {
var div = document.getElementById("search_suggest");
//div.innerHTML = "";
div.style.display = "none";
}
Ext.onReady(function(){
//发送HTTP请求，当输入框的内容变化时，会调用该函数
function handleSearchSuggest(){
var str = escape(document.getElementById("txtSearch").value);
Ext.Ajax.request({
url: "servlet/UploadFile",
method:'GET',
params:{
searchText:str
},
success:function(req){
var suggestText = document.getElementById("search_suggest");
var sourceText = req.responseText.split("\n");
// sourceText=['a','ab','bc']; 静态数据
if (sourceText.length > 1) {
suggestText.style.display = "";
suggestText.innerHTML = "";
for (var i = 0; i < sourceText.length - 1; i++) {
var s = '<div onmouseover="javascript:suggestOver(this);"';
s += ' onmouseout="javascript:suggestOut(this);" ';
s += ' onclick="javascript:setSearch(this.innerHTML);" ';
s += ' class="suggest_link">' + sourceText[i] + '</div>';
suggestText.innerHTML += s;
}
}
else {
suggestText.style.display = "none";
}
}
});
};
var suggestText=new Ext.form.TextField({
xtype: 'textfield',
id:'txtSearch',
allowBlank:false,
enableKeyEvents:true,
listeners:{
"keyup":function(obj){
handleSearchSuggest();
},
"focus":function(obj){
handleSearchSuggest();
},
"blur":function(obj){
tbblur();
}
}})
suggestText.render("suggest_div");
});
</script>
<body>
<div id="suggest_div"></div>
<div id="search_suggest" style="display: none ;width: 125px;"></div>
</body>
</html>
分享到：
发表评论
-
EXT中Menu和ComboBox的BUG及解决方法
2011-04-26 19:58 1480最近一直在玩Ext,所以可 ... -
tabpanel的激活模式
2011-04-13 00:58 925listeners : { render : func ... -
ExtJs非Iframe框架加载页面实现
2011-04-09 00:32 3905在用Ext开发App应用时，一般的框架都是左边为菜单栏，中 ... -
EXTJS FORM textField emptyText 空值提交的解决办法
2011-04-02 01:10 4827Ext的textField有一个emptyText属性用起来很 ... -
项目开发中遇到的extjs常见问题
2011-03-31 22:16 1928事件触发机制 l ... -
回发或回调参数无效。在配置中使用 enableEventValidation=true或在页面中使用 启用了事件验证。
2011-03-28 23:35 1268回发或回调参数无效。在配置中使用 <pages enab ... -
extjs 如何自动缩放
2011-03-24 00:03 1578例如 可编辑的grid面板 var grid_mate ... -
Extjs 开发使用
2011-03-13 16:24 1954extjs基础 extjs基础 extjs ... -
Extjs EditorGrid 可编辑表格控件
2011-03-03 23:26 1884定义Ext.grid.ColumnModel时，列的信息项ed ... -
Extjs操作Dom
2011-02-25 23:12 12901.获取dom 通过id获取： var el = Ext. ... -
调试ExtJs利器 - Firebug(Firefox插件)
2011-02-25 00:22 1116Firebug是一个Firefox插件,集HTML查看和编辑、 ... -
调试ExtJs利器 - Full Source(IE插件)
2011-02-25 00:19 1003Full Source是一个Internet Explorer ... -
ExtJs的智能提示插件-Spket(Eclipse)
2011-02-25 00:17 837ExtJs的智能提示插件-Spket(Eclipse) -
ExtJs的智能提示插件-Spket(Eclipse)
2011-02-25 00:16 1515选择Help -> Software Updates - ... -
EXTJS accordion layout event
2011-02-24 20:14 1254EXTJS 的 accordion layout 布局在API ... -
extjs 相关PPT
2011-02-24 20:13 1012布局介绍和开发相关介绍 -
EXTJS学习系列提高篇:第七篇(转载)作者殷良胜,制作树形菜单之一
2011-02-23 00:01 1045制作树形菜单的原理是:首先连接数据库,将数据按照树的结构形式返 ... -
去掉修改后extjs中grid 左上角的红三角
2011-02-17 13:54 1459gridpanel.on('afteredit',functi ... -
可输入可联想的下拉列表的实现——Ext ComboBox
2011-02-17 13:36 1886网上这样的控件不少，有很多实现方法，其中不少的很巧妙。 ... -
extjs更换皮肤
2011-02-12 13:53 2035<head runat="server&quo ...
相关推荐
在ExtJS中实现验证码功能，我们可以利用MVC（Model-View-Controller）架构，这是一种设计模式，可以有效地组织代码并提高可维护性。 1. **创建Model**: 在ExtJS MVC中，Model用于定义数据结构和业务逻辑。对于...
例如，你可以有文本框（TextField）用于关键词输入，下拉框（ComboBox）用于选择类别，日期选择器（DateField）用于指定时间范围等。表单中的每个字段都可以设置相应的事件监听器，如“change”事件，当用户修改输入...
4. **Ajax交互**：ExtJS 3.0 提供了Ajax请求的封装，如AjaxProxy和DirectProxy，方便与服务器进行异步通信，实现动态数据加载和更新。 5. **事件系统**：事件驱动是ExtJS中的重要特性，所有组件都支持事件监听和...
7. **表单组件**：EXTJS 3.0包含各种表单组件，如文本框（TextField）、选择框（ComboBox）、日期选择器（DateField）等，可构建复杂的表单应用。 8. **图表组件**：EXTJS 3.0还引入了图表组件，可以创建各种统计...
在实现增删改查功能时，通常会用到以下几个主要的ExtJS组件： 1. 表格（Grid）：用于展示数据列表，可以与Ext.data.Store关联，自动处理数据的加载、排序、分页等操作。 2. 表单（Form）：用于输入和编辑数据，包含...
1. **基础组件**：ExtJS 提供了多种组件，如按钮（Button）、文本框（TextField）、表格（Grid）、面板（Panel）等，这些是构建用户界面的基础。通过学习书中代码，你可以了解到如何创建、配置和使用这些组件。 2. ...
5. **表单组件**：ExtJS 3.0包含一系列强大的表单组件，如文本框（TextField）、复选框（Checkbox）、下拉列表（ComboBox）等，它们都支持验证和数据绑定。 6. **图表组件**：通过ExtJS的Charts模块，开发者可以...
3. **组件使用**：ExtJS的核心是组件系统，从简单的按钮、文本框到复杂的表格和树视图，你需要掌握如何创建、配置和管理这些组件。这包括理解每个组件的属性、方法和事件。 4. **布局管理**：学习不同的布局方式，...
在“extjs最简单的数据绑定和修改”这个主题中，我们将探讨如何在ExtJS中实现数据的双向绑定以及如何进行数据的修改。 1. 数据模型（Model）： 在ExtJS中，数据模型定义了数据对象的结构和属性。创建一个模型类，...
ExtJS 是一款用于构建现代 Web 应用的强大框架，它提供了一系列丰富的 UI 组件、数据处理功能以及与后端交互的能力。本文将通过大量的实例来讲解如何使用 ExtJS 来开发高质量的 Web 应用。 #### 基础知识 在深入...
ExtJS是一款卓越的Ajax框架，其4.x版本的推出标志着Web应用开发进入了一个新的阶段。它不仅提供了丰富的UI组件库，还支持各种复杂的用户交互模式，使Web应用程序的界面设计更加生动、功能更加强大，从而显著提升了...
编辑器可以是文本框（textfield）、数字字段（numberfield）或其他ExtJS支持的组件。 4. **事件处理**：为了响应用户对数据的编辑操作，我们需要监听`edit`事件。当单元格被编辑时，事件处理器可以获取到新值和旧值...
1. **ExtJS 组件**：程序可能使用了ExtJS的各种组件，如`Ext.Panel`（面板）作为聊天窗口的基础，`Ext.form.TextField`（文本框）用于输入消息，`Ext.Button`（按钮）来发送消息，以及可能的`Ext.grid.Panel`（表格...
当你双击一个节点时，TreeEditor 会自动为该节点创建一个文本框（TextField）供用户编辑。 - 编辑完成后，并不会自动保存到服务器。你需要监听 `beforecomplete` 事件，在事件处理函数中执行保存操作。例如： ```...
- **实现**: 使用 `Ext.PagingToolbar` 组件实现分页功能。 **11.2 ComboBox** - **整合**: 将分页功能与 ComboBox 结合，实现分页加载下拉列表数据。 #### 十二、面板（Panel） **12.1 面板** - **特点**: ...
5. **表单组件**：EXTJS提供了丰富的表单组件，如文本框（TextField）、选择框（ComboBox）、日期选择器（DateField）等，以及表单验证和提交功能。 6. **Ajax交互**：EXTJS内置了Ajax请求的封装，可以方便地与...
异步提交是EXTJS常用的提交方式，通过Ajax发送JSON或URL编码的数据到服务器，无须页面刷新，能实现更好的用户体验。而传统提交则会创建一个完整的HTTP请求，通常用于与不支持Ajax的服务器端技术交互。 五、服务器...
3. **文本框**（TextField）：用于接收用户输入的文本。 4. **列表**（List）：显示列表项，支持拖拽排序等功能。 5. **网格**（Grid）：用于展示表格形式的数据。 6. **树**（Tree）：用于展示分层次的数据结构。 7...
"ExtAjax表单提交"是EXTJS中的一个重要功能，用于处理用户在网页上的表单数据，并通过Ajax方式向服务器发送请求，实现异步数据交互。 在EXTJS中，表单（Ext.form.Panel）是数据输入和展示的主要组件。它包含了各种...