`
huiqinbo
  • 浏览: 344657 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

无废话ExtJs 系统教程十九[动态复选框：RemoteCheckboxGroup]

 
阅读更多

我们在开发系统的时候经常会用到 Checkgroup 由后台取出的情况，然而在 ExtJs  CheckboxGroup 并没有提供该服务端数据源的属性。

1.代码如下：

复制代码
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <title></title>
  5     <!--ExtJs框架开始-->
  6     <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script>
  7     <script type="text/javascript" src="/Ext/ext-all.js"></script>
  8     <script type="text/javascript" src="/Ext/ext-basex.js"></script>
  9     <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" />
 10     <!--ExtJs框架结束-->
 11     <script type="text/javascript">
 12         Ext.onReady(function () {
 13             //----------------------继承了CheckboxGroup使其能够取 remote 数据源开始----------------------//
 14             Ext.namespace("Ext.ux");
 15             Ext.ux.RemoteCheckboxGroup = Ext.extend(Ext.form.CheckboxGroup, {
 16                 url: '',
 17                 boxLabel: '',
 18                 inputValue: '',
 19                 setValue: function (val) {
 20                     if (val.split) {
 21                         val = val.split(',');
 22                     }
 23                     this.reset();
 24                     for (var i = 0; i < val.length; i++) {
 25                         this.items.each(function (c) {
 26                             if (c.inputValue == val[i]) {
 27                                 c.setValue(true);
 28                             }
 29                         });
 30                     }
 31                 },
 32                 reset: function () {
 33                     this.items.each(function (c) {
 34                         c.setValue(false);
 35                     });
 36                 },
 37                 getValue: function () {
 38                     var val = [];
 39                     this.items.each(function (c) {
 40                         if (c.getValue() == true)
 41                             val.push(c.inputValue);
 42                     });
 43                     return val.join(',');
 44                 },
 45                 onRender: function (ct, position) {
 46                     var items = [];
 47                     if (!this.items) { //如果没有指定就从URL获取
 48                         Ext.Ajax.request({
 49                             url: this.url,
 50                             scope: this,
 51                             async: false,
 52                             success: function (response) {
 53                                 var data = Ext.util.JSON.decode(response.responseText);
 54                                    55                                 var Items2 = this.items;
 56                                 if (this.panel) {
 57                                     var columns = this.panel.items;
 58                                     if (columns) {
 59                                         for (var i = 0; i < columns.items.length; i++) {
 60                                             column = columns.items[i];
 61                                             column.removeAll();
 62                                         }
 63                                         Items2.clear();
 64                                     }
 65                                 }
 66                                 for (var i = 0; i < data.length; i++) {
 67                                     var d = data[i];
 68                                     var chk = { boxLabel: d[this.boxLabel], name: this.name, inputValue: d[this.inputValue] };
 69                                     items.push(chk);
 70                                 }
 71                             }
 72                         });
 73                         this.items = items;
 74                     }
 75                     Ext.ux.RemoteCheckboxGroup.superclass.onRender.call(this, ct, position);
 76                 }
 77             });
 78             Ext.reg('remotecheckboxgroup', Ext.ux.RemoteCheckboxGroup);
 79             //----------------------继承了CheckboxGroup使其能够取 remote 数据源结束----------------------//
 80             var checksource = new Ext.ux.RemoteCheckboxGroup({
 81                 name: 'checksource',
 82                 boxLabel: 'name',
 83                 inputValue: 'id',
 84                 url: '/App_Ashx/Demo/Category.ashx',
 85                 fieldLabel: '招聘来源',
 86                 style: 'padding-top:3px;height:17px;'
 87             });
 88 
 89             //创建panel
 90             var panel = new Ext.Panel({
 91                 title: '动态复选框',
 92                 width: 200,
 93                 height: 200,
 94                 frame: true,
 95                 items: [checksource]
 96             });
 97 
 98             //创建窗体
 99             var win = new Ext.Window({
100                 title: '窗口',
101                 id: 'window',
102                 width: 476,
103                 height: 374,
104                 resizable: true,
105                 modal: true,
106                 closable: true,
107                 maximizable: true,
108                 minimizable: true,
109                 items: [panel]
110             });
111             win.show();
112         });
113     </script>
114 </head>
115 <body>
116 <!--
117 说明：
118 (1)要引用 <script type="text/javascript" src="/Ext/ext-basex.js"></script>，因为：第51行的  async: false, 设置了Ajax为同步读取数据，
119    什么是同步：什么是异步？
120    同步：client 向 service 提交请求--service 处理响应[此时client端浏览器处于假死状态]----直到 service 处理完毕后client才会程序继续顺序执行。
121    异步：client 向 service 提交请求--service 处理响应[此时client端浏览器处于活动状态，可继续执行其他程序]---处理完毕后程序插入执行，因为client的程序也在进行，所以service 端处理完了以后，如果客户端响应时会插入到当前的执行队列执行。然后顺序执行。
122    例子：A,B[向服务器发送请求],C[服务器返回请求结果],D,E为顺序执行的客户端程序。
123    同步处理：A--B--C--D--E，完全按顺序，E会等待C后再执行。
124    异步处理：A--B--D--E--C，或是 A--B--D--C--E等等，B向服务器发送请求后，D、E不会等待C的结果，而是继续执行。C什么时候有结果了，什么时候在客户端执行，随机插入。
125    为什么这里要用 同步？
126    在onRender事件处理程序时，我们在后台取出 items 数据源的时候，如果是异步，很可能在使用 items 的时候 73行 this.items = items; 会报未定义或是为空的情况。根本原因就在于，服务器端还没有给该数组赋值，客户端就开始使用，所以这里要设置成同步。
127 (2)关于 /Ext/ext-basex.js 这个文件改过代码，为了支持 Firefox 12 ，如果是在其他地方下载的该文件，很可能 Firefox12 不支持。                  
128 
129 
130 (3)var checksource = new Ext.ux.RemoteCheckboxGroup({
131     name: 'checksource',    //名称，当客户端提交的时候，服务端会根据该名称接收值，当值为多选时post 结果如下[1,2,3]，用'，'分隔。
132     boxLabel: 'name',       //显示的字段
133     inputValue: 'id',       //checkBox存的值
134     url: '/App_Ashx/Demo/Category.ashx',//数据源的地址
135     fieldLabel: '招聘来源',
136     style: 'padding-top:3px;height:17px;'
137 });
138 -->
139 </body>
140 </html>
复制代码

服务端文件 /App_Ashx/Demo/Category.ashx 代码如下：

复制代码
 1 using System.Web;
 2 
 3 namespace ExtJs.WebSite.App_Ashx.Demo
 4 {
 5     public class Category : IHttpHandler
 6     {
 7         public void ProcessRequest(HttpContext context)
 8         {
 9             context.Response.Write("[{id:1,name:'类别一'},{id:2,name:'类别二'},{id:2,name:'类别三'}]");
10         }
11 
12         public bool IsReusable
13         {
14             get
15             {
16                 return false;
17             }
18         }
19     }
20 }
复制代码

2.效果如下：

无废话extjs教程

使用文件下载：ext-basex.rar

分享到：
| 无废话ExtJs 系列教程十八[继承：Extend ...
评论
发表评论

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

相关推荐

    无废话ExtJs 系统教程十四[列表：GridPanel]

    在"无废话ExtJS 系统教程十四[列表：GridPanel]"中，我们将会深入探讨如何有效地使用GridPanel来创建高效的、功能丰富的数据列表。 GridPanel是ExtJS中的核心组件之一，它允许用户以表格形式展示大量数据，并支持...

    extjs4.1下拉复选框完整DEMO

    总结一下，"extjs4.1下拉复选框完整DEMO"展示了如何利用ExtJS 4.1的组件系统和数据存储机制创建一个动态加载数据的下拉复选框。这个DEMO的实现包括核心库、用户扩展、资源文件和演示代码，为开发者提供了一个完整的...

    基于EXTjs 的 动态复选框树

    基于EXTjs 的 动态复选框树 json数据交互

    解决Extjs当中复选框全选后，取消选中某一项，全选框仍是选中状态的问题

    在EXTJS这个强大的JavaScript框架中，用户界面的交互设计是其一大亮点，其中包括各种各样的控件，如复选框（checkboxes）和全选功能。然而，在实际应用中，我们可能会遇到一个问题：当实现全选功能后，如果尝试取消...

    带复选框的 ExtJs tree

    在给定的文件中，我们关注的是“带复选框的ExtJS tree”这一主题，这涉及到ExtJS框架下的树形组件（TreePanel）如何与复选框结合，为用户提供更为灵活的数据选择和管理方式。 ### 标题解析：“带复选框的ExtJS tree...

    无废话ExtJs 系列教程十八[继承：Extend]

    在"无废话ExtJS系列教程十八[继承：Extend]"中，我们主要关注的是ExtJS中的类继承机制，这是一个核心特性，它允许开发者创建可复用和可扩展的组件结构。在JavaScript中，继承是通过原型链实现的，而在ExtJS中，它被...

    extjs带复选框的树包括全选 反选 子选父以及 父选子

    - `extjs复选框树.js`：这是实现上述功能的JavaScript代码，包括工具类和针对树节点的操作方法。 - `样式文件.css`：可能包含了一些自定义的样式，用于美化复选框和树的显示效果。 - `示例HTML文件.html`：演示如何...

    无废话ExtJs 系列教程十五[树：TreePanel]

    《无废话ExtJs系列教程十五：树：TreePanel》 ExtJs是一个强大的JavaScript库，用于构建富客户端Web应用。在本教程中，我们将深入探讨一个重要的组件——TreePanel，它是ExtJs用来展示层次结构数据的工具，常用于...

    无废话ExtJs 系列教程十三[页面布局：Layout]

    NULL 博文链接：https://huiqinbo.iteye.com/blog/2217105

    extjs3.X 带复选框的树

    "带复选框的树"是ExtJS中的TreePanel组件的一个扩展，允许用户通过复选框选择树结构中的节点。这种功能在数据层级结构的管理和筛选中非常有用，例如在组织架构、文件系统或者权限设置中。 复选框树的核心在于`...

    无废话ExtJs 教程十[下拉列表：Combobox]

    本教程将深入探讨ExtJS中的Combobox组件，包括其基本用法、配置选项、事件处理和自定义功能。 1. **Combobox的基本结构** - Combobox由两个主要部分组成：文本输入框和下拉列表。用户可以在输入框中键入文字，或者...

    无废话ExtJs 教程十二[员工信息表Demo：AddUser]

    【标题】"无废话ExtJs 教程十二[员工信息表Demo：AddUser]"是一个针对初学者和进阶者设计的教程，旨在帮助他们更好地理解和应用ExtJS框架创建员工信息管理系统的添加用户功能。在本教程中，我们将深入探讨如何使用...

    EXTJS动态树支持checkbox 全选

    标题中的“EXTJS动态树支持checkbox全选”指的是EXTJS中树组件的一个特性，即在树形结构中添加复选框（checkbox）功能，并支持全选和全取消选中操作。这样的功能对于需要用户进行多项选择的场景非常有用，比如文件...

    extjs4带全选复选框的下列表（有bug）

    1、解压，进入extjs4.2.1\examples\form，浏览器打开 hbox-form.html 文件，当我勾选中任意一个多选下拉框，然后再勾选‘ALL’时，‘ALL’却是不被选中的状态，且...extjs4.2.1\examples\form\MultipleComboBox.js

    弹出层弹出层复选框

    提问 - Boxy.ask() - 用户定义的选项，选择项传递给回调函数 弹出 - Boxy.alert() - 回调函数总是不被调用 确认 - Boxy.confirm() - 仅当用户选择了“确认”时回调函数会被调用 行业选择器 - Boxy.industry() - 仅当...

    Extjs4.2带复选框下拉树组件

    网上搜索了许久未找到...Extjs4.2 带复选框的下拉树，解决了向下勾选子节点、向上勾选父节点，正选反选获取值等问题，勾选的节点显示displayfield值直接显示在下拉文本框中。需要引用ext-all.js和ext-all-neptune.css

    Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法

    然而，在某些业务场景中，可能需要根据数据行的特定条件来控制复选框的可选性，即某些行的复选框需要在特定条件下不可选。本文针对这一需求提供了两种解决方案。 首先，我们可以通过`selModel`配置项中的`renderer`...

Magicbox
Global site tag (gtag.js) - Google Analytics