spinner.html (Case Conflict 1)
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:12k
源码类别:

中间件编程

开发平台:

JavaScript

  1. <html>
  2. <head>
  3.   <title>The source code</title>
  4.     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  5.     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  6. </head>
  7. <body  onload="prettyPrint();">
  8.     <pre class="prettyprint lang-js"><div id="cls-Ext.ux.Spinner"></div>/**
  9.  * @class Ext.ux.Spinner
  10.  * @extends Ext.util.Observable
  11.  * Creates a Spinner control utilized by Ext.ux.form.SpinnerField
  12.  */
  13. Ext.ux.Spinner = Ext.extend(Ext.util.Observable, {
  14.     incrementValue: 1,
  15.     alternateIncrementValue: 5,
  16.     triggerClass: 'x-form-spinner-trigger',
  17.     splitterClass: 'x-form-spinner-splitter',
  18.     alternateKey: Ext.EventObject.shiftKey,
  19.     defaultValue: 0,
  20.     accelerate: false,
  21.     constructor: function(config){
  22.         Ext.ux.Spinner.superclass.constructor.call(this, config);
  23.         Ext.apply(this, config);
  24.         this.mimicing = false;
  25.     },
  26.     init: function(field){
  27.         this.field = field;
  28.         field.afterMethod('onRender', this.doRender, this);
  29.         field.afterMethod('onEnable', this.doEnable, this);
  30.         field.afterMethod('onDisable', this.doDisable, this);
  31.         field.afterMethod('afterRender', this.doAfterRender, this);
  32.         field.afterMethod('onResize', this.doResize, this);
  33.         field.afterMethod('onFocus', this.doFocus, this);
  34.         field.beforeMethod('onDestroy', this.doDestroy, this);
  35.     },
  36.     doRender: function(ct, position){
  37.         var el = this.el = this.field.getEl();
  38.         var f = this.field;
  39.         if (!f.wrap) {
  40.             f.wrap = this.wrap = el.wrap({
  41.                 cls: "x-form-field-wrap"
  42.             });
  43.         }
  44.         else {
  45.             this.wrap = f.wrap.addClass('x-form-field-wrap');
  46.         }
  47.         this.trigger = this.wrap.createChild({
  48.             tag: "img",
  49.             src: Ext.BLANK_IMAGE_URL,
  50.             cls: "x-form-trigger " + this.triggerClass
  51.         });
  52.         if (!f.width) {
  53.             this.wrap.setWidth(el.getWidth() + this.trigger.getWidth());
  54.         }
  55.         this.splitter = this.wrap.createChild({
  56.             tag: 'div',
  57.             cls: this.splitterClass,
  58.             style: 'width:13px; height:2px;'
  59.         });
  60.         this.splitter.setRight((Ext.isIE) ? 1 : 2).setTop(10).show();
  61.         this.proxy = this.trigger.createProxy('', this.splitter, true);
  62.         this.proxy.addClass("x-form-spinner-proxy");
  63.         this.proxy.setStyle('left', '0px');
  64.         this.proxy.setSize(14, 1);
  65.         this.proxy.hide();
  66.         this.dd = new Ext.dd.DDProxy(this.splitter.dom.id, "SpinnerDrag", {
  67.             dragElId: this.proxy.id
  68.         });
  69.         this.initTrigger();
  70.         this.initSpinner();
  71.     },
  72.     doAfterRender: function(){
  73.         var y;
  74.         if (Ext.isIE && this.el.getY() != (y = this.trigger.getY())) {
  75.             this.el.position();
  76.             this.el.setY(y);
  77.         }
  78.     },
  79.     doEnable: function(){
  80.         if (this.wrap) {
  81.             this.wrap.removeClass(this.field.disabledClass);
  82.         }
  83.     },
  84.     doDisable: function(){
  85.         if (this.wrap) {
  86.             this.wrap.addClass(this.field.disabledClass);
  87.             this.el.removeClass(this.field.disabledClass);
  88.         }
  89.     },
  90.     doResize: function(w, h){
  91.         if (typeof w == 'number') {
  92.             this.el.setWidth(this.field.adjustWidth('input', w - this.trigger.getWidth()));
  93.         }
  94.         this.wrap.setWidth(this.el.getWidth() + this.trigger.getWidth());
  95.     },
  96.     doFocus: function(){
  97.         if (!this.mimicing) {
  98.             this.wrap.addClass('x-trigger-wrap-focus');
  99.             this.mimicing = true;
  100.             Ext.get(Ext.isIE ? document.body : document).on("mousedown", this.mimicBlur, this, {
  101.                 delay: 10
  102.             });
  103.             this.el.on('keydown', this.checkTab, this);
  104.         }
  105.     },
  106.     // private
  107.     checkTab: function(e){
  108.         if (e.getKey() == e.TAB) {
  109.             this.triggerBlur();
  110.         }
  111.     },
  112.     // private
  113.     mimicBlur: function(e){
  114.         if (!this.wrap.contains(e.target) && this.field.validateBlur(e)) {
  115.             this.triggerBlur();
  116.         }
  117.     },
  118.     // private
  119.     triggerBlur: function(){
  120.         this.mimicing = false;
  121.         Ext.get(Ext.isIE ? document.body : document).un("mousedown", this.mimicBlur, this);
  122.         this.el.un("keydown", this.checkTab, this);
  123.         this.field.beforeBlur();
  124.         this.wrap.removeClass('x-trigger-wrap-focus');
  125.         this.field.onBlur.call(this.field);
  126.     },
  127.     initTrigger: function(){
  128.         this.trigger.addClassOnOver('x-form-trigger-over');
  129.         this.trigger.addClassOnClick('x-form-trigger-click');
  130.     },
  131.     initSpinner: function(){
  132.         this.field.addEvents({
  133.             'spin': true,
  134.             'spinup': true,
  135.             'spindown': true
  136.         });
  137.         this.keyNav = new Ext.KeyNav(this.el, {
  138.             "up": function(e){
  139.                 e.preventDefault();
  140.                 this.onSpinUp();
  141.             },
  142.             "down": function(e){
  143.                 e.preventDefault();
  144.                 this.onSpinDown();
  145.             },
  146.             "pageUp": function(e){
  147.                 e.preventDefault();
  148.                 this.onSpinUpAlternate();
  149.             },
  150.             "pageDown": function(e){
  151.                 e.preventDefault();
  152.                 this.onSpinDownAlternate();
  153.             },
  154.             scope: this
  155.         });
  156.         this.repeater = new Ext.util.ClickRepeater(this.trigger, {
  157.             accelerate: this.accelerate
  158.         });
  159.         this.field.mon(this.repeater, "click", this.onTriggerClick, this, {
  160.             preventDefault: true
  161.         });
  162.         this.field.mon(this.trigger, {
  163.             mouseover: this.onMouseOver,
  164.             mouseout: this.onMouseOut,
  165.             mousemove: this.onMouseMove,
  166.             mousedown: this.onMouseDown,
  167.             mouseup: this.onMouseUp,
  168.             scope: this,
  169.             preventDefault: true
  170.         });
  171.         this.field.mon(this.wrap, "mousewheel", this.handleMouseWheel, this);
  172.         this.dd.setXConstraint(0, 0, 10)
  173.         this.dd.setYConstraint(1500, 1500, 10);
  174.         this.dd.endDrag = this.endDrag.createDelegate(this);
  175.         this.dd.startDrag = this.startDrag.createDelegate(this);
  176.         this.dd.onDrag = this.onDrag.createDelegate(this);
  177.     },
  178.     onMouseOver: function(){
  179.         if (this.disabled) {
  180.             return;
  181.         }
  182.         var middle = this.getMiddle();
  183.         this.tmpHoverClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-overup' : 'x-form-spinner-overdown';
  184.         this.trigger.addClass(this.tmpHoverClass);
  185.     },
  186.     //private
  187.     onMouseOut: function(){
  188.         this.trigger.removeClass(this.tmpHoverClass);
  189.     },
  190.     //private
  191.     onMouseMove: function(){
  192.         if (this.disabled) {
  193.             return;
  194.         }
  195.         var middle = this.getMiddle();
  196.         if (((Ext.EventObject.getPageY() > middle) && this.tmpHoverClass == "x-form-spinner-overup") ||
  197.         ((Ext.EventObject.getPageY() < middle) && this.tmpHoverClass == "x-form-spinner-overdown")) {
  198.         }
  199.     },
  200.     //private
  201.     onMouseDown: function(){
  202.         if (this.disabled) {
  203.             return;
  204.         }
  205.         var middle = this.getMiddle();
  206.         this.tmpClickClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-clickup' : 'x-form-spinner-clickdown';
  207.         this.trigger.addClass(this.tmpClickClass);
  208.     },
  209.     //private
  210.     onMouseUp: function(){
  211.         this.trigger.removeClass(this.tmpClickClass);
  212.     },
  213.     //private
  214.     onTriggerClick: function(){
  215.         if (this.disabled || this.el.dom.readOnly) {
  216.             return;
  217.         }
  218.         var middle = this.getMiddle();
  219.         var ud = (Ext.EventObject.getPageY() < middle) ? 'Up' : 'Down';
  220.         this['onSpin' + ud]();
  221.     },
  222.     //private
  223.     getMiddle: function(){
  224.         var t = this.trigger.getTop();
  225.         var h = this.trigger.getHeight();
  226.         var middle = t + (h / 2);
  227.         return middle;
  228.     },
  229.     //private
  230.     //checks if control is allowed to spin
  231.     isSpinnable: function(){
  232.         if (this.disabled || this.el.dom.readOnly) {
  233.             Ext.EventObject.preventDefault(); //prevent scrolling when disabled/readonly
  234.             return false;
  235.         }
  236.         return true;
  237.     },
  238.     handleMouseWheel: function(e){
  239.         //disable scrolling when not focused
  240.         if (this.wrap.hasClass('x-trigger-wrap-focus') == false) {
  241.             return;
  242.         }
  243.         var delta = e.getWheelDelta();
  244.         if (delta > 0) {
  245.             this.onSpinUp();
  246.             e.stopEvent();
  247.         }
  248.         else
  249.             if (delta < 0) {
  250.                 this.onSpinDown();
  251.                 e.stopEvent();
  252.             }
  253.     },
  254.     //private
  255.     startDrag: function(){
  256.         this.proxy.show();
  257.         this._previousY = Ext.fly(this.dd.getDragEl()).getTop();
  258.     },
  259.     //private
  260.     endDrag: function(){
  261.         this.proxy.hide();
  262.     },
  263.     //private
  264.     onDrag: function(){
  265.         if (this.disabled) {
  266.             return;
  267.         }
  268.         var y = Ext.fly(this.dd.getDragEl()).getTop();
  269.         var ud = '';
  270.         if (this._previousY > y) {
  271.             ud = 'Up';
  272.         } //up
  273.         if (this._previousY < y) {
  274.             ud = 'Down';
  275.         } //down
  276.         if (ud != '') {
  277.             this['onSpin' + ud]();
  278.         }
  279.         this._previousY = y;
  280.     },
  281.     //private
  282.     onSpinUp: function(){
  283.         if (this.isSpinnable() == false) {
  284.             return;
  285.         }
  286.         if (Ext.EventObject.shiftKey == true) {
  287.             this.onSpinUpAlternate();
  288.             return;
  289.         }
  290.         else {
  291.             this.spin(false, false);
  292.         }
  293.         this.field.fireEvent("spin", this);
  294.         this.field.fireEvent("spinup", this);
  295.     },
  296.     //private
  297.     onSpinDown: function(){
  298.         if (this.isSpinnable() == false) {
  299.             return;
  300.         }
  301.         if (Ext.EventObject.shiftKey == true) {
  302.             this.onSpinDownAlternate();
  303.             return;
  304.         }
  305.         else {
  306.             this.spin(true, false);
  307.         }
  308.         this.field.fireEvent("spin", this);
  309.         this.field.fireEvent("spindown", this);
  310.     },
  311.     //private
  312.     onSpinUpAlternate: function(){
  313.         if (this.isSpinnable() == false) {
  314.             return;
  315.         }
  316.         this.spin(false, true);
  317.         this.field.fireEvent("spin", this);
  318.         this.field.fireEvent("spinup", this);
  319.     },
  320.     //private
  321.     onSpinDownAlternate: function(){
  322.         if (this.isSpinnable() == false) {
  323.             return;
  324.         }
  325.         this.spin(true, true);
  326.         this.field.fireEvent("spin", this);
  327.         this.field.fireEvent("spindown", this);
  328.     },
  329.     spin: function(down, alternate){
  330.         var v = parseFloat(this.field.getValue());
  331.         var incr = (alternate == true) ? this.alternateIncrementValue : this.incrementValue;
  332.         (down == true) ? v -= incr : v += incr;
  333.         v = (isNaN(v)) ? this.defaultValue : v;
  334.         v = this.fixBoundries(v);
  335.         this.field.setRawValue(v);
  336.     },
  337.     fixBoundries: function(value){
  338.         var v = value;
  339.         if (this.field.minValue != undefined && v < this.field.minValue) {
  340.             v = this.field.minValue;
  341.         }
  342.         if (this.field.maxValue != undefined && v > this.field.maxValue) {
  343.             v = this.field.maxValue;
  344.         }
  345.         return this.fixPrecision(v);
  346.     },
  347.     // private
  348.     fixPrecision: function(value){
  349.         var nan = isNaN(value);
  350.         if (!this.field.allowDecimals || this.field.decimalPrecision == -1 || nan || !value) {
  351.             return nan ? '' : value;
  352.         }
  353.         return parseFloat(parseFloat(value).toFixed(this.field.decimalPrecision));
  354.     },
  355.     doDestroy: function(){
  356.         if (this.trigger) {
  357.             this.trigger.remove();
  358.         }
  359.         if (this.wrap) {
  360.             this.wrap.remove();
  361.             delete this.field.wrap;
  362.         }
  363.         if (this.splitter) {
  364.             this.splitter.remove();
  365.         }
  366.         if (this.dd) {
  367.             this.dd.unreg();
  368.             this.dd = null;
  369.         }
  370.         if (this.proxy) {
  371.             this.proxy.remove();
  372.         }
  373.         if (this.repeater) {
  374.             this.repeater.purgeListeners();
  375.         }
  376.     }
  377. });
  378. //backwards compat
  379. Ext.form.Spinner = Ext.ux.Spinner;</pre>    
  380. </body>
  381. </html>