<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>SuperBoxSelect Examples</title>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
<link href="../../resources/css/ext-all.css" media="screen" rel="Stylesheet" type="text/css" />
<script src="../../adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="../../ext-all-debug.js" type="text/javascript"></script>
<script src="states.js" type="text/javascript"></script>
<script type="text/javascript" src="SuperBoxSelect/SuperBoxSelect.js"></script>
<link href="SuperBoxSelect/superboxselect.css" media="screen" rel="Stylesheet" type="text/css" />
<style type="text/css">
body {
font:13px/1.231 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;
}
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;
}
.x-tag {
color: #693;
background-image: url(tag_green.gif);
background-repeat: no-repeat;
background-position: 2px center;
text-indent: 17px !important;
}
.x-flag{
background-image: url(../../resources/images/default/s.gif);
background-repeat: no-repeat;
background-position: 2px center;
text-indent: 17px !important;
}
.x-flag-au{
background-image: url(flags/Australia.png);
}
.x-flag-at{
background-image: url(flags/Austria.png);
}
.x-flag-ca{
background-image: url(flags/Canada.png);
}
.x-flag-fr{
background-image: url(flags/France.png);
}
.x-flag-it{
background-image: url(flags/Italy.png);
}
.x-flag-jp{
background-image: url(flags/Japan.png);
}
.x-flag-nz{
background-image: url("flags/New Zealand.png");
}
.x-flag-us{
background-image: url(flags/USA.png);
}
.small {
font-size: small;
}
</style>
<script type="text/javascript">
var tempIdCounter = 0;
Ext.onReady(function() {
Ext.QuickTips.init();
var states = new Ext.data.SimpleStore({
fields: ['abbr', 'state', 'nick', 'cls'],
data: Ext.exampledata.states,
sortInfo: {field: 'state', direction: 'ASC'}
});
var form1 = new Ext.form.FormPanel({
id:'f1Form',
renderTo: 'f1',
title:'Base Functionality',
autoHeight: true,
bodyStyle: 'padding:50px;',
width: 700,
items: [{
allowBlank:false,
id:'selector1',
xtype:'superboxselect',
fieldLabel: 'States',
emptyText: 'Select some US States',
resizable: true,
name: 'states',
anchor:'100%',
store: states,
mode: 'local',
displayField: 'state',
displayFieldTpl: '{state} ({abbr})',
valueField: 'abbr',
value: 'CA,NY'
}
],
buttons: [{
text: "setValue('AK,NY,CO')",
scope: this,
handler: function(){
Ext.getCmp('selector1').setValue('AK,NY,CO');
}
},{
text: 'getValue()',
scope: this,
handler: function(){
alert(Ext.getCmp('selector1').getValue());
}
}, {
text: 'BasicForm.getValues()',
scope: this,
handler: function(){
var v = form1.getForm().getValues(true);
alert(v);
}
},{
text: "reset",
scope: this,
handler: function(){
Ext.getCmp('selector1').reset();
}
},{
text: "disable",
scope: this,
handler: function(){
Ext.getCmp('selector1').disable();
}
},{
text: "enable",
scope: this,
handler: function(){
Ext.getCmp('selector1').enable();
}
}]
});
var tagStore = new Ext.data.SimpleStore({
fields: ['id', 'name'],
data: [['Architecture','Architecture'],['Sport','Sport'],['Science','Science'],['Nature','Nature'],['Technology','Technology'],['Travel','Travel']],
sortInfo: {field: 'name', direction: 'ASC'}
});
var form2 = new Ext.form.FormPanel({
id:'f2Form',
renderTo: 'f2',
title:'Allowing New Data',
autoHeight: true,
bodyStyle: 'padding:50px;',
width: 700,
items: [{
allowBlank:false,
msgTarget: 'under',
allowAddNewData: true,
id:'selector2',
xtype:'superboxselect',
fieldLabel: 'Tags',
emptyText: 'Enter or select the category tags',
resizable: true,
name: 'tags',
anchor:'100%',
store: tagStore,
mode: 'local',
displayField: 'name',
valueField: 'id',
extraItemCls: 'x-tag',
listeners: {
beforeadditem: function(bs,v){
//console.log('beforeadditem:', v);
//return false;
},
additem: function(bs,v){
//console.log('additem:', v);
},
beforeremoveitem: function(bs,v){
//console.log('beforeremoveitem:', v);
//return false;
},
removeitem: function(bs,v){
//console.log('removeitem:', v);
},
newitemdata: function(bs,v){
v = v.slice(0,1).toUpperCase() + v.slice(1).toLowerCase();
var newObj = {
id: v,
name: v
};
bs.addItem(newObj);
}
}
}
],
buttons: [{
text: "Add Existing Tag (addItem)",
scope: this,
handler: function(){
Ext.getCmp('selector2').addItem({id:'Travel', name:'Travel'});
}
},{
text: "Add New Tag (addItem)",
scope: this,
handler: function(){
Ext.getCmp('selector2').addItem({id:'Beauty', name:'Beauty'});
}
},{
text: "Set New Values (setValueEx)",
scope: this,
handler: function(){
Ext.getCmp('selector2').setValueEx([{id:'Finance', name:'Finance'},{id:'Gardening', name:'Gardening'}]);
}
},{
text: 'getValue()',
scope: this,
handler: function(){
alert(Ext.getCmp('selector2').getValue());
}
},{
text: "reset",
scope: this,
handler: function(){
Ext.getCmp('sel
Ext用户扩展控件 ------超级下拉列表控件支持多选，删除，添加
3星 · 超过75%的资源 需积分: 9 179 浏览量
2009-05-23
13:19:30
上传
评论
收藏 21KB RAR 举报 
UxSuperBoxSelect.rar （16个子文件） 
UxSuperBoxSelect flags 
Japan.png 471B Austria.png 363B Australia.png 614B USA.png 488B New Zealand.png 623B France.png 446B Italy.png 440B Canada.png 570B
states.js 3KB SuperBoxSelect SuperBoxSelect.js 40KB close.png 1KB superboxselect.css 2KB expand.png 1KB clear.png 1KB
tag_green.gif 258B
index.html 14KB资源评论
zhxixihaha2013-10-09可用的 亲自试过。。。- yuechang2016-09-08资源不全，不能用
