Ext 的表单（Form）

Ext.QuickTips.init();   //这句话加了才会出现日历
   
    var arr=[ [1, '小王'], [2, '小林'],[3, '张三'] ];
    var reader = new Ext.data.ArrayReader(
   {id: 0},
   [
    {name: 'value'},        
    {name: 'key'}   
    ]);
   
    var store=new Ext.data.Store({
      reader:reader
   });
   store.loadData(arr);
   
    var htmleditor=new Ext.form.HtmlEditor({
        fieldLabel:'htmleditor',
        width:450,
        fontFamilies:['宋体','隶书','楷书'],   //加字体
        name:'editor',
        id:'editor'
    });
    
    
          var oplist4 = new Ext.form.FieldSet({  
                                        title: '序号位数',  
                                        autoHeight: true,  
                                        width: 260,  
                                        layout:'table',  //这个让radio横着放
                                        items:[{xtype:'radio',  
                                                name:'xh',  
                                                boxLabel:'一位',  
                                                id:'radioxh1'  
                                            },{xtype:'radio',  
                                               name:'xh',  
                                               boxLabel:'两位',  
                                               id:'radioxh2'  
                                            },{xtype:'radio',  
                                               name:'xh',  
                                               boxLabel:'三位',  
                                               id:'radioxh3'  
                                            }]  
                                   });  
 // form.add(oplist4);  
    
    
    var combobox=new Ext.form.ComboBox({ //combobox
                fieldLabel:'ComboBox',
                resiable:true,
                handleHeight :100,  //
                displayField:'key',
                mode: 'local',
                store:store   //数据储存到这个comboBox
            });
            
	var form = new Ext.FormPanel({
	labelWidth: 75,
        url:'post.php',
        frame:true,
        width: 800,
        defaultType: 'textfield',
        items: [
            new Ext.form.Checkbox({     //checkbox
                fieldLabel:'checkbox',
                name:'cb',
                checked:true,
                boxLabel:'checkbox'
            }),
            new Ext.form.FieldSet({ //加一个FieldSet就把两个radio当作一组
                border:false,
                
                title:'radio',
                layout:'table',  //加这个属性 Radio 就是横着放的
                items:[
                    new Ext.form.Radio({
                        labelSeparator:'',
                        name:'radio',
                        checked:true,   //为true 被选中，false 不被选中
                        boxLabel:'radio 1'
                    }),
                    new Ext.form.Radio({
                        labelSeparator:'',
                        name:'radio',
                        checked:false,
                        boxLabel:'radio 2'
                    })
                ]
             }),
            new Ext.form.Hidden({   //hidden
                name:'hidden'
            }),
           
            htmleditor,
            new Ext.form.TextField({ //text
                fieldLabel:'text',
                name:'text',
                grow:true,
                allowBlank:false,
                blankText : "这个字段最好不要为空",  
                maskRe:/[a-zA-z]/gi
            }),
            new Ext.form.NumberField({  //NumberField
                allowNegative:true,
                fieldLabel:'number',
                allowBlank:false,    //该行要为false，下面的验证才有效果
                blankText : "该行不允许位空",
                  name:'number'
            }),
            new  Ext.form.TextArea({    //TextArea
                fieldLabel:'textarea',
                hideParent:true,
                preventScrollbars:true,
                name:'textarea'
            }),
            new Ext.form.TriggerField({ //TriggerField
                fieldLabel:'TriggerField',
                name:'TriggerField'
            }),
           new Ext.form.ComboBox({ //select
                fieldLabel:'select',
                editable:false,
                triggerAction: 'all',
                valueField:'value',
                displayField:'key',
                mode: 'local',
                store:store
            }),
            combobox,oplist4,
            
            new Ext.form.DateField({ //DateField
                fieldLabel:'DateField',
                format:'Y-m-d' ,//格式化日期
                allowBlank:false,
                disabledDays:[0,6] ,   //不让选择周六，周日
                disabledDaysText:"周末要休息",
                //maxText :"2008-01-28",
                invalidText :"您输入了不该输入的字符"
            }),
            new Ext.form.TimeField({//TimeField
                fieldLabel:'TimeField',
                mode: 'local',
                increment:15   //时间间隔
               
            })
            ]
        });
        
        
var action = new Ext.Action({
    text: 'Do something',
    handler: function(){
        Ext.Msg.alert('有情提示', '您点到我了！哈哈哈哈哈哈哈哈哈哈哈.');
    },
    iconCls: 'do-something'
});

var panel = new Ext.Panel({
    title: 'Actions 测试',
    width:500,
    height:300,
    tbar: [

    //将action做为一个菜单按钮添加到工具栏
        action, {
            text: 'Action Menu',
        //将action做为文本选择项添加到menu
            menu: [action]
        }
    ],
    items: [
    //由action构造button,添加到panel
        new Ext.Button(action)
    ],
    renderTo: Ext.getBody()
});

// 如果这儿setText.当然button/menu/toolbar中的action文本都变了
//action.setText('Something else');
form.render(document.body);

//htmleditor.setRawValue("<h1>hello world</h1>");
//htmleditor.syncValue();
//combobox.setValue("------------人物姓名-------------");


 

 

评论

4 楼 stevenzuo 2008-07-23  

问一下楼主 ：

<html>
<head>
</head>
<body>
<form>
 <table>
 	 请选择你最爱的电影：<br>
 	
 	<select name="test" size="6" width='60px'>
 				<option value="1">变形金刚</option>
 	 			<option value="2">全民超人</option> 	
 	 			<option value="3">蜘蛛侠</option> 	
 	 			<option value="4">蝙蝠侠</option>
 	 	 		<option value="5">夺宝奇兵</option>
 	</select>
 </table>
</form>
</body>
</html>

这个效果，在ext中要怎么实现呀？

3 楼 Octavus 2008-04-10  

要是不用DWR，单独用EXT怎么动态从后台取数据呢？

2 楼 xiongpf88 2008-03-12  

跟表格一样，需要从哪里读数据，然后放在哪里，如下面的代码。

var gridStore = new App.dwr.DwrGridStore({
// 调用服务器远程方法获取结果集
proxy : new App.dwr.DwrProxy({
// 调用的具体方法
dwrCall : 'DictionaryService.queryParentDictionaryAllService'
// 参数定义
}),
// 解析结果集
reader : new App.dwr.DwrReader({
// 结果集对象
root : 'list',
// 结果集的条数
totalProperty : 'total'
}, [
// 结果结构解析
{
name : 'id',
mapping : 'id'
}, {
name : 'name',
mapping : 'name'
}, {
name : 'modelKey',
mapping : 'modelKey'
}, {
name : 'parent',
mapping : 'parent'
}, {
name : 'taxis',
mapping : 'taxis'
}, {
name : 'state',
mapping : 'state'
}])
});

1 楼 goodfifa07 2008-03-12  

请问怎么从后台取数据放在Combo列表里面呢