Custom Spinner Widget : Spinner « Ext JS « JavaScript DHTML

Custom Spinner Widget
  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
-->
<!-- Revised from demo code in ext3.0.0 -->

<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
    <link rel="stylesheet" type="text/css" href="ext-3.0.0/examples/ux/css/Spinner.css" />
    <script type="text/javascript" src="ext-3.0.0/examples/ux/Spinner.js"></script>
    <script type="text/javascript" src="ext-3.0.0/examples/ux/SpinnerField.js"></script>
    <script type="text/javascript">
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.onReady(function(){
    var simple = new Ext.FormPanel({
        labelWidth: 40, // label settings here cascade unless overridden
        frame: true,
        title: 'Simple Form',
        bodyStyle: 'padding:5px 5px 0',
        width: 210,
        defaults: {width: 135},
        defaultType: 'textfield',

        items: [
            new Ext.ux.form.SpinnerField({
                fieldLabel: 'Age',
                name: 'age'
            }),
            {
              xtype: 'spinnerfield',
              fieldLabel: 'Test',
              name: 'test',
              minValue: 0,
              maxValue: 100,
              allowDecimals: true,
              decimalPrecision: 1,
              incrementValue: 0.4,
              alternateIncrementValue: 2.1,
              accelerate: true
            }
        ]
    });

    simple.render('form-ct');
});
    
    </script>

</head>
<body>

  <div id="form-ct" style="margin-top:1em"></div>

</body>
</html>
Custom Spinner Widget : Spinner « Ext JS « JavaScript DHTML

Related examples in the same category
