ExtJS MultiselectItemSelector的使用示例 - 看看我都干了些啥！ - ITeye博客

`

crabdave

浏览: 1294894 次
性别:
来自: 北京

最近访客更多访客>>

hwj385327450

ergjss

寒号鸟whpj

linkoog

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

masuweng：
Intellij idea 主题下载网址
mimicom：还有一个情况, 也是连不上 2018-05-06T06:01: ...
docker-compose 部署shipyard
lixuansong： put()方法调用前必须先手动调用remove()，不然不会实 ...
JavaScript创建Map对象（转）
jiao_zg22：方便问下，去哪里下载包含Ext.ux.TabCloseMenu ...
Ext.ux.TabCloseMenu插件的使用（TabPanel右键关闭菜单）示例
netwelfare：对于基本类型的讲解，文章写的有点简单了，没有系统化，这篇文章介 ...
Java 基础类型范围

ExtJS MultiselectItemSelector的使用示例

博客分类：

ExtJS

EXT CSS JavaScript prototype HTML

阅读更多

ExtJS MultiselectItemSelector的使用示例

效果：

创建调用的HTML：

<html>
<head>
    <title>Forms</title>
    <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="examples.css"/>

<link rel='stylesheet' type='text/css' href='./Multiselect.css'>

    <script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
    <script type="text/javascript" src="./Multiselect.js"></script>
    <script type="text/javascript" src="./DDView.js"></script>
</head>
<body>

<script type="text/javascript">

Ext.onReady(function(){

    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = 'side';

/*
* Ext.ux.Multiselect Example Code
*/

   var formMultiselect = new Ext.form.FormPanel({
    labelWidth: 75,
    labelAlign: "right",
    width:700,
    items:[{
     xtype:"multiselect",
     fieldLabel:"Multiselect",
     name:"multiselect",
     dataFields:["code", "desc"],
     data:[[123,"One Hundred Twenty Three"],
      ["1", "One"], ["2", "Two"], ["3", "Three"], ["4", "Four"], ["5", "Five"],
      ["6", "Six"], ["7", "Seven"], ["8", "Eight"], ["9", "Nine"]],
     valueField:"code",
     displayField:"desc",
     width:250,
     height:200,
     allowBlank:true,
     legend:"Multiselect",
     tbar:[{text:"clear",handler:function(){formMultiselect.getForm().findField("multiselect").reset();}}]
    }],
    buttons:[{
     text:"Get Value",
     handler: function(){
      alert(formMultiselect.getForm().getValues(true));
     }
    },{
     text:"Set Value (2,3)",
     handler: function(){
      formMultiselect.getForm().findField("multiselect").setValue("2,3");
     }
    },{
     text:"Mark Invalid",
     handler: function(){
      formMultiselect.getForm().findField("multiselect").markInvalid("Invalid");
     }
    },{
     text:"Toggle Enabled",
     handler: function(){
      var m=formMultiselect.getForm().findField("multiselect");
      if (!m.disabled)m.disable();
      else m.enable();
     }
    },{
     text:"Reset",
     handler: function(){
      formMultiselect.getForm().findField("multiselect").reset();
     }
    }]
   });
   formMultiselect.render("form-ct-multiselect");

/*
* Ext.ux.ItemSelector Example Code
*/

   var formItemSelector = new Ext.form.FormPanel({
    labelWidth: 75,
    width:700,
    items:[{
     xtype:"itemselector",
     name:"itemselector",
     fieldLabel:"ItemSelector",
     dataFields:["code", "desc"],
     fromData:[[123,"One Hundred Twenty Three"],
      ["1", "One"], ["2", "Two"], ["3", "Three"], ["4", "Four"], ["5", "Five"],
      ["6", "Six"], ["7", "Seven"], ["8", "Eight"], ["9", "Nine"]],
     toData:[["10", "Ten"]],
     msWidth:250,
     msHeight:200,
     valueField:"code",
     displayField:"desc",
     //imagePath:"ext-ux/multiselect",
     //switchToFrom:true,
     toLegend:"Selected",
     fromLegend:"Available",
     toTBar:[{
      text:"Clear",
      handler:function(){
       var i=formItemSelector.getForm().findField("itemselector");
       i.reset.call(i);
      }
     }]
    }],
    buttons:[{
     text:"Get Value",
     handler: function(){
      alert(formItemSelector.getForm().getValues(true));
     }
    },{
     text:"Mark Invalid",
     handler: function(){
      formItemSelector.getForm().findField("itemselector").markInvalid("Invalid");
     }
    }]
   });
   formItemSelector.render("form-ct-itemselector");

});

</script>
<div style="width:800px;">
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">

        <div id="form-ct-multiselect"></div>
    </div></div></div>
    <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>

<br><p>

<div style="width:800px;">
    <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
    <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
        <div id="form-ct-itemselector"></div>

</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>

</body>
</html>

备注：

组件的源文件、css文件、图片见附件。

MultiselectItemSelector-3.0.rar (12.3 KB)
下载次数: 501

分享到：

使用localXHR.js让ExtJS docs可以在本地浏 ... | ExtJS GroupHeaderPlugin的使用示例

2009-02-17 10:30
浏览 8516
评论(3)
查看更多

评论

3 楼 cw_oldbig 2014-11-14

kgkg521 写道

不能运行，老报一个“A[C.xtype || D] is not a constructor”的错误！

是的，直接运行例子没事，集成到项目就报这个错

2 楼 kgkg521 2011-12-28

用原文件就没事

1 楼 kgkg521 2011-12-28

不能运行，老报一个“A[C.xtype || D] is not a constructor”的错误！

发表评论

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

相关推荐

ExtJS静态使用示例: 以下是对标题"ExtJS静态使用示例"和描述中涉及知识点的详细解释： 1. **ExtJS库**：ExtJS是Sencha公司开发的一个前端框架，它基于MVC（Model-View-Controller）设计模式，提供了丰富的UI组件和强大的数据管理能力。...

Extjs MultiselectItemSelector: `Multiselect.html` 文件是示例页面，展示了如何在HTML中嵌入和使用MultiselectItemSelector组件。通过分析这个文件，开发者可以学习到如何配置和初始化组件，以及如何与后端数据源进行绑定。 `Multiselect.js` 是...

extJS myeclipse源码示例: extJS myeclipse源码示例

extjs6.6项目示例: 在这个"extjs6.6项目示例"中，我们可以深入理解ExtJS的用法，并学习如何构建基于此框架的应用程序。首先，"原生态extjs框架的web项目"指的是使用纯ExtJS库构建的项目，没有依赖其他额外的前端框架或库。这种项目...

extjs4官方示例以及api文档html版: 虽然EXTJS4的示例可以在本地运行，但考虑到跨域问题和性能优化，建议使用轻量级的HTTP服务器，如Nginx。Nginx是一个高性能的Web服务器和反向代理，配置简单且支持静态文件快速响应，对于前端开发非常友好。安装Nginx...

extJs4.2MVC示例: 严格按照MVC架构分的曾，可以运行的extJs4.2MVC示例，在myclipse加到一个项目里的的webroot文件夹下，运行index.html即可

Extjs6示例中文版: ### Extjs6示例中文版知识点详解 #### 1. ExtJS6简介及学习动机 ExtJS6是一款功能强大的客户端JavaScript框架，适用于构建复杂的企业级Web应用程序。由于中文学习资源较少，作者决定翻译一本名为《ExtJS6 By ...

extjs 2.0简单示例: extjs 2.0简单示例，不全，基本上可以知道是什么东西。

extjs mvc简单示例: 这个简单的示例展示了如何在ExtJS中使用MVC模式创建一个基本的数据展示应用。在实际项目中，你可以根据需求扩展模型、视图、控制器以及应用配置，构建更复杂的交互和功能。记住，MVC模式的主要优点在于提高了代码的...

ExtJS文件上传示例: 在这个"ExtJS文件上传示例"中，我们将探讨如何利用ExtJS实现文件上传功能。在Web应用中，文件上传是常见的需求，例如用户可能需要上传图片、文档或其他类型的文件。ExtJS 提供了内置的组件和API来处理这种场景。...

ExtJs4登录示例: 这个"ExtJs4登录示例"是一个典型的基于ExtJs4开发的用户登录界面的实例，它展示了如何使用ExtJs4的各种组件和功能来实现一个交互式的登录系统。在ExtJs4中，登录示例可能包括以下几个关键组成部分： 1. **窗口...

ASP.NET MVC5 +ExtJS6 表格示例: 前端使用ExtJS6的Grid组件展示这些数据，创建一个动态、可交互的表格。用户可以通过这个表格进行筛选、排序，甚至编辑数据，而这些操作会通过Ajax请求反馈到服务器。在这个学习示例中，可能包含以下关键知识点： ...

spket1.6.12+extjs5简单示例: 以下是一个简单的 ExtJS 5 应用示例，展示了如何使用自动生成的 model 和 store： ```javascript Ext.application({ name: 'MyApp', launch: function () { var store = Ext.create('MyApp.store.MyStore', {data...

EXTJS+SSH示例: 个人SSH框架学习示例，附近为个人搭建的示例SSH+EXTJS框架

extjs4.0 MVC 示例代码: 下面将详细探讨EXTJS 4.0中的MVC概念以及在示例代码中可能涉及的关键知识点。 **1. MVC模式概述** MVC模式是一种软件设计模式，用于将业务逻辑、用户界面和数据存储分离。在EXTJS 4.0中，模型（Model）负责管理数据...

ExtJS MVC示例: 总结来说，`account_manager`示例展示了如何使用ExtJS 4.2.0的MVC模式来构建一个账户管理系统，包括数据模型、数据存储、用户界面和逻辑控制。通过这种结构，开发者可以高效地组织代码，提高项目的可维护性和可扩展...

ExtJs使用示例代码之窗口组件和异步请求: ExtJs使用示例代码之窗口组件和异步请求

EXTJS 折线 chart action 代码示例: 这个示例展示了如何使用EXTJS创建一个与Java后端交互的折线chart，动态加载数据并显示。你可以根据实际需求调整chart的样式和交互效果，如添加工具提示、轴配置、图例等。通过理解EXTJS的store、proxy、model和...

extjs3.0开发包含示例api: 示例代码是学习EXTJS 3.0的重要途径，通过查看和分析示例，开发者可以快速掌握各种组件的使用方法和功能。示例通常包括以下内容： 1. **基础组件示例**：如创建基本的按钮、文本框、下拉列表等。 2. **高级组件...

EXTJS 上传组件及示例: 本篇文章将详细解析EXTJS中的上传组件及其示例，帮助开发者更好地理解和使用这一功能。 EXTJS 的上传组件通常通过`Ext.form.field.File`（也称为FileField或UploadField）实现。这个组件提供了一个表单字段，用户...

Global site tag (gtag.js) - Google Analytics