Ext.js5表单文本—数字（24）

最新推荐文章于 2025-08-12 10:08:08 发布

翻译最新推荐文章于 2025-08-12 10:08:08 发布 · 462 阅读

Ext.js项目专栏收录该内容

65 篇文章

订阅专栏

本文介绍如何在ExtJS中使用NumberField组件创建数字输入字段，并展示了如何配置这些字段以实现特定的功能，例如设置最小值、最大值及允许输入的小数位数。

view

/**
 * This example shows how to use the number field.
 * 这个例子就是说怎么使用数字文本
 */
Ext.define('KitchenSink.view.form.Number', {
    extend: 'Ext.form.Panel',//注意哦，之前的表格都是继承的Ext.grid.Panel
    xtype: 'form-number',


    title: 'Number fields with spinner',
    bodyPadding: 5,
    frame: true,
    width: 340,
    defaultType: 'numberfield',

    fieldDefaults: {
        labelWidth: 110,
        anchor: '100%'
    },

    items: [{
        fieldLabel: 'Default',
        name: 'basic',
        value: 1,
        minValue: 1,
        maxValue: 125
    }, {
        fieldLabel: 'With a step of 0.4',
        name: 'test',
        minValue: -100,
        maxValue: 100,
        allowDecimals: true,
        //允许小数
        decimalPrecision: 1,
        step: 0.4
    }, {
        //设置为true时隐藏trigger按钮，只显示为基础的文本框。
        hideTrigger: true,
        fieldLabel: 'Without spinner',
        name: 'without_spinner'
    }]
});