Ext.form.field.Spinner微调字段

1、Ext.form.field.Spinner主要配置

配置项类型说明
keyNavEnabled Boolean 设置是否启用对键盘向上和向下按钮的支持，默认为true
mouseWheelEnabled Boolean 设置是否启用对鼠标滚动轮的支持，默认为true
repeatTriggerClick Boolean 设置是否添加一个click repeater到微调按钮上，默认为true
spinDownEnabled Boolean 向下按钮是否可用，默认为true
spinUpEnabled Boolean 向上按钮是否可用，默认为true

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.form.field.Spinner示例</title>
    <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
    <script type="text/javascript">
        Ext.onReady(function () {
            var frm = new Ext.form.Panel({
                title: "Ext.form.field.Spinner示例",
                bodyStyle: "padding:5",
                frame: true,
                height: 100,
                width: 240,
                renderTo: Ext.getBody(),
                defaults: {
                    labelSeparator: "：",
                    labelWidth: 80,
                    width: 230,
                    labelAlign: "left"
                },
                items: [{
                    xtype: "spinnerfield",
                    fieldLabel: "微调字段",
                    id: "salary",
                    value: 100, // 初始化字段值
                    onSpinUp: function () {
                        var salary = Ext.getCmp("salary");
                        salary.setValue(Number(salary.getValue()) + 1);
                    },
                    onSpinDown: function () {
                        var salary = Ext.getCmp("salary");
                        salary.setValue(Number(salary.getValue()) - 1);
                    }
                }]
            });
        });
    </script>
</head>
<body>
</body>
</html>

效果图：

posted @ 2012-04-22 01:16  libingql  阅读(2160)  评论(0)  编辑  收藏  举报