extjs4计算器插件开发

最新推荐文章于 2020-12-25 23:22:50 发布
最新推荐文章于 2020-12-25 23:22:50 发布
阅读量517 收藏
点赞数 1
分类专栏： extjs插件开发 文章标签： extjs4插件 web Web WEB 工具 计算器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zwp20002/article/details/8221462
版权

      刚学EXTJS， 由于开发web使用需要个计算器，在网上找extjs4计算器插件没发现一个，因此只能自己写，参考http://www.uspcat.com/forum.php?mod=viewthread&tid=2006一个计算器原码，使用Sencha Architect2.1开发，先上个图片：


代码如下：

Ext.define('Ext.ux.Caculate', {
    extend: 'Ext.form.Panel',


    height: 291,
    width: 199,
    bodyPadding: 10,
    collapsible: true,
    title: '工具',


    frame: true,




    collapsible: true,


    initComponent: function () {




        Ext.apply(this, {
            items: [
                {
                    xtype: 'panel',
                    anchor: '100%',
                    frame: true,
                    height: 239,


                    collapsible: true,
                    title: '计算器',
                    items: [
                        {
                            xtype: 'textfield',
                            id: 'js',
                            hidden: true
                        },
                        {
                            xtype: 'textfield',
                            id: 'dy',
                            readOnly: true
                        },
                        {
                            xtype: 'panel',
                            height: 25,
                            margin: '0 20 0 10',
                            baseCls: 'my-panel-no-border',
                            width: 130,
                            title: '',
                            items: [
                                {
                                    xtype: 'button',
                                    text: '删除',
                                    listeners: {
                                        click: {
                                            fn: this.delstr,
                                            scope: this
                                        }
                                    }
                                },
                                {
                                    xtype: 'button',
                                    text: '清零',
                                    listeners: {
                                        click: {
                                            fn: this.clearstr,
                                            scope: this
                                        }
                                    }
                                },
                                {
                                    xtype: 'button',
                                    text: '等于',
                                    listeners: {
                                        click: {
                                            fn: this.jfdy,
                                            scope: this
                                        }
                                    }
                                }
                            ]
                        },
                        {
                            xtype: 'panel',
                            height: 25,
                            margin: '0 20 0 10',
                            baseCls: 'my-panel-no-border',
                            width: 130,
                            title: '',
                            items: [
                                {
                                    xtype: 'button',
                                    text: '7',
                                    width: 28,
                                    listeners: {
                                        click: {
                                            fn: this.onButtonClick,
                                            scope: this
                                        }
                                    }
                                },
                                {
                                    xtype: 'button',
                                    text: '8',
                                    width: 28,
                                    listeners: {
                                        click: {
                                            fn: this.onButtonClick,
                                            scope: this
                                        }
                                    }
                                },
                                {
                                    xtype: 'button',
                                    text: '9',
                                    width: 28,
                                    listeners: {
                                        click: {
                                            fn: this.onButtonClick,
                                            scope: this
                                        }
                                    }
                                }
                                ,
                                 {
                                     xtype: 'button',
                                     text: '除',
                                     listeners: {
                                         click: {
                                             fn: this.strdiv,
                                             scope: this
                                         }
                                     }
                                 }
                            ]
                        }, {
                            xtype: 'panel',
                            height: 25,
                            margin: '0 20 0 10',
                            baseCls: 'my-panel-no-border',
                            width: 130,
                            title: '',
                            items: [
                                {
                                    xtype: 'button',
                                    text: '4',
                                    width: 28,
                                    listeners: {
                                        click: {
                                            fn: this.onButtonClick,
                                            scope: this
                                        }
                                    }
                                },
                                {
                                    xtype: 'button',
                                    text: '5',
                                    width: 28,
                                    listeners: {
                                        click: {
                                            fn: this.onButtonClick,
                                            scope: this
                                        }
                                    }
                                },
                                {
                                    xtype: 'button',
                                    text: '6',
                                    width: 28,
                                    listeners: {
                                        click: {
                                            fn: this.onButtonClick,
                                            scope: this
                                        }
                                    }
                                }
                                ,
                                 {
                                     xtype: 'button',
                                     text: '乘',
                                     listeners: {
                                         click: {
                                             fn: this.strmultix,
                                             scope: this
                                         }
                                     }
                                 }
                            ]
                        },
                             {
                                 xtype: 'panel',
                                 height: 25,
                                 margin: '0 20 0 10',
                                 baseCls: 'my-panel-no-border',
                                 width: 130,
                                 title: '',
                                 items: [
                                {
                                    xtype: 'button',
                                    text: '1',
                                    width: 28,
                                    listeners: {
                                        click: {
                                            fn: this.onButtonClick,
                                            scope: this
                                        }
                                    }
                                },
                                {
                                    xtype: 'button',
                                    text: '2',
                                    width: 28,
                                    listeners: {
                                        click: {
                                            fn: this.onButtonClick,
                                            scope: this
                                        }
                                    }
                                },
                                {
                                    xtype: 'button',
                                    text: '3',
                                    width: 28,
                                    listeners: {
                                        click: {
                                            fn: this.onButtonClick,
                                            scope: this
                                        }
                                    }
                                }
                                ,
                                 {
                                     xtype: 'button',
                                     text: '加',
                                     listeners: {
                                         click: {
                                             fn: this.strjia,
                                             scope: this
                                         }
                                     }
                                 }
                            ]
                             },
                             {
                                 xtype: 'panel',
                                 height: 25,
                                 margin: '0 20 0 10',
                                 baseCls: 'my-panel-no-border',
                                 width: 130,
                                 title: '',
                                 items: [
                                {
                                    xtype: 'button',
                                    text: '0',
                                    width: 28,
                                    listeners: {
                                        click: {
                                            fn: this.onButtonClick,
                                            scope: this
                                        }
                                    }
                                },
                                {
                                    xtype: 'button',
                                    text: '+/-',
                                    width: 28,
                                    listeners: {
                                        click: {
                                            fn: this.fuhao,
                                            scope: this
                                        }
                                    }
                                },
                                {
                                    xtype: 'button',
                                    text: '.',
                                    width: 28,
                                    listeners: {
                                        click: {
                                            fn: this.douhao,
                                            scope: this
                                        }
                                    }
                                }
                                ,
                                 {
                                     xtype: 'button',
                                     text: '减',
                                     listeners: {
                                         click: {
                                             fn: this.strjian,
                                             scope: this
                                         }
                                     }
                                 }
                            ]
                             }


                        ]
                }]


        });


        this.callParent(arguments);
    },
    delstr: function () {
        var s = Ext.getCmp('js').getValue();
        s = s.substr(0, s.length - 1);


        Ext.getCmp('js').setValue(s);
        s = Ext.getCmp('dy').getValue();
        s = s.substr(0, s.length - 1);
        Ext.getCmp('dy').setValue(s);
    },
    clearstr: function () {
        Ext.getCmp('js').setValue();
        Ext.getCmp('dy').setValue();
    }
    , jfdy: function () {
        var s = Ext.getCmp('js').getValue();
        var z;
        var index;
        if ((index = s.indexOf("+")) > 0) {
            a = s.substr(0, index);
            b = s.substr(index + 1, s.length - 1);
            z = parseFloat(a) + parseFloat(b);
        } else if ((index = s.indexOf("-")) > 0) {
            a = s.substr(0, index);
            b = s.substr(index + 1, s.length - 1);
            z = parseFloat(a) - parseFloat(b);
        } else if ((index = s.indexOf("*")) > 0) {
            a = s.substr(0, index);
            b = s.substr(index + 1, s.length - 1);
            z = parseFloat(a) * parseFloat(b);
        } else if ((index = s.indexOf("/")) > 0) {
            a = s.substr(0, index);
            b = s.substr(index + 1, s.length - 1);
            z = parseFloat(a) / parseFloat(b);
        }
        Ext.getCmp('js').setValue(z);
        Ext.getCmp('dy').setValue(z);
    },
    onButtonClick: function (btn) {
        var s = Ext.getCmp('js').getValue();


        var slast = s.substr(s.length - 1, 1);
        if ((slast == '+') || (slast == '*') || (slast == '-') || (slast == '/'))
            Ext.getCmp('dy').setValue(btn.text);
        else Ext.getCmp('dy').setValue(Ext.getCmp('dy').getValue() + btn.text);
        s += btn.text;


        Ext.getCmp('js').setValue(s);
    },
    strdiv: function () {
        var s = Ext.getCmp('js').getValue();
        var z;
        var index;
        if ((index = s.indexOf("+")) > 0) {
            a = s.substr(0, index);
            b = s.substr(index + 1, s.length - 1);
            z = parseFloat(a) + parseFloat(b);
            s = z.toString();
        } else if ((index = s.indexOf("-")) > 0) {
            a = s.substr(0, index);
            b = s.substr(index + 1, s.length - 1);
            z = parseFloat(a) - parseFloat(b);
            s = z.toString();
        } else if ((index = s.indexOf("*")) > 0) {
            a = s.substr(0, index);
            b = s.substr(index + 1, s.length - 1);
            z = parseFloat(a) * parseFloat(b);
            s = z.toString();
        } else if ((index = s.indexOf("/")) > 0) {
            a = s.substr(0, index);
            b = s.substr(index + 1, s.length - 1);
            z = parseFloat(a) / parseFloat(b);
            s = z.toString();
        }


        s += '/';
        Ext.getCmp('js').setValue(s);


        Ext.getCmp('dy').setValue(z);
    },
    strmultix: function () {
        var s = Ext.getCmp('js').getValue();
        var z;
        var index;
        if ((index = s.indexOf("+")) > 0) {
            a = s.substr(0, index);
            b = s.substr(index + 1, s.length - 1);
            z = parseFloat(a) + parseFloat(b);
            s = z.toString();
        } else if ((index = s.indexOf("-")) > 0) {
            a = s.substr(0, index);
            b = s.substr(index + 1, s.length - 1);
            z = parseFloat(a) - parseFloat(b);
            s = z.toString();
        } else if ((index = s.indexOf("*")) > 0) {
            a = s.substr(0, index);
            b = s.substr(index + 1, s.length - 1);
            z = parseFloat(a) * parseFloat(b);
            s = z.toString();
        } else if ((index = s.indexOf("/")) > 0) {
            a = s.substr(0, index);
            b = s.substr(index + 1, s.length - 1);
            z = parseFloat(a) / parseFloat(b);
            s = z.toString();
        }


        s += '*';
        Ext.getCmp('js').setValue(s);


        Ext.getCmp('dy').setValue(z); 
    },
    strjian: function () {
        var s = Ext.getCmp('js').getValue();
        var z;
        var index;
        if ((index = s.indexOf("+")) > 0) {
            a = s.substr(0, index);
            b = s.substr(index + 1, s.length - 1);
            z = parseFloat(a) + parseFloat(b);
            s = z.toString();
        } else if ((index = s.indexOf("-")) > 0) {
            a = s.substr(0, index);
            b = s.substr(index + 1, s.length - 1);
            z = parseFloat(a) - parseFloat(b);
            s = z.toString();
        } else if ((index = s.indexOf("*")) > 0) {
            a = s.substr(0, index);
            b = s.substr(index + 1, s.length - 1);
            z = parseFloat(a) * parseFloat(b);
            s = z.toString();
        } else if ((index = s.indexOf("/")) > 0) {
            a = s.substr(0, index);
            b = s.substr(index + 1, s.length - 1);
            z = parseFloat(a) / parseFloat(b);
            s = z.toString();
        }


        s += '-';
        Ext.getCmp('js').setValue(s);


        Ext.getCmp('dy').setValue(z);
    },
    strjia: function () {
        var s = Ext.getCmp('js').getValue();
        var z;
        var index;
        if ((index = s.indexOf("+")) > 0) {
            a = s.substr(0, index);
            b = s.substr(index + 1, s.length - 1);
            z = parseFloat(a) + parseFloat(b);
            s = z.toString();
        } else if ((index = s.indexOf("-")) > 0) {
            a = s.substr(0, index);
            b = s.substr(index + 1, s.length - 1);
            z = parseFloat(a) - parseFloat(b);
            s = z.toString();
        } else if ((index = s.indexOf("*")) > 0) {
            a = s.substr(0, index);
            b = s.substr(index + 1, s.length - 1);
            z = parseFloat(a) * parseFloat(b);
            s = z.toString();
        } else if ((index = s.indexOf("/")) > 0) {
            a = s.substr(0, index);
            b = s.substr(index + 1, s.length - 1);
            z = parseFloat(a) / parseFloat(b);
            s = z.toString();
        }


        s += '+';
        Ext.getCmp('js').setValue(s);


        Ext.getCmp('dy').setValue(z);
    },
    fuhao: function (btn) {
        var s = Ext.getCmp('js').getValue();
        var z;
        var index;
        if ((index = s.indexOf("+")) > 0) {
            a = s.substr(0, index);
            b = s.substr(index + 1, s.length - 1);
            z = parseFloat(a) + parseFloat(b);
            s = z.toString();
        } else if ((index = s.indexOf("-")) > 0) {
            a = s.substr(0, index);
            b = s.substr(index + 1, s.length - 1);
            z = parseFloat(a) - parseFloat(b);
            s = z.toString();
        } else if ((index = s.indexOf("*")) > 0) {
            a = s.substr(0, index);
            b = s.substr(index + 1, s.length - 1);
            z = parseFloat(a) * parseFloat(b);
            s = z.toString();
        } else if ((index = s.indexOf("/")) > 0) {
            a = s.substr(0, index);
            b = s.substr(index + 1, s.length - 1);
            z = parseFloat(a) / parseFloat(b);
            s = z.toString();
        }
        if (s.substr(0, 1) == '-') s = s.substr(1, s.length - 1);
        else s = '-' + s;
        Ext.getCmp('js').setValue(s);


        Ext.getCmp('dy').setValue(s);
    },
    douhao: function (btn) {
        var s = Ext.getCmp('js').getValue();
        s += btn.text;
        Ext.getCmp('js').setValue(s);
        s = Ext.getCmp('dy').getValue();
        s += btn.text;
        Ext.getCmp('dy').setValue(s);
    }


});

