* <script type="text/javascript">
*/
-var mform;\r
+var mform;
+var simple;
+var signature;
+
Roo.onReady(function(){
Roo.QuickTips.init();
/*
* ================ Simple form =======================
*/
- var simple = new Roo.form.Form({
+ simple = new Roo.form.Form({
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php'
});
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',
name: 'email',
vtype:'email',
width:175
+ }),
+ new Roo.form.DayPicker({
+ fieldLabel: 'Pick a day',
+ name: 'daypick',
+ width:175
})
);
mform = new Roo.form.Form({
labelAlign: 'top',
items : [
+
{
xtype : 'Column',
- width: 600, // precise column sizes or percentages or straight CSS
+ width: 500, // precise column sizes or percentages or straight CSS
items : [
{
- xtype : 'TextField'
+ xtype : 'ComboBoxArray',
+ xns : Roo.form,
+ fieldLabel: 'Multi select test',
+ name: 'countryNames',
+ hiddenName: 'country',
+
+ width: 550,
+ combo : {
+
+ valueField : 'abbr',
+ displayField : 'state',
+
+ name : 'countryNames',
+ hiddenName : 'country',
+
+ xtype : 'ComboBox',
+ xns : Roo.form,
+ store: {
+ xtype : 'SimpleStore',
+ xns: Roo.data,
+ fields: ['abbr', 'state'],
+ data : Roo.exampledata.states // from states.js
+ },
+ width: 200,
+ listWidth : 300,
+ editable : false,
+
+ typeAhead: false,
+ mode: 'local',
+ triggerAction: 'all',
+ emptyText:'Select a state...',
+ selectOnFocus:true,
+ resizable:true
+ }
+
+
+ }
+
+ ]
+ },
+
+
+ {
+
+ 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',
+ width: 272, // precise column sizes or percentages or straight CSS
+ items : [
+ {
+ xtype : 'TextField',
fieldLabel: 'First Name',
name: 'first',
width:225
},
{
- xtype : 'TextField'
+ xtype : 'TextField',
fieldLabel: 'Company',
name: 'company',
width:225
}
- ],
+ ]
},
{
xtype : 'Column',
width:272,
style:'margin-left:10px',
- clear:true
+ clear:true,
items : [
{
- xtype : 'TextField'
+ xtype : 'TextField',
fieldLabel: 'Last Name',
name: 'last',
width:225
},
{
- xtype : 'TextField'
+ xtype : 'TextField',
fieldLabel: 'Email',
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',
width:600,
- labelAlign: 'top'
+ labelAlign: 'top',
items : [
{
- xtype : 'HtmlEditor'
+ xtype : 'HtmlEditor',
name : 'bio',
fieldLabel:'Biography',
width:550,
- height:400
+ height:200,
+ resizable: 's', /// where the handles should got..
+ toolbars : [ 'ToolbarStandard', 'ToolbarContext' ]
}
]
}
- ],
- buttons : [
- {
- xtype : 'Button',
- text : 'Save'
-
- },
- {
- xtype : 'Button',
- text : 'Cancel'
-
- }
- ]
+ ]
+
});
+ mform.addButton('Save');
+ mform.addButton('Cancel');
+ /*
mform.render('form-ct2');
-
+ mform.setValues({
+ country : 'AK,LA',
+ countryNames : 'Alaska,Louisana',
+ countrylist : 'AG,AZ',
+ countrylist_names : 'Antigua and Barbuda,Azerbaijan'
+ });
+ */
/*
* ================ Form 3 =======================
*/
name: 'dob',
width:190,
allowBlank:false
+ }),
+ new Roo.form.MonthField({
+ fieldLabel: 'Date of Month',
+ name: 'dom',
+ width:190,
+ allowBlank:false
})
);
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',
fieldLabel: 'A checkbox',
boxLabel:'RooJS v1.1.1',
name:'extuser',
+ inputValue : '1',
+ value : '1',
width:'auto'
},
+
+
{
xtype : 'DisplayField',
xns : Roo.form,
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');
+
+