Extjs4中的Ext.form.field.Spinner_extjs spinner-优快云博客

本文介绍 Extjs4 中 Ext.form.field.Spinner 的使用方法，并提供了一个具体示例，展示如何创建微调字段并实现数值的增减操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Extjs4中的Ext.form.field.Spinner

 1          //Ext.form.field.Spinner示例   
 2         Ext.onReady(function(){
 3             Ext.create('Ext.form.Panel',{   
 4                 title:'Ext.form.field.Spinner示例',   
 5                 bodyStyle:'padding:5 5 5 5',//表单边距   
 6                 frame : true,   
 7                 height:140,   
 8                 width:250,   
 9                 renderTo :Ext.getBody(),   
10                 defaults:{//统一设置表单字段默认属性   
11                     labelSeparator :'：',//分隔符   
12                     width : 200,//字段宽度   
13                     labelAlign : 'left'//标签对齐方式   
14                 },   
15                 items:[{   
16                     xtype : 'spinnerfield',   
17                     fieldLabel:'微调字段',   
18                     id : 'salary',//组件id   
19                     value : 100,//初始化字段值   
20                     onSpinUp : function(){   
21                         var salaryCmp = Ext.getCmp('salary');//通过组件id获取组件对象   
22                         //增加默认值   
23                         salaryCmp.setValue(Number(salaryCmp.getValue()) + 1);   
24                     },   
25                     onSpinDown : function(){   
26                         var salaryCmp = Ext.getCmp('salary');   
27                         //减小默认值   
28                         salaryCmp.setValue(Number(salaryCmp.getValue()) - 1);   
29                     }   
30                 },{
31                     xtype:'numberfield',
32                     fieldLabel:'这个貌似也行',
33                     value:100
34                     
35                     }]   
36             });  
37             
38         });
39