JavaScript DHTML/Ext JS/Spinner

Материал из Web эксперт
Перейти к: навигация, поиск

Custom Spinner Widget

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/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.ru
 * http://www.extjs.ru/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>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Ext_JS/Spinner&oldid=2341»