使用时只需用var caculatepanel = new Ext.create('Ext.ux.Caculate', { region: 'east', iconCls: 'icon-help' });就行了。如果大家要下载，可到我的源码

http://download.csdn.net/detail/zwp20002/4807381下载

  

星云飞龙
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
extjs4之合并行插件使用
活出不一样的我
08-19 667
Ext.onReady(function() { Ext.create('Ext.data.Store', { storeId:'simpsonsStore', fields:['cat1', 'cat2', 'cat2_desc','name'], data:{'items':[ { "cat1": "分类1", "cat2": "分类21", "name": "名称1"
extjs-ux, EXT JS 4的一些插件和扩展.zip
10-11
extjs-ux, EXT JS 4的一些插件和扩展 插件和 EXT JS 4扩展 Ext.ux. aceeditor.Panel 演示( 简单): 链接演示( 流 语法): 链接演示：链接论坛：链接 Ext.ux. grid.feature.Tileview 演示：链接
Extjs4学习笔记-计算器
07-31 115
主要练习addBehaviors()函数使用： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&g..
extjs插件开发
zscomehuyue的专栏
03-13 115
extjs插件开发 [url]http://blog.csdn.net/zhangxin09/archive/2010/02/22/5317109.aspx[/url]
EXTJS4.1计算器插件
11-25
由于开发WEB需要一个WEB计算器插件，在网上找EXTJS4计算器插件没有一个，找extjs4.0计算器找到一个，但由于代码太多，在主界面上写太多代码，自我感觉以后看起来吃力，思路一下子不好摸到。因此写了这个插件，分享给大家。用的时候只需var caculatepanel = new Ext.create('Ext.ux.Caculate', { region: 'east', iconCls: 'icon-help' })就行了
Extjs 计算器 javascript计算器
04-15
用Extjs 的xtemplate写的网页使用计算器 模仿Window的简单计算器，运行index.html可以直接跑
VS Code 搭配 Sencha Plugin 插件简直不要太好用.用于开发 ExtJS/ExtAngular
08-02
搭配Sencha Plugin插件，它可以为开发ExtJS和ExtAngular项目提供强大的支持。这篇文章将详细介绍如何使用VS Code和Sencha Plugin插件来提升你的前端开发效率。 首先，让我们了解一下ExtJS。ExtJS是一个用于构建富...
extjs插件开发教程
12-05
开发插件的基本步骤包括定义插件类、实现插件功能和将插件与组件关联。 1. **定义插件类**： 在ExtJS中，插件通常是一个实现了`Ext.AbstractPlugin`接口的类。你需要定义一个类，并在类中声明`ptype`属性，以便于...
extjs4打印grid插件
08-14
总的来说，"extjs4打印grid插件"是ExtJS4开发中非常实用的一个工具，它为Grid Panel提供了方便的打印功能，极大地丰富了用户体验，特别是在数据报告和数据分析场景中。通过深入理解和使用这个插件，开发者可以更好地...
Extjs4 MVC开发笔记源码
09-27
- `extjs4`: ExtJS 4库文件夹，包含所有必需的库文件。 - `images`: 图像资源文件夹，存放应用所需的图片。 - `Data`: 可能包含模拟数据或者JSON文件，供测试和开发使用。 - `server`: 如果有服务器端交互，可能包含...
ExtJS4插件EditArea
weixin_30296405的博客
06-10 105
EditArea是一个支持语法高亮的文本编辑器，同类软件还有Ace, CodeMirror等。具体功能方面的差异，请访问http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors。项目中用到ExtJS 4.2和EditArea，由于找不到EditArea插件，因此自己实现了一个，经测试基本可用。实...
extjs 在textfield后面加一个button_编写一个计算器 利用react hook + context
weixin_29420299的博客
12-25 128
通过编写一个计算器 来加深 对 react hook 和 context api 的理解我们要实现上面这样的计算器 第一步利用 create-react-app 快速创建项目npx create-react-app calculatorcd随后你会得到一个这样的目录第二步 构建程序主体结构我们创建一个Calculator.js 的文件这个 文件里面需要 有计算器的展示显示屏，还有数字操作面板imp...
【小工具】原生JS的计算器
zuncle的博客
02-10 917
【小工具】原生JS的计算器<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>写给新手：js表单操作（四） 简单计算器（二）</title> <style type="text/css"> body {
extjs 实现 NumberField 即时计算
隋旭峰的专栏
10-16 5791
例如有三列NumberField，分别是：开始量 结束量  差。实现输入完开始量和结束量，即时自动计算差并填充。 在Ext.form.NumberField加入listeners，选用的事件为“change” var paramStart = new Ext.form.NumberField({ id:"paramStart", fieldLa
数据结构--简单实现计算器
哥不帅但很坏的博客
03-17 7591
数据结构--简单实现计算器 中缀表达式转为后缀表达式实现计算器
Ext学习日记——网页计算器示例
iteye_2863的博客
05-19 166
  网页计算器是方便用户进行数学计算的一种有力工具。传统的网页计算器通过纯JvaScript在客户端实现，计算逻辑易被用户获取，安全性不高。通过Ajax优化过的网页计算器将主要的计算逻辑放在服务器端进行运算，客户端服装收集用户输入的表达式，提高了程序的安全性非常适合于有安全要求的场合。       /* * 网页计算器示例 */ Ext.onReady(function()...
Extjs 4 MVC模式开发员工管理系统
重新组织后的目录结构包括了Data、Images、Include、App、Extjs4和Server等文件夹，每个都有特定的作用： - Data：存储数据库文件，如SQLite或MySQL，用于管理应用的数据。 - Images：存放自定义图片资源。 - ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值