Ext中form里面的全部控件的演示！

最新推荐文章于 2018-04-25 15:34:21 发布

iteye_11428

最新推荐文章于 2018-04-25 15:34:21 发布

阅读量121

点赞数

CC 4.0 BY-SA版权

分类专栏： Ext 文章标签： EXT PHP

本文链接：https://blog.youkuaiyun.com/iteye_11428/article/details/81677310

Ext 专栏收录该内容

36 篇文章

订阅专栏

本文介绍了一个使用ExtJS框架创建的表单实例，包括多种输入组件如文本框、复选框、日期选择器等，并展示了如何配置这些组件及初始化数据加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ext.onReady(function(){
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 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({ //radio
                border:false,
                title:'radio',
                items:[
                    new Ext.form.Radio({
                        labelSeparator:'',
                        name:'radio',
                        checked:true,
                        boxLabel:'radio 1'
                    }),
                    new Ext.form.Radio({
                        labelSeparator:'',
                        name:'radio',
                        checked:true,
                        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 : "这个字段最好不要为空",
                msgTarget:'under',
                maskRe:/[a-zA-z]/gi
            }),
            new Ext.form.NumberField({ //NumberField
                allowNegative:true,
                fieldLabel:'number',
                  name:'number'
            }),
            new Ext.form.TextArea({    //TextArea
                fieldLabel:'textarea',
                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
            }),
            new Ext.form.ComboBox({ //combobox
                fieldLabel:'ComboBox',
                displayField:'key',
                mode: 'local',
                store:store
            }),
            new Ext.form.DateField({ //DateField
                fieldLabel:'DateField',
                format:'Y-m-d',
                disabledDays:[0,6]
            }),
            new Ext.form.TimeField({//TimeField
                fieldLabel:'TimeField',
                mode: 'local',
                increment:60

            })
            ]
        });
form.render(document.body);

htmleditor.setRawValue("<h1>hello world</h1>");
htmleditor.syncValue();

});