Skip to content

Commit

Permalink
Initial commit to github repository
Browse files Browse the repository at this point in the history
  • Loading branch information
@kveeiv
kveeiv committed Jul 20, 2011
1 parent d12c81f commit 3e245e4
Show file tree
Hide file tree
Showing 6 changed files with 1,374 additions and 0 deletions.
16 changes: 16 additions & 0 deletions AUTHORS.txt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@


Ext.ux.form.field.BoxSelect Authors


This ExtJS4 user extension consists of voluntary contributions made by many individuals. For an
exact list of contributors, please see the official forum thread:

http://www.sencha.com/forum/showthread.php?134751-Ext.ux.form.field.BoxSelect-Intuitive-Multi-Select-ComboBox



Kevin Vaughan (kveeiv, http://www.sencha.com/forum/member.php?29437-kveeiv)
kleins (http://www.sencha.com/forum/member.php?77882-kleins)
JorisA (http://www.sencha.com/forum/member.php?2016-JorisA)

13 changes: 13 additions & 0 deletions MIT-LICENSE.txt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
Copyright (c) 2011 Kevin Vaughan, http://www.sencha.com/forum/showthread.php?134751-Ext.ux.form.field.BoxSelect-Intuitive-Multi-Select-ComboBox

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy,
modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software
is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS
BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF
OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
143 changes: 143 additions & 0 deletions examples/boxselect.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Ext.ux.form.field.BoxSelect</title>

<!-- ExtJS -->
<link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/ext-4.0.2a/resources/css/ext-all.css" />
<script type="text/javascript" src="http://dev.sencha.com/deploy/ext-4.0.2a/bootstrap.js"></script>

<link rel="stylesheet" type="text/css" href="../src/BoxSelect.css" />
<script type="text/javascript" src="../src/BoxSelect.js"></script>

<!-- Shared -->
<link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/ext-4.0.2a/examples/shared/example.css" />

<!-- Example -->
<script type="text/javascript" src="boxselect.js"></script>
<style type="text/css">
.example {
width: 600px;
border: 1px solid #CCC;
padding: 0 10px;
margin: 0 0 10px;
}
.x-fieldset {
margin-top: 20px;
}
ul.config-options, ul.config-options ul {
margin-bottom: 20px;
margin-left: 20px;
}
.config-options li {
list-style: disc inside;
}
.example pre {
margin-bottom: 20px;
}
</style>

</head>
<body>

<h1>BoxSelects</h1>
<p>The js is not minified so it is readable. See <a href="boxselect.js">boxselect.js</a> to view the code for these examples.</p>
<p>Ext.ux.form.field.BoxSelect extends <a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.form.field.ComboBox">Ext.form.field.ComboBox</a> to
provide a more 'multiSelect'-friendly control. The careful efforts made in this extension enable most (if not all) of the
<a href="http://dev.sencha.com/deploy/ext-4.0.2a/examples/form/combos.html">ComboBox examples</a> to convert to BoxSelects easily. The examples
included here showcase the differences between the default control and this extension.</p>

<div class="example">
<h2>Basic Configuration</h2>
<p>All configuration values for <a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.form.field.ComboBox">ComboBox</a> should work, but some defaults are changed:</p>
<ul class="config-options">
<li>
<a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.form.field.ComboBox-cfg-multiSelect">multiSelect</a> is defaulted to <b>true</b>.<br />
Though single-select is supported, the primary use case for BoxSelect is multiSelect.
</li>
<li>
<a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.form.field.ComboBox-cfg-forceSelection">forceSelection</a> is defaulted to <b>true</b>.<br />
Most typical uses of multiple selections are from pre-formed lists, with some rare exceptions like multiple emails with auto-suggest.
</li>
<li>
<a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.form.field.ComboBox-cfg-typeAhead">typeAhead</a> is still defaulted to <b>false</b>, but
support for this feature has been added for multiSelect='true'. The basic combobox control does not support typeAhead in multiSelect configurations.
</li>
<li>
<p><a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.form.field.ComboBox-cfg-value">value</a> can be used to initialize multiSelect values. The
same formats of values are accepted for this as are accepted by calls to setValue.</p>
<ul>
<li>A string associated to the configured <a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.form.field.ComboBox-cfg-valueField">valueField</a></li>
<li>When multiSelect is true, a string that is split using the field's
<a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.form.field.ComboBox-cfg-delimiter">delimiter</a></li>
<li>An array of values associated to the configured
<a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.form.field.ComboBox-cfg-valueField">valueField</a></li>
<li>An array of records of the Model type associated to the field's
<a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.form.field.ComboBox-cfg-store">store</a></li>
</ul>
</li>
</ul>

<div id="basicBoxselect"></div>
</div>

<div class="example">
<h2>Single Select</h2>
<p>While the primary use case for BoxSelect is for multiple selection, single selection can also be set with multiSelect: false.
If you want this to be the default case for all BoxSelect's, you can do so by adding the following before your BoxSelects are created:</p>
<pre>Ext.ux.form.field.BoxSelect.prototype.multiSelect = false;</pre>
<div id="singleSelect"></div>
</div>

<div class="example">
<h2>Automatic querying of remote stores for unknown values</h2>
<p>If <a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.form.field.ComboBox-cfg-queryMode">queryMode</a> is set to 'remote',
<a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.form.field.ComboBox-cfg-forceSelection">forceSelection</a> is set to true,
and a value is passed to the BoxSelect that is not in the store, a query will be sent to the store's configured proxy with a
parameter with the name of the <a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.form.field.ComboBox-cfg-valueField">valueField</a>,
and a value of the unknown values separated by the configured <a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.form.field.ComboBox-cfg-delimiter">delimiter</a>. For
example if the valueField is 'exampleIdField' and the delimiter is ', ' and unknown values '17' and '3281' are set, the following parameters
will be passed to <a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.data.Store-method-load">store.load()</a>:</p>
<pre>{ exampleIdField: '17, 3281' }</pre>
<p>This attempt to load the unknown values will be performed only once per initValue/setValue call. Any records that are still
unknown after this request will be removed from the field's value, but all known values will be retained.</p>
</div>

<div class="example">
<h2>forceSelection: false -- Multiple Emails with Auto-suggest</h2>
<p>The combo below illustrates the usage of 'forceSelection: false' with the BoxSelect component to enable the
entry of multiple email addresses, with auto-suggestions provided from the attached store. New records are
created using the user input for both the configured
<a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.form.field.ComboBox-cfg-displayField">displayField</a> and
<a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.form.field.ComboBox-cfg-valueField">valueField</a>. These new
records are <b>not</b> added to the combo's store automatically.</p>
<p>There are two methods of determining when a new entry will be created:</p>
<ul class="config-options">
<li>
When the user types the configured <a href="http://docs.sencha.com/ext-js/4-0/#/api/Ext.form.field.ComboBox-cfg-delimiter">delimiter</a> (defaults to ', '),
the value that the user entered before the delimiter will be used to create a new record.
</li>
<li>
<a href="#">createNewOnEnter</a> is defaulted to false. If set to true, a new entry will be created when the user presses Enter.
This configuration option only applies if forceSelection is false.
</li>
</ul>
<div id="emailSuggest"></div>
</div>

<div class="example">
<h2>Other configuration options</h2>
<p>The following configuration options are specific to the BoxSelect.</p>
<ul class="config-options">
<li><a href="#">createNewOnEnter</a> - please see the above forceSelection: false example.</li>
<li><a href="#">stacked</a> is defaulted to false. If set to true, the labelled items will fill to the width of the list instead
of being only as wide as the displayed value</li>
<li><a href="#">pinList</a> is defaulted to true. If set to false, the pick list will automatically collapse after a selection is made
when multiSelect is true. This mimics the default behavior when multiSelect is false.</li>
</ul>
<div id="stackedSelect"></div>
</div>

</body>
</html>
142 changes: 142 additions & 0 deletions examples/boxselect.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
/*
This file contains example usages of the Ext.ux.form.field.BoxSelect component, and is based on the
examples of comboboxes provided in Ext JS 4.
*/
Ext.require([
'Ext.ux.form.field.BoxSelect'
]);

Ext.onReady(function() {
Ext.tip.QuickTipManager.init();

// Define the model for a State
Ext.define('State', {
extend: 'Ext.data.Model',
fields: [
{type: 'string', name: 'abbr'},
{type: 'string', name: 'name'},
{type: 'string', name: 'slogan'}
]
});

// The data for all states
var states = [
{"abbr":"AL","name":"Alabama","slogan":"The Heart of Dixie"},
{"abbr":"AK","name":"Alaska","slogan":"The Land of the Midnight Sun"},
{"abbr":"AZ","name":"Arizona","slogan":"The Grand Canyon State"},
{"abbr":"AR","name":"Arkansas","slogan":"The Natural State"},
{"abbr":"CA","name":"California","slogan":"The Golden State"},
{"abbr":"CO","name":"Colorado","slogan":"The Mountain State"},
{"abbr":"CT","name":"Connecticut","slogan":"The Constitution State"},
{"abbr":"DE","name":"Delaware","slogan":"The First State"},
{"abbr":"DC","name":"District of Columbia","slogan":"The Nation's Capital"},
{"abbr":"FL","name":"Florida","slogan":"The Sunshine State"},
{"abbr":"GA","name":"Georgia","slogan":"The Peach State"},
{"abbr":"HI","name":"Hawaii","slogan":"The Aloha State"},
{"abbr":"ID","name":"Idaho","slogan":"Famous Potatoes"},
{"abbr":"IL","name":"Illinois","slogan":"The Prairie State"},
{"abbr":"IN","name":"Indiana","slogan":"The Hospitality State"},
{"abbr":"IA","name":"Iowa","slogan":"The Corn State"},
{"abbr":"KS","name":"Kansas","slogan":"The Sunflower State"},
{"abbr":"KY","name":"Kentucky","slogan":"The Bluegrass State"},
{"abbr":"LA","name":"Louisiana","slogan":"The Bayou State"},
{"abbr":"ME","name":"Maine","slogan":"The Pine Tree State"},
{"abbr":"MD","name":"Maryland","slogan":"Chesapeake State"},
{"abbr":"MA","name":"Massachusetts","slogan":"The Spirit of America"},
{"abbr":"MI","name":"Michigan","slogan":"Great Lakes State"},
{"abbr":"MN","name":"Minnesota","slogan":"North Star State"},
{"abbr":"MS","name":"Mississippi","slogan":"Magnolia State"},
{"abbr":"MO","name":"Missouri","slogan":"Show Me State"},
{"abbr":"MT","name":"Montana","slogan":"Big Sky Country"},
{"abbr":"NE","name":"Nebraska","slogan":"Beef State"},
{"abbr":"NV","name":"Nevada","slogan":"Silver State"},
{"abbr":"NH","name":"New Hampshire","slogan":"Granite State"},
{"abbr":"NJ","name":"New Jersey","slogan":"Garden State"},
{"abbr":"NM","name":"New Mexico","slogan":"Land of Enchantment"},
{"abbr":"NY","name":"New York","slogan":"Empire State"},
{"abbr":"NC","name":"North Carolina","slogan":"First in Freedom"},
{"abbr":"ND","name":"North Dakota","slogan":"Peace Garden State"},
{"abbr":"OH","name":"Ohio","slogan":"The Heart of it All"},
{"abbr":"OK","name":"Oklahoma","slogan":"Oklahoma is OK"},
{"abbr":"OR","name":"Oregon","slogan":"Pacific Wonderland"},
{"abbr":"PA","name":"Pennsylvania","slogan":"Keystone State"},
{"abbr":"RI","name":"Rhode Island","slogan":"Ocean State"},
{"abbr":"SC","name":"South Carolina","slogan":"Nothing Could be Finer"},
{"abbr":"SD","name":"South Dakota","slogan":"Great Faces, Great Places"},
{"abbr":"TN","name":"Tennessee","slogan":"Volunteer State"},
{"abbr":"TX","name":"Texas","slogan":"Lone Star State"},
{"abbr":"UT","name":"Utah","slogan":"Salt Lake State"},
{"abbr":"VT","name":"Vermont","slogan":"Green Mountain State"},
{"abbr":"VA","name":"Virginia","slogan":"Mother of States"},
{"abbr":"WA","name":"Washington","slogan":"Green Tree State"},
{"abbr":"WV","name":"West Virginia","slogan":"Mountain State"},
{"abbr":"WI","name":"Wisconsin","slogan":"America's Dairyland"},
{"abbr":"WY","name":"Wyoming","slogan":"Like No Place on Earth"}
];

var statesStore = Ext.create('Ext.data.Store', {
model: 'State',
data: states
});

// Basic BoxSelect using the data store
var basicBoxselect = Ext.create('Ext.ux.form.field.BoxSelect', {
fieldLabel: 'Select multiple states',
renderTo: 'basicBoxselect',
displayField: 'name',
width: 500,
labelWidth: 130,
store: statesStore,
queryMode: 'local',
valueField: 'abbr',
value: 'WA, TX'
});

var emails = [
'test@example.com', 'somebody@somewhere.net', 'johnjacob@jingleheimerschmidts.org',
'rumpelstiltskin@guessmyname.com', 'fakeaddresses@arefake.com', 'bob@thejoneses.com'
];

var emailSuggest = Ext.create('Ext.ux.form.field.BoxSelect', {
fieldLabel: 'Enter multiple email addresses',
renderTo: 'emailSuggest',
width: 500,
labelWidth: 130,
store: emails,
queryMode: 'local',
forceSelection: false,
createNewOnEnter: true
});

var singleSelect = Ext.create('Ext.ux.form.field.BoxSelect', {
fieldLabel: 'Select a state',
renderTo: 'singleSelect',
displayField: 'name',
multiSelect: false,
width: 500,
labelWidth: 130,
store: statesStore,
queryMode: 'local',
value: 'CA',
valueField: 'abbr'
});

var stackedView = Ext.create('Ext.ux.form.field.BoxSelect', {
fieldLabel: 'Select multiple states',
renderTo: 'stackedSelect',
displayField: 'name',
width: 500,
labelWidth: 130,
store: statesStore,
queryMode: 'local',
valueField: 'abbr',
value: 'WA, TX',
stacked: true,
pinList: false
});



});
52 changes: 52 additions & 0 deletions src/BoxSelect.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
.x-boxselect ul.x-boxselect-list {
height: auto;
cursor: text;
min-height: 20px;
padding: 0px;
}

.x-boxselect input {
border: none;
background: none;
line-height: 18px;
height: 20px;
width: 100%;
padding: 1px 3px;
}
.x-boxselect-input, .x-boxselect-item {
display: inline-block;
position: relative;
*display:inline; /* IE7 */
zoom:1; /* IE */
}
.x-boxselect-stacked .x-boxselect-item {
display: block;
}
.x-boxselect-item {
-moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; o-border-radius: 6px; khtml-border-radius: 6px; border: 1px solid #CAD8F3;
padding: 0px 1px 0px 5px !important;
margin: 1px 1px 1px 0;
background-color: #DEE7F8;
cursor: default;
}
.x-boxselect-item:hover {
background: #BBCEF1;
border: 1px solid #6D95E0;
}
.x-boxselect-item.selected {
border: 1px solid #316AD3 !important;
background: #658FDC !important;
}
.x-boxselect-item-text {
line-height: 16px;
padding-right: 20px;
}
.x-boxselect-item-close {
cursor: pointer;
}
.x-boxselect-item:hover .x-boxselect-item-close {
color: #6D95E0;
}
.x-boxselect-item-close:hover {
color: white !important;
}
Loading

0 comments on commit 3e245e4

Please sign in to comment.