extjs常用的items

ゝ一世哀愁。 2022-08-08 05:28 188阅读 0赞

1、改为密码框：

fieldlable:'密码',

xtype:'textfield',

inputType:'password'

2、不可修改

fieldlable:'不可修改',

xtype:'textfield',

readOnly:true

3、日期

fieldlable:'日期',

xtype:'datefield',

format:'Y/m/d'

4、下拉框

fieldlable:'选择',

xtype:'combo',

forceSelection:true,//输入值是否严格为待选列表中存在的值

editable:false,

queryMode:'local',

store:liststore  //\[\['gk1','国控一企'\],\['gk2','国控二企'\],\['gk3','国控三企'\]\]

var listStore = Ext.create('Ext.data.Store', {
        model: 'RCP.model.customer', // Model 名
        proxy: {
            type: 'ajax',
            url: 'customer/listAction.action',
            reader: {
                type: 'json',
                root: 'list',   // Anction 中的变量
                successProperty: 'success'
            }
        },
    
        autoLoad: true
    });
    this.listStore = listStore;

5、单选

{ 
     
      
     
      
      
               xtype: 'radiogroup',
     
      
     
      
      
               fieldLabel: 'Two Columns',
     
      
     
      
      
               // Arrange radio buttons into two columns, distributed vertically
     
      
     
      
      
               columns: 2,
     
      
     
      
      
               vertical: true,
     
      
     
      
      
               items: [
     
      
     
      
      
                   { boxLabel: 'Item 1', name: 'rb', inputValue: '1' },
     
      
     
      
      
                   { boxLabel: 'Item 2', name: 'rb', inputValue: '2', checked: true},
     
      
     
      
      
                   { boxLabel: 'Item 3', name: 'rb', inputValue: '3' },
     
      
     
      
      
                   { boxLabel: 'Item 4', name: 'rb', inputValue: '4' },
     
      
     
      
      
                   { boxLabel: 'Item 5', name: 'rb', inputValue: '5' },
     
      
     
      
      
                   { boxLabel: 'Item 6', name: 'rb', inputValue: '6' }
     
      
     
      
      
               ] , 
     
      
     
      
      
               listeners:{ 
     
      
     
      
      
                   //通过change触发
     
      
     
      
      
                   change: function(g , newValue , oldValue){ 
     
      
     
      
      
                       console.log(newValue , oldValue);
     
      
     
      
      
                   }
     
      
     
      
      
               }
     
      
     
      
      
           }
     
      6、多选

{
       
    xtype:'checkboxgroup',
    fieldLabel:'类型',
    allowBlank:false,
    items:[{
       
    boxLabel:'贵阳',
    name:'gy',
    inputValue:'1',
                    id:'checkbox1',
                    checked:true
    },{
       
    boxLabel:'安顺',
    name:'as',
    inputValue:'2',
                    id:'checkbox2'
    }]
    }

7 nunberfield

{
       
    xtype:'numberfield',
            	name:'jd',
            	fieldLabel:'经度',
            	allowBlank:false,
            	allowDecimals:true,
            	allowNegative:false,
            	maxLength:7,
            	decimalPrecision:4,
            	decimalSeparator:'.'
    }