Fix #5622 - fix roojs dynamic example

[roojs1] / examples / form / dynamic.js

diff --git a/examples/form/dynamic.js b/examples/form/dynamic.js
index 3a3e613..0534df9 100644 (file)
--- a/examples/form/dynamic.js
+++ b/examples/form/dynamic.js
@@ -11,7 +11,8 @@
  
 var mform;
 var simple;
-\r
+var signature;
+
 Roo.onReady(function(){
 
     Roo.QuickTips.init();
@@ -40,11 +41,19 @@ Roo.onReady(function(){
             width:175
         }),
 
+        
+        
         new Roo.form.TextField({
             fieldLabel: 'Company',
             name: 'company',
             width:175
         }),
+        new Roo.form.TextField({
+            fieldLabel: 'Password',
+            name: 'pwd',
+            inputType: 'password',
+            width:175
+        }),
 
         new Roo.form.TextField({
             fieldLabel: 'Email',
@@ -52,7 +61,7 @@ Roo.onReady(function(){
             vtype:'email',
             width:175
         }),
-         new Roo.form.DayPicker({
+        new Roo.form.DayPicker({
             fieldLabel: 'Pick a day',
             name: 'daypick',
             width:175
@@ -81,9 +90,10 @@ Roo.onReady(function(){
                         xtype : 'ComboBoxArray',
                         xns : Roo.form,
                         fieldLabel: 'Multi select test',
-                        name: 'country',
-                        hiddenName: 'countryNames',
-                        width: 500,
+                        name: 'countryNames',
+                        hiddenName: 'country',
+                        
+                        width: 550,
                         combo : {
                             
                             valueField : 'abbr',
@@ -101,8 +111,9 @@ Roo.onReady(function(){
                                 data : Roo.exampledata.states // from states.js    
                             },
                             width: 200,
+                            listWidth : 300,
                             editable : false,
-                            displayField:'state',
+                            
                             typeAhead: false,
                             mode: 'local',
                             triggerAction: 'all',
@@ -117,6 +128,85 @@ Roo.onReady(function(){
                 ]
             },
             
+            
+            {
+                
+                xtype : 'Column', 
+                width: 500, // precise column sizes or percentages or straight CSS
+                items : [
+                    {
+                        xtype : 'ComboBoxArray',
+                        xns : Roo.form,
+                        fieldLabel: 'Multi select test',
+                        
+                        
+                        name: 'countrylist_names',
+                        hiddenName: 'countrylist',
+                        
+                        width: 550,
+                        combo : {
+                            
+                            valueField : 'code',
+                            displayField : 'title',
+                            
+                            // thes are not really needed as parent overwrites them!?
+                            name : 'country_name',
+                            hiddenName : 'country',
+                            
+                            xtype : 'ComboBox',
+                            xns : Roo.form,
+                            
+                            
+                             
+        
+                            
+                            store: {
+                                xtype : 'Store',
+                                xns: Roo.data,
+                                
+                                proxy: {
+                                    xns : Roo.data,
+                                    xtype : 'ScriptTagProxy',
+                                    url: 'http://www.roojs.com/forum/topics-remote.php'
+                                },
+                                reader: {
+                                    xns : Roo.data,
+                                    xtype : 'JsonReader',
+                                    root: 'topics',
+                                    totalProperty: 'totalCount',
+                                    id: 'post_id',
+                                    fields : [
+                                        {name: 'title', mapping: 'topic_title'},
+                                        {name: 'topicId', mapping: 'topic_id'},
+                                        {name: 'author', mapping: 'author'},
+                                        {name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
+                                        {name: 'excerpt', mapping: 'post_text'}
+                                    ]
+                                }
+                            },
+                            width: 200,
+                            listWidth : 300,
+                            editable : false,
+                            
+                            typeAhead: false,
+                            mode: 'local',
+                            triggerAction: 'all',
+                            emptyText:'Select a state...',
+                            selectOnFocus:true,
+                            resizable:true
+                        }
+                        
+                        
+                    }
+                    
+                ]
+            },
+            
+           
+
+            
+            
+            
             {
                 
                 xtype : 'Column', 
@@ -155,9 +245,43 @@ Roo.onReady(function(){
                         name: 'email',
                         vtype:'email',
                         width:225
+                    },
+                    
+                    {
+                        xtype : 'Select',
+                        fieldLabel: 'Country',
+                        name: 'scountry',
+                        //vtype:'email',
+                        width:225,
+                        valueField :'code',
+                        displayField  : 'title',
+                        emptyText : 'Select a country',
+                        store: {
+                             xtype : 'Store',
+                             xns: Roo.data,
+                             
+                             proxy: {
+                                 xns : Roo.data,
+                                 xtype : 'HttpProxy',
+                                 url: 'sample.data.json'
+                             },
+                             reader: {
+                                 xns : Roo.data,
+                                 xtype : 'JsonReader',
+                                 root: 'data',
+                                 totalProperty: 'totalCount',
+                                 id: 'post_id',
+                                 fields : [
+                                     'code', 'title'
+                                 ]
+                             }
+                         },
                     }
                 ]
-            },  
+            },
+            
+            
+            
             {
                   
                 xtype : 'Column', 
@@ -170,7 +294,8 @@ Roo.onReady(function(){
                         fieldLabel:'Biography',
                         width:550,
                         height:200,
-                        resizable: 's' /// where the handles should got..
+                        resizable: 's', /// where the handles should got..
+                        toolbars : [ 'ToolbarStandard', 'ToolbarContext' ]  
                     }
                 ]
             }
@@ -180,14 +305,15 @@ Roo.onReady(function(){
     mform.addButton('Save');
     mform.addButton('Cancel');
 
-   
+   /*
     mform.render('form-ct2');
     mform.setValues({
-        country  : 'HK,SG',
-        countryNames : 'Hong Kong, Singapore'
-        
-    })
-
+        country  : 'AK,LA',
+        countryNames : 'Alaska,Louisana',
+        countrylist  : 'AG,AZ',
+        countrylist_names : 'Antigua and Barbuda,Azerbaijan'        
+    });
+    */
     /*
      * ================  Form 3  =======================
      */
@@ -244,6 +370,12 @@ Roo.onReady(function(){
             name: 'dob',
             width:190,
             allowBlank:false
+        }),
+        new Roo.form.MonthField({
+            fieldLabel: 'Date of Month',
+            name: 'dom',
+            width:190,
+            allowBlank:false
         })
     );
 
@@ -376,6 +508,39 @@ Roo.onReady(function(){
         labelAlign: 'left',
         labelWidth: 120,
         items : [
+            {
+            
+                xtype: 'Checkbox',
+                xns : Roo.form,
+                fieldLabel: 'A checkbox',
+                boxLabel:'RooJS v1.1.1',
+                name:'extuser',
+                inputValue : '1',
+                value : '1',
+                width:'auto'
+            },
+            
+            {
+            
+                xtype: 'Radio',
+                xns : Roo.form,
+                fieldLabel: 'A test radio box',
+                boxLabel:'Test1',
+                name:'radiotest',
+                inputValue : '1',
+                width:'auto'
+            },
+              {
+            
+                xtype: 'Radio',
+                xns : Roo.form,
+                fieldLabel: 'A test radio box2',
+                boxLabel:'Test1',
+                name:'radiotest',
+                inputValue : '2',
+                checked: true,
+                width:'auto'
+            },
             {
             
                 xtype: 'Checkbox',
@@ -387,6 +552,8 @@ Roo.onReady(function(){
                 value : '1',
                 width:'auto'
             },
+            
+            
             {
                 xtype : 'DisplayField',
                 xns : Roo.form,
@@ -431,6 +598,61 @@ Roo.onReady(function(){
     form5.render('form-ct5');
  
     
+//    form6 = new Roo.form.Form({
+//        labelAlign: 'left',
+//        labelWidth: 120,
+//        items : [
+//            {
+//            
+//                xtype: 'TimePicker',
+//                xns : Roo.form,
+//                fieldLabel: 'test time picker',
+//                name: 'time'
+//            },
+//            {
+//                xtype: 'DateDisplay',
+//                xns : Roo.form,
+//                fieldLabel: 'test date picker',
+//                name: 'date'
+//            }
+//             
+//        
+//        ]
+//    });
+//    
+//    form6.render('form-ct6');
+    
+    
+    
+    /*
+     * ================ form 7 =======================
+     */
+    signature = new Roo.form.Form({
+        labelWidth: 75, // label settings here cascade unless overridden
+        url:'save-form.php',
+        width: 500
+    });
+    signature.add(
+        new Roo.form.Signature({
+            fieldLabel: 'Signature',
+            name: 's',
+            listeners : {
+                confirm : function (_self)
+                {
+                    Roo.log(_self.getImageDataURI());
+                    Roo.log('in confirm');
+                }
+            },
+            width: 300
+        })
+    );
+//
+//    form7.addButton('Save');
+//    form7.addButton('Cancel');
+
+    signature.render('form-ct7');
+    
+