★Ext的Ajax请求的编写
Ext.Ajax.request({
url: '',
callback: function(options,success,response){
if(success = true){
response.responseText; //可由后台获取JSON格式数据进行解析
}else{
}
}
});
★JSON格式数据的组装和读取
参考:Javascript解析由服务器返回的JSON格式数据
★CheckboxGroup的基本编写方法(checkbox的构造和拼接)
{boxLabel:'部门查看',name:'department-view',id:'department-view',inputValue:'department-view'}
★将字符串转换为Javascript语句的函数:eval()
★Ext.form.FormPanel的add()方法:添加组件
★Ext.form.FormPanel的doLayout()方法:重新计算容器的布局尺寸。当有新组件加入到已渲染容器或改变子组件的大小/位置之后,就需要执行此函数。
备用工具:
Javascript手册,ExtJS API文档
提示:
ExtJS中的CheckboxGroup(和RadioGroup)默认不能动态添加item。虽然它继承了Ext.form.Field,但是却类似于容器。
在CheckboxGroup构造是,它会将配置中的items等配置项处理生成一个对应的panel,该处理过程只有一次,所以很难对CheckboxGroup进行动态修改。
如果需要根据后台数据动态创建的话,最好试着创建整个CheckboxGroup,而不是动态添加item。
下面是一个根据后台数据动态创建CheckboxGroup的例子:
Ext.Ajax.request({
url: 'control/privilege/EmployeeManage-privilegeGroupSetUI.action?username='+ username,
callback: function(options,success,response){
if(success = true){
var obj = eval( "(" + response.responseText + ")" );
//拼接checkbox子项目
var checkboxitems="";
for(var i = 0;i<obj.groups.length;i++){
if(checkboxitems!="")
checkboxitems+=",";
else
checkboxitems+="[";
var groupid = obj.groups[i].groupid;
// alert(obj.groups[i].name);
var checkboxSingleItem = "{boxLabel:'"+obj.groups[i].groupname+"',name:'"+obj.groups[i].groupname+"',id:'"+obj.groups[i].groupid+"',inputValue:'"+obj.groups[i].groupid+"'";
var usergroup=obj.usergroups;
for(var j=0;j<usergroup.length;j++){
// alert();
if(usergroup[j].groupid == groupid){
checkboxSingleItem += ",checked:'true'";
}
}
checkboxSingleItem+="}";
// alert(checkboxSingleItem);
checkboxitems+=checkboxSingleItem;
}
checkboxitems+="]";
// alert(checkboxitems);
var itemsGroup = new Ext.form.CheckboxGroup({
fieldLabel: '选择权限',
name:'user_add_checkboxgroup',
width:380,
id:'user_add_checkboxgroup',
columns: 1,
name:'items',
width:360,
columns:1,
items:eval(checkboxitems)
});
addFormPanel.add(itemsGroup);
addFormPanel.doLayout();
} else {
Ext.MessageBox.alert('信息提示',"加载权限失败");
}
}
});
分享到:
相关推荐
本教程将深入探讨如何在ExtJS中实现图片的批量上传功能,以及与之相关的批量删除操作。 首先,批量上传图片的核心是利用HTML5的File API,它允许用户在不离开当前页面的情况下读取、处理和上传本地文件。在ExtJS中...
在开发过程中,有时需要根据数据库结构或者业务需求自动生成相应的ExtJS代码,以提高开发效率和代码一致性。下面将详细解释如何使用ExtJS进行代码自动生成,以及各组件类型的中文解释。 1. **数据库字段的映射** ...
EXTJS批量上传下载是EXTJS框架中实现的一种高级交互功能,允许用户一次性处理多个文件的上传和下载操作,极大地提高了工作效率。EXTJS是一款强大的JavaScript组件库,它提供了丰富的UI控件和灵活的数据绑定机制,...
extjs界面生成器extjs界面生成器extjs界面生成器extjs界面生成器extjs界面生成器
1. 生成功能导航:在Extjs中,我们可以使用Tree Panel组件来生成导航菜单。首先,需要拖拽一个Tree Panel到“west”占位符中,以便在主界面中显示导航菜单。 2. 建立“导航模型”:在Extjs中,我们需要建立一个模型...
ExtJs原生批量上传 + 实时进度 Ext.define('MyApp.ux.upload.UploadWindow', { extend: 'Ext.window.Window', height: 400, width: 700, title: '文件上传', closeAction: 'hide', maximizable: true, ...
EXTJS代码生成器是一款专为开发人员设计的工具,它能够自动生成基于EXTJS框架的MVC模式应用程序的代码,显著提升开发效率。EXTJS是一个强大的JavaScript库,用于构建富客户端Web应用,提供了丰富的组件库和强大的...
本文将深入探讨如何在ExtJS中动态生成Grid,这是一个非常实用的功能,可以适应不断变化的数据需求和用户交互。我们首先从标题"ExtJs动态grid的生成"开始,了解动态生成Grid的基本概念和实现方法。 动态生成Grid意味...
在本文中,我们将深入探讨如何使用ExtJS框架在前端动态生成表格,并结合后端数据进行展示。ExtJS是一个强大的JavaScript库,专用于构建富客户端Web应用程序,尤其在创建交互式用户界面方面表现突出。动态生成表格是...
Extjs动态Grid的生成 htm
extjs点击右侧面板生成tab,面板是ul+li的
在本文中,我们将深入探讨如何使用ExtJs3.0结合SWFUpload实现批量文件上传,并在上传过程中实时显示进度。这个技术方案适用于那些需要在Web应用程序中处理大量文件上传的场景,例如用户需要一次性上传多张图片或者...
很好的ext页面布局自动生成功能,快速布局,减少你页面开发时间!用法:解压->添加文件夹到一个web工程当中->进入index.html进入页面编辑就可以自由设计你的布局了,代码在查看/修改中可以看到,只需复制粘贴到自己...
在"ExtJS编写的批量上传(Java实现)"这个项目中,我们主要关注的是使用ExtJS进行文件上传,并结合Java后端实现这一功能。 批量上传功能是许多Web应用中的常见需求,它允许用户一次性选择并上传多个文件,提高用户...
在 ExtJS 4.2 中实现动态生成 Toolbar,以满足 gridPanel 中动态生成带按钮及查询条件的工具栏的需求。本文将详细介绍如何实现动态生成 Toolbar,包括视图层、 Toolbar.js 和后台调用创建工具栏的方法。 视图层 在...
在本文中,我们将深入探讨如何使用ExtJs框架实现图片的批量显示、上传和删除功能。ExtJs是一款强大的JavaScript库,专用于构建富客户端应用程序,它提供了丰富的组件和强大的数据管理能力,非常适合处理图像操作。 ...
extjs动态生成model、store、panel;sql拼接等多种技术难点
### Extjs生成主界面 #### 一、简介 在现代Web开发中,用户界面的设计与实现至关重要。Extjs是一款强大的JavaScript框架,它提供了丰富的UI组件和工具,可以帮助开发者快速构建高性能的企业级Web应用。本文将详细...
在EXTJS中,实现批量上传文件是一项常见的需求,尤其在处理大量数据或媒体文件时。EXTJS的文件上传组件提供了方便的方式来处理这些任务,允许用户一次性选择多个文件进行上传,极大地提高了工作效率。 批量上传文件...
升级了,大家不要下载这个了,下载我的资源里的的(MVC+Extjs架构WebMis自动生成) 只要你配置了数据库,配置了表,配置了功能菜单,每个菜单对应一个表,就能生产一个基本的系统, 基本系统:能对你的表进行CRUD,...