Extjs中利用Menu和GridPanel生成一个TriggerField -

357029540

浏览: 736996 次
性别:
来自: 重庆

最近访客更多访客>>

韩毅Evan

heroqt

jis117

divver

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Extjs中利用Menu和GridPanel生成一个TriggerField

博客分类：

EXTJS
JAVA

EXTJS

Extjs中TriggerField是专门生成下拉框功能的，它是DataField,TimeField和Combox的父类，在这里提供了一个利用Menu和GridPanel生成一个TriggerField的例子。Extjs是3.2版本的。

jsp文件:

<html>

<head>

     <script type="text/javascript"></script>

     <link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css">

     <script type="text/javascript" src="./ext/adapter/ext/ext-base.js"></script>

     <script type="text/javascript" src="./ext/ext-all.js"></script>

     <script type="text/javascript" src="./js/form.js"></script>

     <link rel="stylesheet" type="text/css" href="./css/menu.css">

</head>

<body>

    <div id="container">

    <div id="form"></div>

</div>

</body>

</html>

js文件：

form.js

Ext.onReady(function(){

var cm = new Ext.grid.ColumnModel([

   {header:'编号',dataIndex:'id',width:50,sortable:true,

   editor:new Ext.grid.GridEditor(

       new Ext.form.NumberField({

          allowBlank:false,

          allowNegative:false,

          maxValue:10

       })

   )},

   {header:'名称',dataIndex:'name',width:100,sortable:true},

   {header:'性别',dataIndex:'sex'},

   {header:'描述',dataIndex:'desc',width:153},

   {header:'日期',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')},

   {header:'color',dataIndex:'color'}

]);

var data = [

   ['1','北京','male','首都','2013-06-12','#FBF8BF'],

   ['2','上海','female','东方明珠','2013-06-12','#99CC99'],

   ['3','天津','female','港口城市','2013-06-12'],

   ['4','重庆','male','最年轻的直辖市','2013-06-12','#F5C0C0']

];

var store = new Ext.data.Store({

    proxy:new Ext.data.MemoryProxy(data),

    reader:new Ext.data.ArrayReader({},[

       {name:'id'},

       {name:'name'},

       {name:'sex'},

       {name:'desc'},

       {name:'date',type:'date',dateFormat:'Y-m-d'},

       {name:'color'}

    ])

});

var grid = new Ext.grid.EditorGridPanel({

    store:store,

    cm:cm,

    width:650,

    height:120,

    stripeRows:true,

    loadMask:true,

    viewConfig:{

    forceFit:true,

    enableRowBody:true,

    columnsText:'显示的列',

    sortAscText:'升序',

    sortDescText:'降序',

    scrollOffset:1

    }

});

store.load();

var menu = new Ext.menu.Menu({

    items:[grid]

});

var triggerField = new Ext.form.TriggerField({

    fieldLabel:'选择',

    name:'name',

    onSelect:function(record){},

    onTriggerClick:function(){

    if(this.menu == null){

    this.menu = menu;

    }

    this.menu.show(this.el, 'tl-bl?');//弹出的菜单的左上角或左下角与Ext.form.TriggerField对齐

    }

});

grid.on('rowclick',function(grid,rowIndex,e){

   menu.hide();//选择后隐藏menu

   triggerField.setValue(rowIndex);//设置行号

});

var form = new Ext.form.FormPanel({

    title:'form',

    frame:true,

    renderTo:'form',

    items:[triggerField]

});

});

截图如下：

分享到：

Extjs的comboBox的级联显示 | Extjs动态生成grid

2015-04-22 21:26
浏览 901
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Extjs中利用Menu和GridPanel生成一个TriggerField

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Extjs中利用Menu和GridPanel生成一个TriggerField

评论

发表评论

相关推荐

如何保证在Java多线程中的原子性操作？

Java内存模型简单介绍

java中线程挂起的几种方式

自定义线程池简单介绍

实现自己的spring boot starter

使用POI实现合并行的导入

Spring IOC设计原理解析

SpringBoot集成自定义HandlerMethodArgumentResolver参数初始值解析

关于spring cloud config加密EncryptionTooWeakException异常说明

gradle使用mybatis-generator生成user表相关文件只生成mysql..user的原因说明

SpringBoot+Activiti的serviceTask注入异常问题

16进制与字符串的互转及转换为byte数组

JVM学习总结

利用JavaFX创建一个可以订阅发布的MQTT客户端桌面程序

java8新特性time类相关介绍

java动态添加外部jar包到classpath

java 10进制转16进制带ox格式输出

SpringBoot+thymeleaf简单实现登陆注册及记账功能

Java 8的新特性—终极版

对\\uxx转换为unicode编码的\uxx

最近访客更多访客>>