ExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇)-白红宇

ExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇)

阅读量：2780 次

发布时间：2019-05-13

本文共 3277 字，大约阅读时间需要 10 分钟。

N久没有写extjs的，作为一个新手，我为我的这种懒惰行为感到惭愧！
鉴于有朋友反应前面的文章过于简单，我决定以后的文章如果没有闪光点就放在新手区(如果不适合，请跟帖)，不放在首页！
11.checkbox简单示例
效果图：

js代码：

Ext.onReady(
function
(){ 

   Ext.QuickTips.init();
var
 myform
=
new
 Ext.FormPanel({ 

      frame:
true
,
      width:
330
,
      layout:
"
form
"
,
      labelWidth:
30
,
      title:
"
checkbox简单示例
"
,
      labelAlign:
"
left
"
,
      renderTo:Ext.getBody(),
      items:[{ 

          xtype:
"
panel
"
,
          layout:
"
column
"
,
//
也可以是table,实现多列布局

 
         fieldLabel:
'
爱好
'
,
          isFormField:
true
,
//
非常重要,否则panel默认不显示fieldLabel

 
         items:[{ 

                  columnWidth:.
5
,
//
宽度为50%

 
                 xtype:
"
checkbox
"
,
                  boxLabel:
"
足球
"
,
//
显示在复选框右边的文字

 
                 name:
""

              },{ 

                  columnWidth:.
5
,
                  xtype:
"
checkbox
"
,
                  boxLabel:
"
篮球
"
,
                  name:
""

              }]
      }]
   });
 });

关于多列布局，我们可以使用column或者table布局解决！

//
其他几个参数

 
1
.checked：
true
//
true则选中，默认为false

 
2
.name:
"
**
"
//
name值

 
3
.value:
""
//
初始化值，默认为undefine

12.radio简单示例
基本上和checkbox一样，不过注意一组单选框必须name值相同，才能单选。
效果图：

代码：

//
基本同上，不做过多解释

 
Ext.onReady(
function
(){ 

   Ext.QuickTips.init();
var
 myform
=
new
 Ext.FormPanel({ 

      frame:
true
,
      width:
330
,
      layout:
"
form
"
,
      labelWidth:
30
,
      title:
"
radio简单示例
"
,
      labelAlign:
"
left
"
,
      renderTo:Ext.getBody(),
      items:[{ 

          xtype:
"
panel
"
,
          layout:
"
column
"
,
          fieldLabel:
'
性别
'
,
          isFormField:
true
,
          items:[{ 

                columnWidth:.
5
,
                xtype:
"
radio
"
,
                boxLabel:
"
男
"
,
                name:
"
sex
"

                
//inputV
alue

 
         },{ 

                columnWidth:.
5
,
                checked:
true
,
                xtype:
"
radio
"
,
                boxLabel:
"
女
"
,
                name:
"
sex
"

          }]
      }]
   });
 });

13.htmleditor简单示例
效果图：

js代码：

//
基本上同上

 
Ext.onReady(
function
(){ 

   Ext.QuickTips.init();
var
 myform
=
new
 Ext.FormPanel({ 

      frame:
true
,
      width:
600
,
      layout:
"
form
"
,
      labelWidth:
50
,
      title:
"
htmleditor简单示例
"
,
      labelAlign:
"
top
"
,
//
items中的标签的位置

 
      renderTo:Ext.getBody(),
      items:[{ 

           xtype:
"
htmleditor
"
,
           id:
"
he
"
,
           fieldLabel:
"
编辑器
"
,
           anchor:
"
99%
"

       }]
   });
 });

在这里我啰嗦个参数：

//
labelAlign参数

 
   labelAlign:此参数是指form表单中items各项的label位置，默认值为left，枚举值有left,right,top
 
//
我看见过有朋友认为此参数指title的位置，是错误的！

几个其他的参数：

//
补充几个参数

 
1
.hideLabel:
true
//
默认为false，还适用于有标签的所有表单组件

 //
下面的一组参数控制编辑器的工具栏选项,都是默认值为true

 
2
.enableColors：
true
//
默认为true，显示字体颜色，字体背景颜色

 
3
.enableAlignments:
true
//
左，中，右对齐

 
4
.enableFont：
true
//
字体

 
5
.enableFontSize:
false
//
字体大小，就是A旁边有个小箭头的

 
6
.enableFormat：
false
//
粗体，斜体，下划线

 
7
.enableLinks:
true
//
链接

 
8
.enableLists：
true
//
列表

 
9
.enableSourceEdit：
true
//
源代码编辑

14.datefield简单示例
效果图：

js代码：

Ext.onReady(
function
(){ 

   Ext.QuickTips.init();
var
 myform
=
new
 Ext.FormPanel({ 

      frame:
true
,
      width:
200
,
      layout:
"
form
"
,
      labelWidth:
30
,
      title:
"
dateditor简单示例
"
,
      labelAlign:
"
left
"
,
       renderTo:Ext.getBody(),
      items:[{ 

xtype:"datefield",
 
          fieldLabel:
"
生日
"
,
           anchor:
"
99%
"

       }]
   });
 });

15.timefield简单示例
把上面的例子中datefield改为timefield,效果图：

16.numberfield简单示例：
把上面的datefield改为numberfield，就只能输入数字了
17.triggerfield简单示例
说明：它提供了一个触发的事件onTriggerClick，datefield和combox都是继承它
效果图：(点击右边下拉按钮)

js代码：

Ext.onReady(
function
(){ 

   Ext.QuickTips.init();
var
 myform
=
new
 Ext.FormPanel({ 

      frame:
true
,
      width:
200
,
      layout:
"
form
"
,
      labelWidth:
30
,
      title:
"
triggerfield简单示例
"
,
      labelAlign:
"
left
"
,
       renderTo:Ext.getBody(),
      items:[{ 

           xtype:
"
trigger
"
,
           fieldLabel:
"
触发
"
,
           anchor:
"
99%
"
,
           onTriggerClick:
function
(e){ 

//
在这里写你要实现的事件，很容易扩展

 
              alert(
"
***
"
);
           }
       }]
   });
 });

好了，关于form的几个基本组件我们都蜻蜓点水的看了一遍，相信大家感性上知道是怎么回事啦！（总算快写完了formpanel）
前面有朋友说要做个一行多个控件，中间有文字的那种form布局，谢谢支持！
下篇我们就做一个复杂点的form组件，还能提交服务器的综合示例！敬请期待！

转载地址：http://erold.baihongyu.com/

你可能感兴趣的文章

这个为生信学习打造的开源 Python 文字教程真香！！！