JavaScript DHTML/Ext JS/ListBox

Материал из Web эксперт
Перейти к: навигация, поиск

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>


</source>