JavaScript DHTML/Ext JS/ListBox
Содержание
Drop and drop between MultiSelect list box
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/examples/ux/css/MultiSelect.css"/>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/examples/shared/examples.css" />
<script type="text/javascript" src="ext-3.0.0/examples/ux/MultiSelect.js"></script>
<script type="text/javascript" src="ext-3.0.0/examples/ux/ItemSelector.js"></script>
</head>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = "side";
/*
* Ext.ux.form.MultiSelect Example Code
*/
var msForm = new Ext.form.FormPanel({
title: "MultiSelect Test",
width: 700,
bodyStyle: "padding:10px;",
renderTo: "multiselect",
items:[{
xtype: "multiselect",
fieldLabel: "Multiselect<br />(Required)",
name: "multiselect",
width: 250,
height: 200,
allowBlank:false,
store: [[123,"One Hundred Twenty Three"],
["1", "One"], ["2", "Two"], ["3", "Three"], ["4", "Four"], ["5", "Five"],
["6", "Six"], ["7", "Seven"], ["8", "Eight"], ["9", "Nine"]],
tbar:[{
text: "clear",
handler: function(){
msForm.getForm().findField("multiselect").reset();
}
}],
ddReorder: true
}],
tbar:[{
text: "Options",
menu: [{
text: "Set Value (2,3)",
handler: function(){
msForm.getForm().findField("multiselect").setValue("2,3");
}
},{
text: "Toggle Enabled",
handler: function(){
var m = msForm.getForm().findField("multiselect");
if (!m.disabled) {
m.disable();
} else {
m.enable();
}
}
}]
}],
buttons: [{
text: "Save",
handler: function(){
if(msForm.getForm().isValid()){
Ext.Msg.alert("Submitted Values", "The following will be sent to the server: <br />"+
msForm.getForm().getValues(true));
}
}
}]
});
var ds = new Ext.data.ArrayStore({
data: [[123,"One Hundred Twenty Three"],
["1", "One"], ["2", "Two"], ["3", "Three"], ["4", "Four"], ["5", "Five"],
["6", "Six"], ["7", "Seven"], ["8", "Eight"], ["9", "Nine"]],
fields: ["value","text"],
sortInfo: {
field: "value",
direction: "ASC"
}
});
/*
* Ext.ux.form.ItemSelector Example Code
*/
var isForm = new Ext.form.FormPanel({
title: "ItemSelector Test",
width:700,
bodyStyle: "padding:10px;",
renderTo: "itemselector",
items:[{
xtype: "itemselector",
name: "itemselector",
fieldLabel: "ItemSelector",
imagePath: "ext-3.0.0/examples/ux/images/",
multiselects: [{
width: 250,
height: 200,
store: ds,
displayField: "text",
valueField: "value"
},{
width: 250,
height: 200,
store: [["10","Ten"]],
tbar:[{
text: "clear",
handler:function(){
isForm.getForm().findField("itemselector").reset();
}
}]
}]
}],
buttons: [{
text: "Save",
handler: function(){
if(isForm.getForm().isValid()){
Ext.Msg.alert("Submitted Values", "The following will be sent to the server: <br />"+
isForm.getForm().getValues(true));
}
}
}]
});
});
</script>
<h1>MultiSelect and ItemSelector</h1>
<b>MultiSelect</b><br />
<p>Press Save with no items selected to see an example of validation applied.</p>
<div id="multiselect" class="demo-ct" style="margin-bottom:15px;"></div>
<b>ItemSelector</b><br />
<p>Supports drag and drop, double-click, button move/reorder, etc.
<div id="itemselector" class="demo-ct"></div>
</body>
</html>
MultiSelect list box
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/examples/ux/css/MultiSelect.css"/>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/examples/shared/examples.css" />
<script type="text/javascript" src="ext-3.0.0/examples/ux/MultiSelect.js"></script>
<script type="text/javascript" src="ext-3.0.0/examples/ux/ItemSelector.js"></script>
</head>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = "side";
/*
* Ext.ux.form.MultiSelect Example Code
*/
var msForm = new Ext.form.FormPanel({
title: "MultiSelect Test",
width: 700,
bodyStyle: "padding:10px;",
renderTo: "multiselect",
items:[{
xtype: "multiselect",
fieldLabel: "Multiselect<br />(Required)",
name: "multiselect",
width: 250,
height: 200,
allowBlank:false,
store: [[123,"One Hundred Twenty Three"],
["1", "One"], ["2", "Two"], ["3", "Three"], ["4", "Four"], ["5", "Five"],
["6", "Six"], ["7", "Seven"], ["8", "Eight"], ["9", "Nine"]],
tbar:[{
text: "clear",
handler: function(){
msForm.getForm().findField("multiselect").reset();
}
}],
ddReorder: true
}],
tbar:[{
text: "Options",
menu: [{
text: "Set Value (2,3)",
handler: function(){
msForm.getForm().findField("multiselect").setValue("2,3");
}
},{
text: "Toggle Enabled",
handler: function(){
var m = msForm.getForm().findField("multiselect");
if (!m.disabled) {
m.disable();
} else {
m.enable();
}
}
}]
}],
buttons: [{
text: "Save",
handler: function(){
if(msForm.getForm().isValid()){
Ext.Msg.alert("Submitted Values", "The following will be sent to the server: <br />"+
msForm.getForm().getValues(true));
}
}
}]
});
var ds = new Ext.data.ArrayStore({
data: [[123,"One Hundred Twenty Three"],
["1", "One"], ["2", "Two"], ["3", "Three"], ["4", "Four"], ["5", "Five"],
["6", "Six"], ["7", "Seven"], ["8", "Eight"], ["9", "Nine"]],
fields: ["value","text"],
sortInfo: {
field: "value",
direction: "ASC"
}
});
/*
* Ext.ux.form.ItemSelector Example Code
*/
var isForm = new Ext.form.FormPanel({
title: "ItemSelector Test",
width:700,
bodyStyle: "padding:10px;",
renderTo: "itemselector",
items:[{
xtype: "itemselector",
name: "itemselector",
fieldLabel: "ItemSelector",
imagePath: "ext-3.0.0/examples/ux/images/",
multiselects: [{
width: 250,
height: 200,
store: ds,
displayField: "text",
valueField: "value"
},{
width: 250,
height: 200,
store: [["10","Ten"]],
tbar:[{
text: "clear",
handler:function(){
isForm.getForm().findField("itemselector").reset();
}
}]
}]
}],
buttons: [{
text: "Save",
handler: function(){
if(isForm.getForm().isValid()){
Ext.Msg.alert("Submitted Values", "The following will be sent to the server: <br />"+
isForm.getForm().getValues(true));
}
}
}]
});
});
</script>
<h1>MultiSelect and ItemSelector</h1>
<b>MultiSelect</b><br />
<p>Press Save with no items selected to see an example of validation applied.</p>
<div id="multiselect" class="demo-ct" style="margin-bottom:15px;"></div>
<b>ItemSelector</b><br />
<p>Supports drag and drop, double-click, button move/reorder, etc.
<div id="itemselector" class="demo-ct"></div>
</body>
</html>
Reorder MultiSelect list box
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/examples/ux/css/MultiSelect.css"/>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/examples/shared/examples.css" />
<script type="text/javascript" src="ext-3.0.0/examples/ux/MultiSelect.js"></script>
<script type="text/javascript" src="ext-3.0.0/examples/ux/ItemSelector.js"></script>
</head>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = "side";
/*
* Ext.ux.form.MultiSelect Example Code
*/
var msForm = new Ext.form.FormPanel({
title: "MultiSelect Test",
width: 700,
bodyStyle: "padding:10px;",
renderTo: "multiselect",
items:[{
xtype: "multiselect",
fieldLabel: "Multiselect<br />(Required)",
name: "multiselect",
width: 250,
height: 200,
allowBlank:false,
store: [[123,"One Hundred Twenty Three"],
["1", "One"], ["2", "Two"], ["3", "Three"], ["4", "Four"], ["5", "Five"],
["6", "Six"], ["7", "Seven"], ["8", "Eight"], ["9", "Nine"]],
tbar:[{
text: "clear",
handler: function(){
msForm.getForm().findField("multiselect").reset();
}
}],
ddReorder: true
}],
tbar:[{
text: "Options",
menu: [{
text: "Set Value (2,3)",
handler: function(){
msForm.getForm().findField("multiselect").setValue("2,3");
}
},{
text: "Toggle Enabled",
handler: function(){
var m = msForm.getForm().findField("multiselect");
if (!m.disabled) {
m.disable();
} else {
m.enable();
}
}
}]
}],
buttons: [{
text: "Save",
handler: function(){
if(msForm.getForm().isValid()){
Ext.Msg.alert("Submitted Values", "The following will be sent to the server: <br />"+
msForm.getForm().getValues(true));
}
}
}]
});
var ds = new Ext.data.ArrayStore({
data: [[123,"One Hundred Twenty Three"],
["1", "One"], ["2", "Two"], ["3", "Three"], ["4", "Four"], ["5", "Five"],
["6", "Six"], ["7", "Seven"], ["8", "Eight"], ["9", "Nine"]],
fields: ["value","text"],
sortInfo: {
field: "value",
direction: "ASC"
}
});
/*
* Ext.ux.form.ItemSelector Example Code
*/
var isForm = new Ext.form.FormPanel({
title: "ItemSelector Test",
width:700,
bodyStyle: "padding:10px;",
renderTo: "itemselector",
items:[{
xtype: "itemselector",
name: "itemselector",
fieldLabel: "ItemSelector",
imagePath: "ext-3.0.0/examples/ux/images/",
multiselects: [{
width: 250,
height: 200,
store: ds,
displayField: "text",
valueField: "value"
},{
width: 250,
height: 200,
store: [["10","Ten"]],
tbar:[{
text: "clear",
handler:function(){
isForm.getForm().findField("itemselector").reset();
}
}]
}]
}],
buttons: [{
text: "Save",
handler: function(){
if(isForm.getForm().isValid()){
Ext.Msg.alert("Submitted Values", "The following will be sent to the server: <br />"+
isForm.getForm().getValues(true));
}
}
}]
});
});
</script>
<h1>MultiSelect and ItemSelector</h1>
<b>MultiSelect</b><br />
<p>Press Save with no items selected to see an example of validation applied.</p>
<div id="multiselect" class="demo-ct" style="margin-bottom:15px;"></div>
<b>ItemSelector</b><br />
<p>Supports drag and drop, double-click, button move/reorder, etc.
<div id="itemselector" class="demo-ct"></div>
</body>
</html>
Set selected list items in a list box
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/examples/ux/css/MultiSelect.css"/>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/examples/shared/examples.css" />
<script type="text/javascript" src="ext-3.0.0/examples/ux/MultiSelect.js"></script>
<script type="text/javascript" src="ext-3.0.0/examples/ux/ItemSelector.js"></script>
</head>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = "side";
/*
* Ext.ux.form.MultiSelect Example Code
*/
var msForm = new Ext.form.FormPanel({
title: "MultiSelect Test",
width: 700,
bodyStyle: "padding:10px;",
renderTo: "multiselect",
items:[{
xtype: "multiselect",
fieldLabel: "Multiselect<br />(Required)",
name: "multiselect",
width: 250,
height: 200,
allowBlank:false,
store: [[123,"One Hundred Twenty Three"],
["1", "One"], ["2", "Two"], ["3", "Three"], ["4", "Four"], ["5", "Five"],
["6", "Six"], ["7", "Seven"], ["8", "Eight"], ["9", "Nine"]],
tbar:[{
text: "clear",
handler: function(){
msForm.getForm().findField("multiselect").reset();
}
}],
ddReorder: true
}],
tbar:[{
text: "Options",
menu: [{
text: "Set Value (2,3)",
handler: function(){
msForm.getForm().findField("multiselect").setValue("2,3");
}
},{
text: "Toggle Enabled",
handler: function(){
var m = msForm.getForm().findField("multiselect");
if (!m.disabled) {
m.disable();
} else {
m.enable();
}
}
}]
}],
buttons: [{
text: "Save",
handler: function(){
if(msForm.getForm().isValid()){
Ext.Msg.alert("Submitted Values", "The following will be sent to the server: <br />"+
msForm.getForm().getValues(true));
}
}
}]
});
var ds = new Ext.data.ArrayStore({
data: [[123,"One Hundred Twenty Three"],
["1", "One"], ["2", "Two"], ["3", "Three"], ["4", "Four"], ["5", "Five"],
["6", "Six"], ["7", "Seven"], ["8", "Eight"], ["9", "Nine"]],
fields: ["value","text"],
sortInfo: {
field: "value",
direction: "ASC"
}
});
/*
* Ext.ux.form.ItemSelector Example Code
*/
var isForm = new Ext.form.FormPanel({
title: "ItemSelector Test",
width:700,
bodyStyle: "padding:10px;",
renderTo: "itemselector",
items:[{
xtype: "itemselector",
name: "itemselector",
fieldLabel: "ItemSelector",
imagePath: "ext-3.0.0/examples/ux/images/",
multiselects: [{
width: 250,
height: 200,
store: ds,
displayField: "text",
valueField: "value"
},{
width: 250,
height: 200,
store: [["10","Ten"]],
tbar:[{
text: "clear",
handler:function(){
isForm.getForm().findField("itemselector").reset();
}
}]
}]
}],
buttons: [{
text: "Save",
handler: function(){
if(isForm.getForm().isValid()){
Ext.Msg.alert("Submitted Values", "The following will be sent to the server: <br />"+
isForm.getForm().getValues(true));
}
}
}]
});
});
</script>
<h1>MultiSelect and ItemSelector</h1>
<b>MultiSelect</b><br />
<p>Press Save with no items selected to see an example of validation applied.</p>
<div id="multiselect" class="demo-ct" style="margin-bottom:15px;"></div>
<b>ItemSelector</b><br />
<p>Supports drag and drop, double-click, button move/reorder, etc.
<div id="itemselector" class="demo-ct"></div>
</body>
</html>