Extjs3多选下拉框LovCombo_extjslistbox资源-CSDN文库

共9个文件

js：4个

css：4个

html：1个

Extjs3

多选下拉框

LovCombo

4星 · 超过85%的资源需积分: 46 68 浏览量 2009-08-29 17:20:28 上传评论收藏 13KB ZIP 举报

ExtJS 3是一款基于JavaScript的富客户端框架，用于构建功能丰富的、交互式的Web应用程序。在ExtJS 3中，多选下拉框（LovCombo）是一种复合组件，它结合了下拉列表和“爱好者选择”（LOV，Lookup Value）的功能，允许用户在多个选项中进行复选选择。在Web应用中，这种组件常用于数据输入，特别是在数据库关联字段的选择上。 LovCombo的设计目标是提供一种用户友好的方式来从预定义的选项集合中选择多个值。它的核心特性包括： 1. **多选功能**：与传统的单选下拉框不同，LovCombo允许用户同时选择多个选项，通过检查框或复选标记实现。 2. **动态加载**：数据通常从服务器异步加载，根据用户的输入过滤结果，这样可以减少页面的加载时间，并提供更好的用户体验。 3. **自定义模板**：可以定制显示模板，决定如何在下拉列表和组合框中展示每个选项。 4. **配置灵活性**：支持各种配置项，如fieldLabel（字段标签）、store（存储数据的源）、displayField（显示字段）、valueField（值字段）、queryMode（查询模式，如本地或远程搜索）等。 5. **事件处理**：提供多种事件，如select、deselect等，可以绑定事件处理函数，以响应用户的选择变化。在lovcombo.html文件中，通常会包含HTML结构，用于设置LovCombo的容器和相关元素。lovcombo.js则包含了JavaScript代码，用于创建和配置LovCombo实例，以及与后端数据源的交互。css和js文件可能分别包含了组件的样式和额外的JavaScript库，用于增强功能或优化性能。创建一个ExtJS 3的LovCombo实例，你需要按照以下步骤进行： 1. **初始化Store**：定义一个Ext.data.Store对象，用于存储lovcombo的数据。数据源可以是JSON、XML或者其他格式。 2. **定义Model**：定义数据模型，指定哪些字段作为显示字段和值字段。 3. **配置LovCombo**：创建一个Ext.form.ComboBox实例，指定store、displayField、valueField等配置项，并开启多选模式（multiSelect: true）。 4. **加载数据**：如果数据是异步加载的，需要在store的load方法中触发查询。 5. **监听事件**：根据需要添加事件监听器，例如监听select事件来处理用户的选择。 6. **将LovCombo添加到布局**：将LovCombo组件添加到页面的布局中，如面板（Ext.container.Panel）或其他容器。通过以上步骤，你可以创建一个功能完善的ExtJS 3多选下拉框LovCombo。这个组件在实际开发中具有很高的实用价值，因为它能提高数据输入的效率和准确性，同时保持用户界面的整洁和直观。

资源推荐

资源详情

资源评论

收起资源包目录

lovcombo-1.0.zip （9个子文件）

css

empty.css 0B

Ext.ux.form.LovCombo.css 1024B

webpage.css 2KB

lovcombo.css 1KB

lovcombo.html 9KB

lovcombo.js 2KB

Ext.ux.form.LovCombo.js 7KB

WebPage.js 5KB

