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

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

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( " www.langsin.com " );
          }
      }]
  });
});

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

Tag标签: ExtJs2.0

posted @ 2008-08-03 10:36 谦虚的天下 阅读(1679) 评论(13)   编辑 收藏 所属分类: ExtJs学习系列

发表评论

   回复   引用   查看     

#1楼  2008-08-03 10:42 | Waitd Ding       

很好很强大:)

不过离上一篇隔了不少时间,LZ最近比较忙么?

希望迟早完成这个系列:)

   回复   引用   查看     

#2楼  [ 楼主]2008-08-03 10:48 | 谦虚的天下       

@Waitd Ding
是啊，隔了个把月啦，呵呵

   回复   引用   查看     

#3楼  2008-08-03 12:33 | 李彬       

继续加油

   回复   引用     

#4楼  2008-08-03 21:32 | wuyou [未注册用户]

不如说说怎么和asp.net结合应用。这类光客户端怎么用的文章太多了

   回复   引用   查看     

#5楼  [ 楼主]2008-08-03 21:37 | 谦虚的天下       

@wuyou
下篇

   回复   引用     

#6楼  2008-08-03 23:08 | guest [未注册用户]

extjs....最让我关心的是对它性能的优化，窗口一复杂打开就很慢...

   回复   引用     

#7楼  2008-08-03 23:39 | GYB [未注册用户]

很好很强大

   回复   引用     

#8楼  2008-08-04 14:01 | iomo [未注册用户]

终于等来了7.不容易啊
楼主你全部写完后出本书，我一定去买

   回复   引用   查看     

#9楼  [ 楼主]2008-08-04 14:04 | 谦虚的天下       

@iomo
thank you

   回复   引用     

#10楼  2008-08-06 17:13 | GYB [未注册用户]

为什么 我的radio 是竖向排列的
这个layout:"column" 加和不加一个样啊

   回复   引用   查看     

#11楼  [ 楼主]2008-08-06 17:18 | 谦虚的天下       

@GYB
是否正确设置了
width:330,
labelWidth:30,
isFormField:true
columnWidth:.5这几个参数
请对照示例中代码再测试下

   回复   引用     

#12楼  2008-08-06 19:59 | GYB [未注册用户]

试了下用 layout:table 能横排显示
就是字体太大了

为什么用Ext.get("sex").dom.value 取出来的值 怎么是on啊

   回复   引用   查看     

#13楼  [ 楼主] 2008-08-06 21:05 | 谦虚的天下       

@GYB
要用inputValue，我会在下篇教程中谈到，谢谢支持！

<script type=text/javascript> function pageLoad() { Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(handleInitializeRequest); //Sys.WebForms.PageRequestManager.getInstance().add_endRequest(handleEndRequest); } function handleInitializeRequest(sender, args) { var prm = Sys.WebForms.PageRequestManager.getInstance(); var eid = args.get_postBackElement().id; /*if (eid.indexOf("DeleteLink")>0) { args.get_postBackElement().innerHTML = " 正在删除..."; } else */ if (eid.indexOf("btnSubmit")>0) { document.getElementById("AjaxHolder_PostComment_ltSubmitMsg").innerHTML="正在提交..."; document.getElementById("AjaxHolder_PostComment_btnSubmit").disabled = true; } else if(eid.indexOf("refreshList")>0) { document.getElementById("AjaxHolder_PostComment_refreshList").innerHTML=" 正在刷新..."; } } function TempSave(ElementID) { try { CommentsPersistDiv.setAttribute("CommentContent",document.getElementById(ElementID).value); CommentsPersistDiv.save("CommentXMLStore"); } catch(ex) { } } function Restore(ElementID) { CommentsPersistDiv.load("CommentXMLStore"); document.getElementById(ElementID).value=CommentsPersistDiv.getAttribute("CommentContent"); } </script>

社区   新闻   新用户注册   刷新评论列表  

标题		请输入标题
姓名		请输入你的姓名
主页
Email	(只有博主才能看到)邮件地址无效
请输入验证码 验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容) 请输入评论内容
Remember Me?
	登录  使用高级评论  新用户注册  返回页首  恢复上次提交
[使用Ctrl+Enter键可以直接提交]
该文被作者在 2008-08-06 21:07 编辑过
相关文章: .NET设计模式系列文章 使用Visual Studio2005入门.Net2.0系列视频教程 ASP.NET AJAX入门系列 Microsoft .Net Remoting系列专题之一:.Net Remoting基础篇 prototype.js　1.4版开发者手册(强烈推荐) Castle 开发系列文章
相关链接: <script type=text/javascript> function GetMeta(ametaName){ var METAs = document.getElementsByTagName("meta"); for (var i=0; i "); document.write("