Extjs_最常用的表单2

Ext.form.hidden隐藏字段：

 Ext.onReady(function () {
            Ext.QuickTips.init();
            Ext.create("Ext.form.Panel", {
                title: 'hidden示例',
                frame: true,
                height: 100,
                width: 300,
                renderTo: Ext.getBody(),
                bodyPadding: 5,
                defaultType: 'textfield',
                defaults: {
                    labelSeparator: ': ',
                    labelWidth: 70,
                    width: 200,
                    labelAlign:'left'
                },
                items: [{
                    name: 'username',
                    fieldLabel:'姓名'
                }, {
                    name: 'sex',
                    fieldLabel:'性别'
                },{
                    name: 'age',
                    xtype:'hidden'
                }]
            });
        });

 

Ext.form.field.htmlEditor编辑器字段：

 Ext.onReady(function () {
            Ext.QuickTips.init();
            Ext.create("Ext.form.Panel", {
                title: 'htmlEditor演示',
                width: 630,
                frame: true,
                renderTo: Ext.getBody(),
                bodyPadding: 5,
                items: [{
                    fieldLabel: 'HTML字段',
                    xtype: 'htmleditor',
                    height: 150,
                    width: 600,
                    value: 'extjs4登场',
                    labelWidth: 70,
                    labelSeparator: ': ',
                    createLinkText: '创建超级连接',
                    defaultLinkText: 'http://www.',
                    enableAlignments: true,
                    enableColors: true,
                    enableFont: true,
                    enableFontSize: true,
                    enableFormat: true,
                    enableLinks: true,
                    enableLists: true,
                    enableSourceEdit: true,
                    fontFamilies: ['宋体', '隶书', '黑体'],
                    //buttonTips: {
                    //    bold: {
                    //        title: 'Bold(Ctrl+B)',
                    //        text: '粗体'
                    //    },
                    //    italic: {
                    //        title: 'Italic(Ctrl+I)',
                    //        text: '斜体'
                    //    },
                    //    underline: {
                    //        title: 'Underline(Ctrl+U)',
                    //        text: '下划线'
                    //    },
                    //    increasefontsize: {
                    //        title: 'Grow Text',
                    //        text: '增大字体'
                    //    },
                    //    decreasefontsize: {
                    //        title: 'Grow Text',
                    //        text: '变小字体'
                    //    },
                    //    backcolor: {
                    //        title: 'Text Highlight Color',
                    //        text: '背景色'
                    //    },
                    //    forecolor: {
                    //        title: 'Font Color',
                    //        text: '前景色'
                    //    },
                    //    justifyleft: {
                    //        title: 'Align Text left',
                    //        text: '左对齐'
                    //    },
                    //    justifycenter: {
                    //        title: 'Align Text Center',
                    //        text: '居中对齐'
                    //    },
                    //    justifyright: {
                    //        title: 'Align Text right',
                    //        text: '居右对齐'
                    //    },
                    //    insertunorderedlist: {
                    //        title: 'Bullet List',
                    //        text: '项目符号'
                    //    },
                    //    insertorderedlist: {
                    //        title: 'Number List',
                    //        text: '数字编号'
                    //    },
                    //    creatlink: {
                    //        title: 'Hyperlink',
                    //        text: '超连接'
                    //    },
                    //    sourceedit: {
                    //        title: 'Source Edit',
                    //        text: '切换源代码编辑模式'
                    //    }
                    //}
                }]
            });
        });

 

Ext.form.Dispaly展示字段，不会被提交

Ext.onReady(function () {
            Ext.create("Ext.form.Panel", {
                title: 'Display演示',
                width: 200,
                frame: true,
                renderTo: Ext.getBody(),
                bodyPadding: 5,
                items: [{
                    fieldLabel: '展示字段',
                    xtype: 'displayfield',
                    value: '我是好人',
                    labelWidth: 70,
                    labelSeparator:': '
                }, {}]
            });
        });

 

Ext.form.Label

 Ext.create("Ext.form.Panel",{
                title:'Ｌａｂｅｌ显示',
                width:200,
                frame:true,
                renderTo:Ext.getBody(),
                bodyPadding:5,
                items:[{
                    xtype:'label',
                    forId:'userName',
                    text:'用户名'
                },{
                    name:'userName',
                    xtype:'textfield',
                    inputId:'userName',
                    hideLabel:true
                }]
            });
        });