Ext.ux.form.SuperBoxSelect
Ext.ux.form.SuperBoxSelect
在B/S系统中，下拉列表(select/dropdownlist/combobox)的应用随处可见,为了增强用户体验,开发人员也常常会做一些带联想功能的下拉列表，
特别是数据项比较多的时候，用户筛选起来就会很容易。
如果考虑多选的场景，我想以下的实现方式很多时候是能够满足要求的:
带复选框(checkbox)的下拉列表，应该是比较直观和方便了，也很符合用户的习惯.
但是如果数据项太多的时候。滚动条会很长,有两个不足:
1.用户查询自己想要的目标很困难；
2.用户如果需要选择的项很多(>10项)，滚动条容易遮挡住，用户可能也不知道自己到底选了哪些。
于是带复选框且有联想功能的多选下拉列表闪亮登场了， Ext.ux.form.SuperBoxSelect
这款插件确实很好用,笔者也将其应用到了项目中
这里给出测试截图
用户选择之后可以看到自己所选，很直观吧!
插件下载地址:
Live example: http://technomedia.co.uk/SuperBoxSelect/examples3.html
Download: http://www.extjs.com/forum/attachmen...7&d=1263783379
Thread: http://extjs.com/forum/showthread.ph...654#post332654
怎么使用这个插件，我想示例中是很明了的,笔者也做了一个C#版的
ExtJs组件的基础引用都在母板中
ExtMaster.Master
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="ExtMaster.master.cs"
Inherits="Lucky.Views.Shared.ExtMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="../../Scripts/ext-3.4.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/ext-3.4.0/adapter/ext/ext-base-debug.js" type="text/javascript"></script>
<script src="../../Scripts/ext-3.4.0/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="../../Scripts/ext-3.4.0/ext-all.js" type="text/javascript"></script>
<script src="../../Scripts/Widget/CHelper.js" type="text/javascript"></script>
<asp:ContentPlaceHolder ID="TitleContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Vew视图:
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/ExtMaster.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> <link href="../../Scripts/SuperBoxSelect/superboxselect.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/SuperBoxSelect/states.js" type="text/javascript"></script>
<script src="../../Scripts/SuperBoxSelect/SuperBoxSelect.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<style type="text/css">
body {
font:13px/1.3 arial,helvetica,clean,sans-serif;
*font-size:small;
*font:x-small;
padding: 20px !important;
}
#page {
width: 700px;
}
p {
color: #333;
margin-bottom: 7px;
font-size: 14px;
}
form p {
margin-top: 7px;
}
code {
color: #000;
}
#intro p {
color: #000;
font-size: 15px;
margin-bottom: 20px;
}
h1 {
font-size: 1.6em;
line-height: 2.0em;
margin-bottom: 0.8em;
}
h2 {
font-size: 1.2em;
line-height: 1.6em;
margin-bottom: 0.6em;
}
.exForm{
padding: 20px 20px 20px 0px;
font-size: 12px;
}
.x-tag {
color: #693;
background-image: url(tag_green.gif);
background-repeat: no-repeat;
background-position: 2px center;
padding-left: 17px !important;
*text-indent: 17px !important;
}
.x-flag{
background-image: url(../../Scripts/ext-3.4.0/resources/images/default/s.gif);
background-repeat: no-repeat;
background-position: 2px center;
text-indent: 17px !important;
}
body.ext-ie6 .x-flag .x-superboxselect-item-close {
top: 4px;
right: 2px;
}
.small {
font-size: small;
} #f2Form .x-superboxselect-item-focus {
color: #fff;
} </style>
<script language="javascript" type="text/javascript">
var tempIdCounter = 0;
Ext.BLANK_IMAGE_URL = 'http://static.technomedia.co.uk/libs/ext-3.2.0/resources/images/default/s.gif';
Ext.onReady(function () { $("#btnToastWindow").click(function () {
GetWindow();
});
})
</script>
<script language="javascript" type="text/javascript">
/**
* ajax同步请求
*获取用例对象
*/
function GetSuperSelectData() {
var obj;
var value;
var strUrl = '../SuoperBoxSelect/GetSuperSocketStore';
if (window.ActiveXObject)
obj = new ActiveXObject('Microsoft.XMLHTTP');
else if (window.XMLHttpRequest)
obj = new XMLHttpRequest;
obj.open('POST', strUrl, false);
obj.setRequestHeader('Contnent-Type', 'application/', 'application/x-www-form-urlencoded');
obj.send(null);
var oResult = Ext.util.JSON.decode(obj.responseText);
return oResult;
} </script>
<script language="javascript" type="text/javascript">
/**
* form
*/
function GetForm() {
var SelectData = GetSuperSelectData();
//example 5
var states3 = new Ext.data.SimpleStore({
fields: ['abbr', 'state', 'nick', 'cls'],
data: SelectData,
sortInfo: { field: 'state', direction: 'ASC' }
});
var superSelect = new Ext.ux.form.SuperBoxSelect({
allowBlank: false,
msgTarget: 'title',
id: 'selector5',
xtype: 'superboxselect',
fieldLabel: 'States',
resizable: true,
hiddenName: 'statesHidden[]',
width: 300,
store: states3,
mode: 'local',
displayField: 'state',
displayFieldTpl: '{state} ({abbr})',
valueField: 'abbr',
navigateItemsWithTab: false,
value: ['AL', 'AZ']
});
var form = new Ext.form.FormPanel({
frame: true,
//title: '表单标题',
style: 'margin:10px',
items: [superSelect]
});
return form;
};
/**
* window
*/
function GetWindow() {
var form = GetForm();
var win = new Ext.Window({
title: '窗口',
width: 476,
height: 374,
items: [form],
resizable: true,
modal: true,
closable: true,
maximizable: true,
minimizable: true,
buttons: [{
text: '确定',
handler: function () {
var strValue = Ext.getCmp('selector5').getValue();
Ext.Msg.alert("提示", strValue);
win.close();
}
}, {
text: '取消',
handler: function () {
Ext.Msg.alert('提示', '取消');
win.close();
}
}]
});
win.show();
} </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>
Example 5</h2>
<p>
This example demonstrates using <code>applyTo</code> to apply the component to an
existing dom element.</p>
<input type="button" id="btnToastWindow" value="弹出窗口" />
</asp:Content>
Controller:
这里只是构造一些测试数据,可以根据真是场景从数据库去数据和组织数据,
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Lucky.Models;
namespace Lucky.Controllers
{
public class SuoperBoxSelectController : Controller
{
//
// GET: /SuoperBoxSelect/
public ActionResult Index()
{
return View();
}
#region 获取多选下拉列表数据源
/// <summary>
/// 获取多选下拉列表数据源
/// </summary>
/// <returns></returns>
public JsonResult GetSuperSocketStore()
{
var lstDoubleSuperSelectData = new List<List<string>>();
var lstSuperSelect = _GetSuperSocketStore();
foreach(var oSuperSelect in lstSuperSelect)
{
var lstSuperSelectData = new List<string>();
lstSuperSelectData.Add(oSuperSelect.abbr);
lstSuperSelectData.Add(oSuperSelect.state);
lstSuperSelectData.Add(oSuperSelect.nick);
lstSuperSelectData.Add(oSuperSelect.cls);
lstDoubleSuperSelectData.Add(lstSuperSelectData);
}
return Json(lstDoubleSuperSelectData,JsonRequestBehavior.AllowGet);
} private List<CSuperSelect> _GetSuperSocketStore()
{
var lstSuperSelect = new List<CSuperSelect>();
for (var iIndex = 0; iIndex < 10;iIndex++ )
{
var strAbbr = string.Format("{0}{1}","abbr",iIndex);
var strState = string.Format("{0}{1}","state",iIndex);
var strNick = string.Format("{0}{1}", "nick", iIndex);
var strCls = string.Format("{0}{1}", "cls", iIndex);
lstSuperSelect.Add(new CSuperSelect(strAbbr,strState,strNick,strCls));
}
return lstSuperSelect;
}
#endregion
}
}
Model:
public class CSuperSelect
{
public string abbr;
public string state;
public string nick;
public string cls;
public CSuperSelect(string abbr, string state, string nick, string cls)
{
this.abbr = abbr;
this.state = state;
this.nick = nick;
this.cls = cls;
}
}
参考:
http://www.sencha.com/forum/showthread.php?69307-3.x-Ext.ux.form.SuperBoxSelect
http://www.iteye.com/topic/392975
http://setting.iteye.com/blog/340900
转载请注明出处:http://www.cnblogs.com/lucky_hu/admin/EditPosts.aspx?opt=1
Ext.ux.form.SuperBoxSelect的更多相关文章
- 一款不错的多选下拉列表利器—— Ext.ux.form.SuperBoxSelect
在B/S系统中,下拉列表(select/dropdownlist/combobox)的应用随处可见,为了增强用户体验,开发人员也常常会做一些带联想功能的下拉列表, 特别是数据项比较多的时候,用户筛选起 ...
- ExtJs文件上传(Ext.ux.form.FileUploadField)
Ext.ux.form.FileUploadField = Ext.extend(Ext.form.TextField, { /** * @cfg {String} buttonText The b ...
- [转载]ExtJs4 笔记（12） Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏
作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...
- ux.form.field.KindEditor 所见所得编辑器
注意需要引入KindEditor相关资源 //所见所得编辑器 Ext.define('ux.form.field.KindEditor', { extend: 'Ext.form.field.Text ...
- ux.form.field.Verify 验证码控件
//验证码控件 Ext.define('ux.form.field.Verify', { extend: 'Ext.container.Container', alias: ['widget.fiel ...
- ux.form.field.TreePicker 扩展，修复火狐不能展开bug
/** * A Picker field that contains a tree panel on its popup, enabling selection of tree nodes. * 动态 ...
- ux.form.field.SearchField 列表、树形菜单查询扩展
//支持bind绑定store //列表搜索扩展,支持本地查询 //支持树形菜单本地一级菜单查询 Ext.define('ux.form.field.SearchField', { extend: ' ...
- ExtJs4 笔记（12） Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏
本篇讲解三个工具栏控件.其中Ext.toolbar.Toolbar可以用来放置一些工具类操控按钮和菜单,Ext.toolbar.Paging专门用来控制数据集的分页展示,Ext.ux.statusba ...
- ux.form.field.Year 只能选年的时间扩展
效果如图,亲测6.2.1版本可用,用法同时间选择控件 //只选择年的控件 Ext.define('ux.picker.Year', { extend: 'Ext.Component', alias: ...
随机推荐
- Socket 学习（三）.1 tcp 通讯
实现了,局域网客户端 对客户端 的通讯. 实际上这是 一个 客户端 兼 服务端 . 2个阿里云服务器测试 效果图: 本地效果图: using System; using System.Collecti ...
- Linux内核源代码情景分析-中断半
一.中断初始化 1.中断向量表IDT初始化 void __init init_IRQ(void) { int i; #ifndef CONFIG_X86_VISWS_APIC init_ISA_irq ...
- 观察者模式的程序实例C++
一.什么是观察者模式 Observer模式也叫观察者模式,是由GoF提出的23种软件设计模式的一种.Observer模式是行为模式之中的一个,它的作用是当一个对象的状态发生变化时,可以自己主动通知其它 ...
- Java用ZIP格式压缩和解压缩文件
转载:java jdk实例宝典 感觉讲的非常好就转载在这保存! java.util.zip包实现了Zip格式相关的类库,使用格式zip格式压缩和解压缩文件的时候,须要导入该包. 使用zipoutput ...
- mysql5.6.16绿色版配置、运行
原文:mysql5.6.16绿色版配置.运行 1.从该地址http://dev.mysql.com/downloads/mysql/中选择windows的版本,选择下载. 2.将下载的压缩包解压. 3 ...
- 我的MYSQL学习心得（十一）
原文:我的MYSQL学习心得(十一) 我的MYSQL学习心得(十一) 我的MYSQL学习心得(一) 我的MYSQL学习心得(二) 我的MYSQL学习心得(三) 我的MYSQL学习心得(四) 我的MYS ...
- 让你的Windows不断重启的C语言代码
原文:让你的Windows不断重启的C语言代码 没有写Linux的原因是因为搞不定Linux下的权限问题,而Windows下基本上使用电脑的用户都是管理员,所以钻个空了,不多说下面是代码#includ ...
- C语言对mysql数据库的操作
原文:C语言对mysql数据库的操作 这已经是一相当老的话题.不过今天我才首次使用,把今天的一些体会写下来,也许能给一些新手带来一定的帮助,更重要的是供自己今后忘记的怎么使用而进行查阅的! 我们言归正 ...
- 探秘IntelliJ IDEA 13测试版新功能——调试器显示本地变量
IntelliJ IDEA在业界被公认为最好的Java开发平台之一,JetBrains公司将在12月正式发布IntelliJ IDEA 13版本. 现在,小编将和大家一起探秘密IntelliJ IDE ...
- C/C++软件静态测试现状
对于C/C++软件而言,静态测试越来越趋向软件安全功能测试.包括数据机密性.完整性.可用性.不可否认性.身份认证.授权.访问控制.审计跟踪.委托.隐私保护.安全管理等. 通常情况下,C/C++静态测试 ...