这几天，研究了一下Extjs，做了一个关于Extjs动态创建Checkboxgroup的例子,也参照了网上的一些代码。Web JSP页面代码如下：
<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.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="../extjs/ext-basex.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var MyCheckboxGroup=Ext.extend(Ext.form.CheckboxGroup,{
columns:4,
dataUrl:'', //数据地址
labelFiled:'label',
valueFiled:'value',
setValue:function(val){
alert(val);
if(val.split){
val=val.split(',');
}
this.reset();
for(var i=0;i <val.length;i++){
this.items.each(function(c){
//debugger;
if(c.inputValue==val[i]){
c.setValue(true);
}
});
}
},
reset:function(){
this.items.each(function(c){
c.setValue(false);
});
},
getValue:function(){
var val=[];
this.items.each(function(c){
if(c.getValue()==true)
val.push(c.inputValue);
});
return val.join(',');
},
onRender:function(ct, position){
var items=[];
if(!this.items){
/*
Ext.Ajax.request({
url:this.dataUrl,
scope:this,
async:false,
success: function(resp,opts) {
var respText = Ext.util.JSON.decode(resp.responseText);
for(var i=0;i <respText.totalCount;i++){
var d=respText.records[i];
var chk ={boxLabel:d.boxLabel, name: d.name, inputValue:d.inputValue};
items.push(chk);
}
}
});
*/
/**
//传统AJAX
var obj;
if (window.ActiveXObject) {
obj = new ActiveXObject('Microsoft.XMLHTTP');
}
else if (window.XMLHttpRequest) {
obj = new XMLHttpRequest();
}
obj.open('GET', this.dataUrl, false);
obj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
obj.send(null);
var respText = Ext.util.JSON.decode(obj.responseText);
for(var i=0;i <respText.totalCount;i++){
var d=respText.records[i];
var chk ={boxLabel:d.boxLabel, name: d.name, inputValue:d.inputValue};
items.push(chk);
}
*/
/*Ext Ajax*/
var conn = Ext.lib.Ajax.getConnectionObject().conn;
conn.open("get", this.dataUrl,false);
conn.send(null);
// 成功状态码为200
if (conn.status == "200") {
var respText = Ext.util.JSON.decode(conn.responseText);
for(var i=0;i <respText.totalCount;i++){
var d=respText.records[i];
var chk ={boxLabel:d.boxLabel, name: d.name, inputValue:d.inputValue,checked:d.check};
items.push(chk);
}
}
this.items=items;
}
MyCheckboxGroup.superclass.onRender.call(this, ct, position);
}
});
Ext.reg('mycheckgroup',MyCheckboxGroup);
var mycc=new MyCheckboxGroup({
fieldLabel: 'Auto Layout',
name: 'cb-custwidth',
dataUrl:'<%=request.getContextPath()%>/User_userRole'
});
var chk=new Ext.form.FormPanel({
renderTo:'form',
frame:true,
items:[
mycc
]
});
//mycc.setValue('SYSADMIN,CUSTOMERSERVICE');//设值
});
</script>
</head>
<body>
<div id="form"></div>
</body>
</html>
后台我用的是Struts2，代码如下：
public class UserAction extends ActionSupport {
private HttpSession session;
private HttpServletRequest request;
private HttpServletResponse response;
private String name;
private String pwd; //密码
private String privs;//权限
private int id;
private String userrole;
/**
* 获得用户权限Action
* @return
*/
public String userRole(){
PrintWriter out=null;
response.setContentType("text/html;charset=GBK");
UserService uservice=new UserService();
try {
out=response.getWriter();
} catch (IOException e) {
e.printStackTrace();
}
List<UserRole> list=uservice.getAllRole();
JSONArray obj=JSONArray.fromObject(list);
String res = new StringBuffer().append("{\"totalCount\":").append("\"").append(list.size()).append("\",")
.append("\"records\":").append(obj.toString()).append("}").toString();
out.println(res);
System.out.println(res);
return null;
}
}
以上是我这几天的研究成果。。。 呵呵，有什么问题，请留言。
分享到：
我是在.net下面用的，4.1的库，但是拿过来总是报错说找不到MyCheckboxGroup
相关推荐
在EXTJS中，`checkboxgroup` 是一个用于创建一组复选框的组件，通常用于让用户在多个选项中进行多选。 在EXTJS中，`checkboxgroup` 的配置项包括但不限于： 1. `xtype`: 这个属性定义了组件的类型，对于`checkbox...
Extjs3.0 中的CheckboxGroup默认不能动态添加item。虽然它继承了Ext.form.Field，但是却类似于容器。 CheckboxGroup配置中的items处理生成一个对应的panel，该处理过程只有一次，所以很难对CheckboxGroup进行动态...
总结来说，EXTJS动态树支持checkbox全选是一个结合了EXTJS TreePanel组件、数据模型、事件处理和异步加载技术的功能实现，旨在提供用户友好的多选操作。通过这个功能，开发者可以构建出更加交互性强、功能丰富的Web...
标题“extjs 实现动态表头”表明我们要讨论的是如何在ExtJS环境中构建一个能够动态改变列头的表格。动态表头的核心在于理解ExtJS的GridPanel组件和ColumnModel类。GridPanel用于显示数据，而ColumnModel则定义了...
在ExtJS中，这种功能主要通过`Ext.tree.TreePanel`或其现代版本`Ext.tree.View`来实现。 一、ExtJS 动态树基础 1. `Ext.tree.TreePanel`：这是ExtJS中用于创建树形结构的主要组件。它具有丰富的配置项和事件，支持...
ExtJs4 Checkbox Tree是基于ExtJs 4框架实现的一种特殊树形组件，它在传统的树形结构基础上增加了复选框功能。这种组件常用于需要用户多选树形数据的场景，比如权限设置、目录选择等。下面将详细介绍ExtJs4 Checkbox...
在 ExtJS 中实现动态树加载，我们需要遵循以下步骤： 1. **配置树节点**：首先，我们需要为树节点定义模型（Ext.data.TreeModel），并在模型中设置`leaf`属性为`false`来表示这是一个可扩展的节点，而非叶子节点。...
在本示例中，我们将深入探讨如何使用ExtJS实现动态加载grid，同时实现CRUD（创建、读取、更新、删除）操作和分页功能。 首先，让我们了解什么是Grid。在ExtJS中，Grid是一种数据网格组件，用于展示大量结构化数据。...
资源名称：用ExtJS实现动态载入树 WORD版内容简介：本文档主要讲述的是用ExtJS实现动态载入树；希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看资源截图： 资源太大，传百度网盘了，链接在附件中，有...
代码如下: Ext.override(Ext.form.CheckboxGroup,{ setValueForItem : function(val){ //多个选项值以逗号分开的 val = “,”+val+”,” this.items.each(function(item) { if (val.indexOf(item.inputValue) > -1) ...
总结起来，使用ExtJS实现动态加载树的关键步骤包括： 1. 创建数据库表和初始化数据，构建树形结构。 2. 在JSP文件中引入ExtJS库，定义展示树的HTML元素。 3. 编写JavaScript代码，使用`TreePanel`和`TreeLoader`构建...
最近小弟做了Extjs实现实现下拉框联动的效果，参考了好久才学会，闲下来发一个简单的例子。。呵呵
在本文中，我们将深入探讨如何使用ExtJS框架在前端动态生成表格，并结合后端数据进行展示。ExtJS是一个强大的JavaScript库，专用于构建富客户端Web应用程序，尤其在创建交互式用户界面方面表现突出。动态生成表格是...
我们首先从标题"ExtJs动态grid的生成"开始，了解动态生成Grid的基本概念和实现方法。 动态生成Grid意味着在运行时根据需求创建和更新Grid组件，而不是在应用初始化时静态定义。这种灵活性允许开发者更好地响应数据...
在这个"ExtJS实现聊天功能"的项目中，我们将探讨如何利用ExtJS框架构建一个类似于QQ的聊天应用程序。 首先，我们要理解聊天功能的核心要素。一个基本的聊天应用通常包含以下部分： 1. **用户界面**：ExtJS提供了...
本篇文章将深入探讨如何在ExtJS中创建并实现上方动态导航栏。 1. **创建基础结构** 在ExtJS中，导航栏通常使用`Ext.toolbar.Toolbar`组件来创建。首先，我们需要定义一个Toolbar实例，包含必要的配置项，如宽度、...
开发者可能通过设置动画参数，如持续时间、缓动函数、关键帧等，来实现书页翻转时的平滑动态效果。此外，`Ext.util.Transition`也可以用来创建更复杂的页面转换动画，让用户体验到类似实体书翻页的视觉冲击。 在...