ExtJs之Field.Trigger和Field.Spinner

作文本框功能的。

<!DOCTYPE html>
<html>
<head>
    <title>ExtJs</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">
        <script type="text/javascript" src="ExtJs/ext-all.js"></script>
        <script type="text/javascript" src="ExtJs/bootstrap.js"></script>
        <script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>

    <script type="text/javascript">
            Ext.onReady(function() {
                var testForm = new Ext.form.Panel({
                    title: 'Ext.form.field.Trigger.Sample',
                    bodyStyle: 'padding: 5 5 5 5',
                    frame: true,
                    height: 100,
                    width: 270,
                    renderTo: 'form',
                    defaults: {
                        labelSeparator: ':',
                        labelWidth: 70,
                        width: 200,
                        labelAlign: 'left'
                    },
                    items: [{
                        xtype: 'triggerfield',
                        id: 'memo',
                        fieldLabel: 'triggerfield',
                        hideTrigger: false,
                        onTriggerClick: function(){
                            var memo = testForm.getForm().findField('memo');
                            alert(memo.getValue());
                            Ext.getCmp('memo').setValue('test');
                        }
                    }]
                });

                new Ext.form.Panel({
                    title: 'Ext.form.field.Spinner.Sample',
                    bodyStyle: 'padding: 5 5 5 5',
                    frame: true,
                    height: 70,
                    width: 250,
                    renderTo: 'form1',
                    defaults: {
                        labelSeparator: ':',
                        labelWidth: 70,
                        width: 200,
                        labelAlign: 'left'
                    },
                    items: [{
                        xtype: 'spinnerfield',
                        fieldLabel: 'spinnerfiled',
                        id: 'salary',
                        value: 100,
                        onSpinUp: function(){
                            var salaryCmp = Ext.getCmp('salary');
                            salaryCmp.setValue(Number(salaryCmp.getValue()) + 2);
                        },
                        onSpinDown: function() {
                            var salaryCmp = Ext.getCmp('salary');
                            salaryCmp.setValue(Number(salaryCmp.getValue()) - 5);
                        }
                    }]
                });
            });
    </script>
</head>
<body>
    <div id='form'></div>
        <div id='form1'></div>

</body>
</html>

时间: 2024-12-03 04:36:52

ExtJs之Field.Trigger和Field.Spinner的相关文章

Lucene5学习之Field理解

     Field即Lucene索引文档里的域,一个文档Document可以包含多个Field域,你可以类比数据库表里可以有多个字段来理解,虽然两者不能等同,但有助于你理解每个Field包含3部分信息:域的名称,域的类型,域的值, 域的值可以是String,Java.io.Reader,TokenStream,可以是byte[]字节数组,可以是数字等等,而域的类型则是有IndexableFieldType类表示的,域的名称就没什么好说的了.     为了方便我们创建Field,Lucene为我

解析Java中的Field类和Method类_java

Field类Field类中定义了一些方法,可以用来查询字段的类型以及设置或读取字段的值.将这些方法与继承而来的member方法结合在一起.就可以使我们能够找出有关字段声明的全部信息,并且能够操纵某个特定对象或类的字段. getGenericType方法返回表示字段的声明类型的Type实例.对于像String或int这样的平凡类型,该方法将返回与其相关联的Class对象,例如String.class和int.classo对于像List < Stri ng>这样的参数化类型,该方法将返回Param

dedecms自增标签[field:global.autoindex/]的运用

用bootstrap建站时用到幻灯片切换模块,里面有个active(下面代码中的data-slide-to="0"),其余的按顺序递增(1,2),如果用dedecms就可以用autoindex来替代,如下图中的切换小圆点,点击不同的圆点会切换不同的banner图片 <div class="carousel slide" id="carousel-420353"> <ol class="carousel-indicato

Extjs学习笔记之四 工具栏和菜单_extjs

ToolBar的使用很简单,关键是向ToolBar上面添加内容,默认地ToolBar添加的是Button,不过实际上可以向Toolbar添加任意的组件.下面是一个例子: 复制代码 代码如下: <script type="text/javascript"> Ext.onReady(function() { var tb = new Ext.Toolbar({ renderTo: document.body, width: 600, height: 100, items: [

Extjs中常用表单介绍与应用_extjs

目标: 知道表单面板如何创建 了解表单面板中xtype的类型的应用 知道表单面板如何验证,绑定,取值 综合应用表单面板(玩转它) 内容: 首先我们要理解的是FormPanel也是继承panel组件的.所以它有着panel的属性 要创建一个表单面板其实很简单 var MyformPanel=new Ext.form.formpanel(); 表单面板和面板一样只是作为一个容器出现的,需要我们使用items加入各控件元素来丰富我们的表单面板, defaults:{},此属性提取了items中各组件项

Extjs读取xml文件生成动态表格和表单

最近开发项目,需要动态读取xml文件,生成Extjs界面,xml文件通过前台页面的按钮事件传进来,可以在网上查找[javascript 弹出子窗口]的相关文章</a> 获取弹出窗口url后的参数方法: // 获取url后的参数值 function getQueryStringValue(name) { var url = window.location.search; if (url.indexOf('?') < 0) { return null } var index = url.in

ExtJs 自定义Vtype验证

最近公司开发项目在用ExtJs,碰到验证的就大概的总结了一些常用的验证.自定义的验证主要有两种方式:一种是单字段的自定义验证,另一种是多字段间的验证.对于单字段的验证主要通过regex配置项指定自定义正则表达式进行验证,而字段多的验证可以通过字定义VType类型进行验证支持. Ext.apply(Ext.form.VTypes, { daterange: function(val, field) { var date = field.parseDate(val); // We need to f

ExtJs之FormPanel篇

表单时是web中常见的元素,Ext中的表单也是特别丰富的,接下来我们一块看看表单的相关内容. 还是先看一下代码和效果: Ext.onReady(function(){var fp=new Ext.form.FormPanel({ //注意:Ext.form.FormPanel=Ext.FormPanel title:'用户登录', width:300,//height:250, bodyStyle:'padding:5px 5px 0', renderTo:'divFormPanel', fra

[ExtJS5学习笔记]第三十五节 sencha extjs 5 组件查询方法总结

一个UI前台组件肯定会比较多,我们通常习惯性的使用ID来获取需要操作的组件,但是这种方法是extjs推荐的么?有没有extjs推荐使用的获取组件的方法呢? 目录 目录 extjs的查询组件的API 查询实例 基本的组件查询 组件树查询 通过组件的属性检索 属性匹配操作符 逻辑运算的 官方案例 extjs的查询组件的API 组件查询API文档地址:5.1.0-apidocs/#!/api/Ext.ComponentQuery-method-query 可以看到是使用的Ext.ComponentQu