JavaScript DHTML/Ext JS/ListBox
Содержание
Drop and drop between MultiSelect list box
<source lang="html4strict">
<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>
<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
(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:
"+ 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:
"+ isForm.getForm().getValues(true)); } } }] });
}); </script>
MultiSelect and ItemSelector
MultiSelect
Press Save with no items selected to see an example of validation applied.
ItemSelector
Supports drag and drop, double-click, button move/reorder, etc.
</body> </html>
</source>
MultiSelect list box
<source lang="html4strict">
<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>
<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
(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:
"+ 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:
"+ isForm.getForm().getValues(true)); } } }] });
}); </script>
MultiSelect and ItemSelector
MultiSelect<p>Press Save with no items selected to see an example of validation applied.
ItemSelector
Supports drag and drop, double-click, button move/reorder, etc.
</body> </html>
</source>
Reorder MultiSelect list box
<source lang="html4strict">
<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>
<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
(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:
"+ 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:
"+ isForm.getForm().getValues(true)); } } }] });
}); </script>
MultiSelect and ItemSelector
MultiSelect<p>Press Save with no items selected to see an example of validation applied.
ItemSelector
Supports drag and drop, double-click, button move/reorder, etc.
</body> </html>
</source>
Set selected list items in a list box
<source lang="html4strict">
<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>
<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
(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:
"+ 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:
"+ isForm.getForm().getValues(true)); } } }] });
}); </script>
MultiSelect and ItemSelector
MultiSelect<p>Press Save with no items selected to see an example of validation applied.
ItemSelector
Supports drag and drop, double-click, button move/reorder, etc.
</body> </html>