文档章节

extjs复选框和单按钮

JackChenzp
 JackChenzp
发布于 2017/08/04 14:46
字数 611
阅读 12
收藏 0

界面:

1、输入框代码:

var batchUseMaintainProjectTypeField= { xtype:'f-checkboxgroup',fieldLabel: '维修项目类型',             columns: 4, //设置没四个选项一行

        id:'maintainProjectType', 
            allowBlank: false, items:[ 
               {boxLabel: '电梯', name: 'maintainProjectType',inputValue: '电梯'},               

               {boxLabel: '水管', name: 'maintainProjectType',inputValue: '水管'},

               {boxLabel: '燃气管道', name: 'maintainProjectType',inputValue: '燃气管道'}           

               {boxLabel: '内/外墙', name: 'maintainProjectType',inputValue: '内/外墙'},         

               {boxLabel: '招牌/指示牌', name: 'maintainProjectType',inputValue: '招牌/指示牌'},         {boxLabel: '监控', name: 'maintainProjectType',inputValue: '监控'},
               {boxLabel: '消防管网', name: 'maintainProjectType',inputValue: '消防管网'},

               {boxLabel: '可视对讲系统', name: 'maintainProjectType',inputValue: '可视对讲系统'},         {boxLabel: '电子防盗', name: 'maintainProjectType',inputValue: '电子防盗'},
               {boxLabel: '门禁', name: 'maintainProjectType',inputValue: '门禁'},

               {boxLabel: '停车场/车库', name: 'maintainProjectType',inputValue: '停车场/车库'},         {boxLabel: '雨棚', name: 'maintainProjectType',inputValue: '雨棚'},
               {boxLabel: '公共卫生间', name: 'maintainProjectType',inputValue: '公共卫生间'},         {boxLabel: '景观维护', name: 'maintainProjectType',inputValue: '景观维护'},

               {boxLabel: '路面维修', name: 'maintainProjectType',inputValue: '路面维修'},
               {boxLabel: '排污系统维修', name: 'maintainProjectType',inputValue: '排污系统维修'},         {boxLabel: '煤气维修', name: 'maintainProjectType',inputValue: '煤气维修'},

               {boxLabel: '发电机', name: 'maintainProjectType',inputValue: '发电机'},
               {boxLabel: '中央空调', name: 'maintainProjectType',inputValue: '中央空调'},

               {boxLabel: '配电房', name: 'maintainProjectType',inputValue: '配电房'},

               {boxLabel: '公共健身场地', name: 'maintainProjectType',inputValue: '公共健身场地'},
               {boxLabel: '对讲门铃', name: 'maintainProjectType',inputValue: '对讲门铃'},

               {boxLabel: '其他', name: 'maintainProjectType',inputValue: '其他'}],
                                          listeners:{
                                              scope: this,
                                              'change':function(){//当‘其他’被勾选时是不能在勾选其他的复选框 
                                                  //    2,收集复选框的值  
                                                    var cbitems = Ext.getCmp('maintainProjectType').items;  
                                                    for (var i = 0; i < cbitems.length; i++) {  
                                                        if (cbitems.get(i).checked) { 
                                                            if(cbitems.get(i).inputValue=='其他'){
                                                                for(var j = 0; j < cbitems.length; j++){
                                                                    if(cbitems.get(j).checked && cbitems.get(j).inputValue!='其他'){
                                                                        cbitems.get(j).setValue(false);
                                                                    }
                                                                }
                                                                
                                                            }
                                                        }    
                                                    }
                                                    
                                              },
                                              'load':function(value){
                                              // 勾选复选框
                                                 var checkboxstore =value.split(",");//后台数据用逗号分隔,这里进行切割
                                                 var checkboxgroup =Ext.getCmp('maintainProjectType').items;                                                    //form中 checkboxgroup的位置
                                                   for(var i=0;i<checkboxgroup.items.length;i++){ //循环比对 如果相同就设置为true
                                                       for(var j=0;j<checkboxstore.length;j++){
                                               if(checkboxgroup.items.get(i).getRawValue()==checkboxstore[j]){
                                                               checkboxgroup.items.get(i).setValue(true);
                                                           }
                                                       }
    
                                                   }
                                            // formPanel.doLayout(); //重新调整版面布局
                                              }
                                            
                                          }
                                        };

2、自定义输入框f-checkboxgroup

Ext.app.CheckboxGroup=Ext.extend(Ext.form.CheckboxGroup,{
    initComponent : function(){
        Ext.app.CheckboxGroup.superclass.initComponent.call(this);                                            
    },
    getName: function() {
        return this.items.first().getName();
    }
});
Ext.reg('f-checkboxgroup', Ext.app.CheckboxGroup);

 

后台保存处理数据

 

