* <script type="text/javascript">
*/
-var mform;\r
+var mform;
+var simple;
+\r
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'
});
name: 'email',
vtype:'email',
width:175
+ }),
+ new Roo.form.DayPicker({
+ fieldLabel: 'Pick a day',
+ name: 'daypick',
+ width:175
})
);
* ================ Form 2 =======================
*/
mform = new Roo.form.Form({
- labelAlign: 'top'
+ labelAlign: 'top',
+ items : [
+
+ {
+
+ xtype : 'Column',
+ width: 500, // precise column sizes or percentages or straight CSS
+ items : [
+ {
+ 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: 'countryNames2',
+ hiddenName: 'country2',
+
+ width: 550,
+ combo : {
+
+ valueField : 'abbr',
+ displayField : 'state',
+
+ // thes are not really needed as parent overwrites them!?
+ name : 'countryNames',
+ 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',
+ fieldLabel: 'Company',
+ name: 'company',
+ width:225
+ }
+ ]
+ },
+
+ {
+ xtype : 'Column',
+ width:272,
+ style:'margin-left:10px',
+ clear:true,
+ items : [
+ {
+ xtype : 'TextField',
+ fieldLabel: 'Last Name',
+ name: 'last',
+ width:225
+ },
+ {
+ xtype : 'TextField',
+ fieldLabel: 'Email',
+ name: 'email',
+ vtype:'email',
+ width:225
+ }
+ ]
+ },
+ {
+
+ xtype : 'Column',
+ width:600,
+ labelAlign: 'top',
+ items : [
+ {
+ xtype : 'HtmlEditor',
+ name : 'bio',
+ fieldLabel:'Biography',
+ width:550,
+ height:200,
+ resizable: 's' /// where the handles should got..
+ }
+ ]
+ }
+ ]
+
});
-
- mform.column(
- {width:282}, // precise column sizes or percentages or straight CSS
- new Roo.form.TextField({
- fieldLabel: 'First Name',
- name: 'first',
- width:225
- }),
-
- new Roo.form.TextField({
- fieldLabel: 'Company',
- name: 'company',
- width:225
- })
- );
-
- mform.column(
- {width:272, style:'margin-left:10px', clear:true}, // apply custom css, clear:true means it is the last column
- new Roo.form.TextField({
- fieldLabel: 'Last Name',
- name: 'last',
- width:225
- }),
-
- new Roo.form.TextField({
- fieldLabel: 'Email',
- name: 'email',
- vtype:'email',
- width:225
- })
- );
-
- mform.container({},
- new Roo.form.HtmlEditor({
- toolbars : [
- new Roo.form.HtmlEditor.ToolbarStandard(),
- new Roo.form.HtmlEditor.ToolbarContext()
- ],
- id:'bio',
- name : 'bio',
- fieldLabel:'Biography',
- width:550,
- height:200
- })
- );
-
mform.addButton('Save');
mform.addButton('Cancel');
+
mform.render('form-ct2');
-
+ mform.setValues({
+ country : 'AK,LA',
+ countryNames : 'Alaska,Louisana',
+ country2 : 'AK,LA',
+ countryNames2 : 'Alaska,Louisana'
+ });
/*
* ================ Form 3 =======================
*/
text: 'Change Photo'
});
- var form = new Roo.form.Form({
- el : Roo.get('form-ct5'),
- labelAlign: 'right',
- labelWidth: 75,
+ form5 = new Roo.form.Form({
+ 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 : 'DisplayField',
xns : Roo.form,
+ name:'textex',
+ fieldLabel: 'Simple',
value : 'example text'
- }
+ } ,
+ {
+ xtype: 'ComboBox',
+ xns : Roo.form,
+ fieldLabel: 'State',
+ hiddenName:'state',
+ store: {
+ xtype: 'SimpleStore',
+ xns : Roo.data,
+ fields: ['abbr', 'state'],
+ data : Roo.exampledata.states // from states.js
+ },
+ displayField:'state',
+ typeAhead: true,
+ mode: 'local',
+ triggerAction: 'all',
+ emptyText:'Select a state...',
+ selectOnFocus:true,
+ width:190,
+ listeners : {
+ add : function()
+ {
+ Roo.MessageBox.alert("Alert", "Add Pressed");
+ },
+ edit : function()
+ {
+ Roo.MessageBox.alert("Alert", "Edit Pressed");
+ }
+
+ }
+ },
]
});
- //form.render(
+ form5.render('form-ct5');
projects / roojs1 / blobdiff