Sencha 表单和表单组件2

/**
 * @author Changweihua
 */
//Ext.require(['Ext.form.Panel', 'Ext.form.FieldSet', 'Ext.field.*','Ext.event.*','Ext.mixin.*']);
Ext.application({
    name:'Chapter4',
    launch:function(){
                  
       var formPanel = Ext.create('Ext.form.Panel', {
           id:'formPanel',
           scrollable:'vertical',
           items:[{
               xtype:'fieldset',
               title:'组件2',
               instructions:'组件2',
               defaults:{
                   labelWidth:'20%'
               },
               items:[{
                   xtype:'radiofield',
                   name:'sex',
                   id:'rd_sex1',
                   label:'男性',
                   value:'male',
                   checked:true,
                   listeners:{
                       check:function(item, e){
                           Ext.Msg.alert('您选取了男性');
                       }
                   }
               },{
                   xtype:'radiofield',
                   name:'sex',
                   id:'rd_sex2',
                   label:'女性',
                   value:'female',
                   checked:false,
                   listeners:{
                       check:function(item, e){
                           Ext.Msg.alert('您选取了女性');
                       }
                   }
               },{
                   xtype:'fieldset',
                   title:'色彩',
                   defaults:{
                       xtype:'checkboxfield'
                   },
                   items:[{
                       name:'color',
                       label:'彩色',
                       value:'colored',
                       checked:true,
                       listeners:{
                           change:function(item, e){
                               Ext.Msg.alert('你选择了彩色');
                           }
                       }
                   }]
               },{
                   xtype:'selectfield',
                   name:'genre',
                   label:'种类',
                   displayField:'text',
                   valueField:'id',
                   options:[{
                       text:'喜剧',
                       id:'1'
                   },{
                       text:'文艺',
                       id:'2'
                   },{
                       text:'动作',
                       id:'3'
                   }]
                   ,listeners:{
                       change:function(sel, newValue, oldValue, opts){
                           switch(newValue.data.id){
                                case '1':
                                    Ext.Msg.alert('你选择了喜剧片');
                                    break;
                                case '2':
                                    Ext.Msg.alert('你选择了文艺片');
                                    break;
                                case '3':
                                    Ext.Msg.alert('你选择了动作片');
                                    break;
                            }
                        }
                    }
               },{
                   xtype:'fieldset',
                   title:'日期',
                   defaults:{
                       xtype:'datepickerfield'
                   },
                   items:[{
                       name:'released',
                       picker:{
                            yearFrom:2012,
                            yearTo:2013 
                       },
                       label:'日期',
                       value:new Date()
                   }]
               }]
           }]
       });
                  
       Ext.Viewport.add(formPanel);
                 
    }
});

点击查看原图

知识共享许可协议
《Sencha 表单和表单组件2》常伟华 创作。
采用 知识共享 署名-相同方式共享 3.0 中国大陆 许可协议进行许可。
相邻依据:发表时间
  • 多说评论
  • 签名
  • 新浪微博
  • 默认评论
  • Tab Header 5

0 条评论 / 点击此处发表评论

Tab Content 5

开发技术


开发平台和工具

sitemap     166.30ms