Ext.ux.ThemeCombo.js 3KB

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css"> <link rel="stylesheet" type="text/css" href="./css/Ext.ux.form.LovCombo.css"> <link rel="stylesheet" type="text/css" href="./css/empty.css" id="theme"> <link rel="stylesheet" type="text/css" href="./css/webpage.css"> <link rel="stylesheet" type="text/css" href="./css/lovcombo.css"> <link rel="shortcut icon" href="../img/extjs.ico"> <script type="text/javascript" src="./ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="./ext/ext-all-debug.js"></script> <script type="text/javascript" src="./js/WebPage.js"></script> <script type="text/javascript" src="./js/Ext.ux.form.LovCombo.js"></script> <script type="text/javascript" src="./js/Ext.ux.ThemeCombo.js"></script> <script type="text/javascript" src="lovcombo.js"></script> <title id="page-title">Ext.ux.form.LovCombo Extension by Saki</title> </head> <body> <div id="center-content" class="x-hidden"> <div id="cts"> <div id="lovcomboct"></div> <br> Value (updated on focus): <div id="textct"></div> </div> <div id="change-log"> <h3>Development Change Log:</h3> <ul> <li><b>April 17, 2008</b> - hiddenField now gets updated</li> </ul> <ul> <li><b>April 16, 2008</b> - Initial release</li> </ul> </div> </div> <div id="west-content" class="x-hidden"> <div id="description"> <h3>Description</h3> <p> Simple LOV (List Of Values) combo. Individual values are selected in dropdown list and overall value is delimited list of values. </p> <div id="adsense-float" class="adsense x-hidden"> <script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> <p> Delimeter is configurable. </p> <p> LovCombo setValue method accepts the delimited list of values and sets all individual values accordingly. </p> </div> <br><br><br> <a href="http://extjs.com/forum/showthread.php?t=32692">LovCombo Forum Thread</a><br><br> <b>View Sources:</b><br> <a href="source.php?file=js/Ext.ux.form.LovCombo.js" target="_blank">Ext.ux.form.LovCombo.js</a><br> <a href="source.php?file=css/Ext.ux.form.LovCombo.css" target="_blank">Ext.ux.form.LovCombo.css</a><br> <a href="source.php?file=lovcombo.html" target="_blank">lovcombo.html</a><br> <a href="source.php?file=lovcombo.js" target="_blank">lovcombo.js</a><br> <a href="source.php?file=css/lovcombo.css" target="_blank">lovcombo.css</a><br> <br><a href="http://famfamfam.com/lab/icons/silk" target="_blank">Silk Icons</a><br> <div id="paypal">  <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_s-xclick"> <input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-butcc-donate.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"> <input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7----- "> </form>  </div> <div id="downloads"> <p><b>Downloads (stable 1.0):</b></p> <a href="http://extjs.eu/phpmv2/phpmyvisites.php?url=http%3A//lovcombo.extjs.eu/lovcombo-1.0.tar.bz2&id=1&pagename=FILE: download/lovcombo/lovcombo-1.0.tar.bz2">lovcombo-1.0.tar.bz2</a><br> <a href="http://extjs.eu/phpmv2/phpmyvisites.php?url=http%3A//lovcombo.extjs.eu/lovcombo-1.0.tar.gz&id=1&pagename=FILE: download/lovcombo/lovcombo-1.0.tar.gz">lovcombo-1.0.tar.gz</a><br> <a href="http://extjs.eu/phpmv2/phpmyvisites.php?url=http%3A//lovcombo.extjs.eu/lovcombo-1.0.zip&id=1&pagename=FILE: download/lovcombo/lovcombo-1.0.zip">lovcombo-1.0.zip</a><br> <br> <p><b>Downloads (development):</b></p> <a href="http://extjs.eu/phpmv2/phpmyvisites.php?url=http%3A//lovcombo.extjs.eu/lovcombo.tar.bz2&id=1&pagename=FILE: download/lovcombo/lovcombo.tar.bz2">lovcombo.tar.bz2</a><br> <a href="http://extjs.eu/phpmv2/phpmyvisites.php?url=http%3A//lovcombo.extjs.eu/lovcombo.tar.gz&id=1&pagename=FILE: download/lovcombo/lovcombo.tar.gz">lovcombo.tar.gz</a><br> <a href="http://extjs.eu/phpmv2/phpmyvisites.php?url=http%3A//lovcombo.extjs.eu/lovcombo.zip&id=1&pagename=FILE: download/lovcombo/lovcombo.zip">lovcombo.zip</a><br> </div> <br> <p> <b><a href="http://extjs.eu" target="_blank">Other Extensions and Plugins</a></b> </p>  <div id="digg"> <script> digg_url = 'http://lovcombo.extjs.eu'; </script> <script src="http://digg.com/api/diggthis.js"></script> </d

评论收藏

内容反馈