Only some code for ExtJS4 form component-优快云博客

本文介绍使用ExtJS创建表单的各种组件实例，包括组合框、单选按钮组、显示字段、数字输入框、日期选择器等，并展示了如何通过按钮触发逻辑来改变表单的状态。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
Ext.onReady(function(){

	Ext.define('User', {
			    extend: 'Ext.data.Model',
			    fields: [ 'name', 'email', 'phone' ]
			});
	var userStore = Ext.create('Ext.data.Store', {
	    model: 'User',
			//groupField:'name',
	    data: [
	        { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
	        { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
	        { name: 'Homer', email: 'home@simpsons.com', phone: '555-222-1244' },
	        { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
	    ],
			autoLoad:true,
			proxy: {
        type: 'memory',
        reader: {
            type: 'json'
						//	root: 'users'
        }
    	}
		  
	});
	var combox = Ext.create('Ext.form.ComboBox',{
			fieldLable:'test',
			store: userStore,
			triggerAction : 'all',
			queryModel:'local',
			forceSelection: true,
			selectOnFocus:false,
			allowBlank:true,
			displayField:'name',
			renderTo:Ext.getBody(),
			listeners:{

					scope:this,
					'select':function(combo,record, index){
					var value = combo.getValue();
					var rec = combo.findRecord(combo.valueField || combo.displayField, value);
					var ind = combo.store.indexOf(rec);
					alert('selected index = ' + ind + ' and record.value=' + value);
					}
			}

	});
	var panel = Ext.create('Ext.form.Panel', {
                 title      : 'Order Form',
                 width      : 300,
                  bodyPadding: 10,
                 renderTo   : Ext.getBody(),
                 items: [
        
                   	{
       			xtype:'fieldcontainer',
						fieldLabel:'Size',
						defaultType:'radiofield',
						defaults:{
								flex:1
						},
						layout:'hbox',
						items:[
									{
											boxLabel:'M',
											name:'size',
											inputVlue:'m',
											id:'radio1'
									},
									{
											boxLabel:'L',
											name:'size',
											inputVlue:'l',
											id:'radio2'
									},
									{
											boxLabel:'XL',
											name:'size',
											inputVlue:'xl',
											id:'radio3'
									}
											

						]
      		
      	},
        {
            xtype      : 'fieldcontainer',
            fieldLabel : 'Color',
            defaultType: 'radiofield',
            defaults: {
                flex: 1
            },
            layout: 'hbox',
            items: [
                {
                    boxLabel  : 'Blue',
                    name      : 'color',
                    inputValue: 'blue',
                    id        : 'radio4'
                }, {
                    boxLabel  : 'Grey',
                    name      : 'color',
                    inputValue: 'grey',
                    id        : 'radio5'
                }, {
                    boxLabel  : 'Black',
                    name      : 'color',
                    inputValue: 'black',
                    id        : 'radio6'
                }
            ]
        },
        {
						xtype:'radiogroup',
						columns:2,
						vertical:true,
						items: [
	            { boxLabel: 'Item 1', name: 'rb', inputValue: '1' },
	            { boxLabel: 'Item 2', name: 'rb', inputValue: '2', checked: true},
	            { boxLabel: 'Item 3', name: 'rb', inputValue: '3' },
	            { boxLabel: 'Item 4', name: 'rb', inputValue: '4' },
	            { boxLabel: 'Item 5', name: 'rb', inputValue: '5' },
	            { boxLabel: 'Item 6', name: 'rb', inputValue: '6' }
        		],
						id:'radiogroup1'

				},
      	{
      			xtype:'displayfield',
						name:'displayfield1',
						fieldLabel:'only a lable',
						value:'Display field <span style="color:green;">value</span>'
      	},
				{
						xtype:'numberfield',
						name:'number1',
						fieldLabel:'number field',
						value:5,
						id:'number1',
						minValue:0,
						maxValue:50
				},
				{
						xtype:'checkboxfield',
						name:'checkbox1',
						fieldLabel:'checkBox',
						boxLabel:'box label1',
						id:'checkbox1'
				},
				{
						xtype:'datefield',
						name:'data1',
						fieldLabel:'data field'
				}
    ],
    bbar: [
        {
            text: 'Smaller Size',
            handler: function() {
                var radio1 = Ext.getCmp('radio1'),
                    radio2 = Ext.getCmp('radio2'),
                    radio3 = Ext.getCmp('radio3');

                //if L is selected, change to M
                if (radio2.getValue()) {
                    radio1.setValue(true);
                    return;
                }

                //if XL is selected, change to L
                if (radio3.getValue()) {
                    radio2.setValue(true);
                    return;
                }

                //if nothing is set, set size to S
                radio1.setValue(true);
								//alert(Ext.getCmp('checkbox1').getValue());
								//alert(Ext.getCmp('number1').getValue());
								//The method below is used to fetch the selected value of radio group
								
								alert(Ext.getCmp("radiogroup1").items.get(0).getGroupValue());

            }
        },
        {
            text: 'Larger Size',
            handler: function() {
                var radio1 = Ext.getCmp('radio1'),
                    radio2 = Ext.getCmp('radio2'),
                    radio3 = Ext.getCmp('radio3');

                //if M is selected, change to L
                if (radio1.getValue()) {
                    radio2.setValue(true);
                    return;
                }

                //if L is selected, change to XL
                if (radio2.getValue()) {
                    radio3.setValue(true);
                    return;
                }

                //if nothing is set, set size to XL
                radio3.setValue(true);
            }
        },
        '-',
        {
            text: 'Select color',
            menu: {
                indent: false,
                items: [
                    {
                        text: 'Blue',
                        handler: function() {
                            var radio = Ext.getCmp('radio4');
                            radio.setValue(true);
                        }
                    },
                    {
                        text: 'Grey',
                        handler: function() {
                            var radio = Ext.getCmp('radio5');
                            radio.setValue(true);
                        }
                    },
                    {
                        text: 'Black',
                        handler: function() {
                            var radio = Ext.getCmp('radio6');
                            radio.setValue(true);
                        }
                    }
                ]
            }
        }
    ]
});
			
});