//add by czp 20161014 
        String[] maintainProject_Type=pv("maintainProjectType");
        String maintainProjectType="";
        for(int i=0; i<maintainProject_Type.length; i++){
            if(i!=maintainProject_Type.length-1){
                maintainProjectType+=maintainProject_Type[i]+',';
            }else{
                maintainProjectType+=maintainProject_Type[i];
            }
            
        }
        e.setMaintainProjectType(maintainProjectType);

这是PV()方法

public String[] pv(String paramName){
        //判断是否为空
return request.getParameterValues(paramName) == null ? null :  request.getParameterValues(paramName);
    }
    

 

3、单选框

var batchUseInternalFlagField ={xtype: 'f-radiogroup',fieldLabel: '收款银行账户', id:'internalFlag',allowBlank: false, items: [
                                      {boxLabel: '外行账户', name: 'internalFlag', inputValue: '0', checked: true},
                                      {boxLabel: '本行账户', name: 'internalFlag', inputValue: '1'}]
                                  };

4、自定义输入框f-radiogroup

Ext.app.RadioGroup = Ext.extend(Ext.form.RadioGroup, {
    initComponent : function(){
        Ext.app.RadioGroup.superclass.initComponent.call(this);                                            
    },
    getName: function() {
        return this.items.first().getName();
    }
});
Ext.reg('f-radiogroup', Ext.app.RadioGroup);

 

 

 

© 著作权归作者所有

JackChenzp
粉丝 2
博文 26
码字总数 17847
作品 0
深圳
程序员
私信 提问
Extjs GridPanel用法详解

创建GridPanel 要使用GridPanel,首先要定义Store,而在创建Store的时候必须要有Model,因此我们首先来定义Model: //1.定义ModelExt.define("MyApp.model.User", { }); 然后创建Store: //...

鱼煎
2017/11/02
97
0
FineUI v3.3.1 发布了!

关于FineUI 基于 ExtJS 的专业 ASP.NET 控件库。 FineUI的使命 创建 No JavaScript,No CSS,No UpdatePanel,No ViewState,No WebServices 的网站应用程序。 支持的浏览器 IE 7.0+、Firef...

三生石上
2013/07/29
3.1K
4
Extjs Window用法详解

创建Extjs Window 创建Extjs Window的代码如下: //创建windowvar win = Ext.create("Ext.window.Window", { }); 代码中的Form可以参考《Extjs Form用法详解》。显示效果如下: 显示Extjs W......

鱼煎
2017/11/02
83
0
ExtJS使用DwrTreeLoader Demo

2012/11/20 发现项目中用到一个TreeCheckNodeUI插件,直接添加checked属性并不能实现级联选择,很多关于选择的部分还要自己实现,这个插件帮助完成了这些事情。 貌似是插件出处? 相关:EXT...

豆仔
2012/11/18
1K
3
ExtJS Form无刷新文件上传

文件上传在Web程序开发中必不可少,ExtJS Form中有一个filefield字段,用来选择文件并上传。今天我们来演示一下如何通过filefield实现ExtJS Form无刷新的文件上传。 首先,我们创建一个Form,...

鱼煎
2017/11/02
20
0

没有更多内容

加载失败,请刷新页面

加载更多

MainThreadSupport

MainThreadSupport EventBus 3.0 中的代码片段. org.greenrobot.eventbus.MainThreadSupport 定义一个接口,并给出默认实现类. 调用者可以在EventBus的构建者中替换该实现. public interface ...

马湖村第九后羿
37分钟前
3
0
指定要使用的形状来代替文字的显示

控制手机键盘弹出的功能只能在ios上实现,安卓是实现不了的,所以安卓只能使用type类型来控制键盘类型,例如你要弹出数字键盘就使用type="number",如果要弹出电话键盘就使用type="tel",但这...

前端老手
47分钟前
5
0
总结:Raft协议

一、Raft协议是什么? 分布式一致性算法。即解决分布式系统中各个副本数据一致性问题。 二、Raft的日志广播过程 发送日志到所有Followers(Raft中将非Leader节点称为Follower)。 Followers收...

浮躁的码农
54分钟前
7
0
Flask-admin Model View字段介绍

Model View字段介绍 can_create = True 是否可以创建can_edit = True 是否可以编辑can_delete = True 是否可以删除list_template = 'admin/model/list.html' 修改显......

dillonxiao
今天
5
0
从AnnotationTransactionAspect开始rushSpring事务

0. Spring 事务 with LTW 0.1. Spring 事务 With LTW的原因: Pure Proxy-base mode有缺陷,其失效原因分析及使用方法及运行机制(LoadTimeWeaverBeanDefinitionParser和 AspectJWeavingEnable......

Aruforce
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部