extJs单选框（radio）如何设置为不可编辑

Posted 2023-04-12

只能通过后台数据库查询将相应的选项置为选择状态，前台页面不能手动编辑，
readOnly:true

disabled:true
都试过了第一个不好用，第二个字体颜色变灰了

readOnly : true 可以的亲自试过，下面是我测试的代码。

Ext.onReady(function() 
var FieldContainer = Ext.create('Ext.form.FieldContainer', 
    items : [
        xtype : 'fieldcontainer',
        layout : 'hbox',
        fieldLabel : 'Size',
        defaults : 
            flex : 1
        ,
        defaultType : 'radiofield',
        items : [
            boxLabel : 'M',
            name : 'size',
            inputValue : 'm',
            readOnly : true,
            id : 'radio1'
        , 
            boxLabel : 'L',
            name : 'size',
            inputValue : 'l',
            readOnly : true,
            id : 'radio2'
        , 
            boxLabel : 'XL',
            name : 'size',
            inputValue : 'xl',
            readOnly : true,
            id : 'radio3'
        ]
    ]
);
Ext.create('Ext.container.Viewport', 
    layout : 'vbox',
        items : [FieldContainer]
    );
);

如果你的 readOnly 没起作用，就说明写错地方了。要不发一下你的代码。

追问

　　你这个radiofield是4.0版本以上的吧
　　items : [
　　xtype : 'radio',
　　name : 'radioTest',
　　boxLabel : '测试01',
　　readOnly : true,
　　inputValue : '01'
　　]

追答

是，我是用 4.2.0 版本测试的。你的是多少？

var FieldContainer = Ext.create('Ext.form.FieldContainer', 
    items : [
            xtype : 'radio',
            name : 'radioTest',
            boxLabel : '测试01',
            readOnly : true,
            inputValue : '01'
        ,
            xtype : 'radio',
            name : 'radioTest',
            boxLabel : '测试02',
            readOnly : true,
            inputValue : '02'
    ]
);

改成你写的也可以。

追问

3.2貌似不行。。。。

追答

这么多新版本，为什么要用老的呢？

再就是不要用disable 属性，一旦设置为 true 时娶不到该对象的。

追问

公司不让用收费的

追答

老大，这个不收费的。公司内部用的话不收费的。
除非你的系统是对外盈利的，也就是对外公开的网站、或者是产品化的系统。

我还有一个方法就是给 radio 赋值之后，在控制它:
Ext.getCmp('radioID').setReadOnly(true);

试试吧

参考技术A      
xtype:'radio',
fieldLabel  : "www",
disabled :true

 

radio设置不可编辑只能用disabled:true，它的效果就是变灰，不可选中

如果你不非得不想变灰，那么请重写ext-all.css或者自己加个弄个新的样式

追问

我写了个CSS样式文字黑色，好像不好用，应该怎么设置？

追答

cls:'...'

参考技术B editabled:false 试试这个看 不敢肯定追问

不管用

h5 radio单选框样式设置

radio单选框样式设置

input[type=radio] {

    display: inline-block;

    vertical-align: middle;

    width: 20px;

    height: 20px;

    -webkit-appearance: none;

    background-color: transparent;

    border: 0;

    outline: 0 !important;

    line-height: 20px;

    color: #d8d8d8;

}

input[type=radio]:after {

    content: "";

    display:block;

    width: 20px;

    height: 20px;

    border-radius: 50%;

    text-align: center;

    line-height: 14px;

    font-size: 16px;

    color: #fff;

    border: 3px solid #ddd;

    background-color: #fff;

    box-sizing:border-box;

}

input[type=radio]:checked:after {

    content: "L";

    transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);

    -webkit-transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);

    border-color: #099414;

    background-color: #099414;

}