var storeAttach = Ext.create('Ext.data.Store', { autoLoad: false, model: 'Tgoodsimage', proxy: { type: 'ajax', url: '<%=basePath%>goods/goods!goodsAttach.do', reader: { type: 'json', root: 'dataList' } }, listeners: { load: function (store, options) { var fieldset = { // Fieldset in Column 1 - collapsible via toggle button xtype:'fieldset', columnWidth: 0.5, title: '附属图片', collapsible: true, defaultType: 'textfield', defaults: {anchor: '100%'}, layout: 'anchor', // items :[field ] items :[ ] // items :[field, { // fieldLabel : "预览图片", // xtype: 'box', //或者xtype: 'component', // autoEl: { // width: 300, //图片宽度 // tag: 'img', //指定为img标签 <%-- src: '<%=basePath%>upload'+record.get('filePath') //指定url路径 --%> // } // } ] } if(store.getCount()>0){ for(var i=0;i<store.getCount();i++){ var record = store.getAt(i); var field= { margin:'10px', xtype: 'fieldcontainer', layout: { type: 'hbox' }, fieldDefaults: { labelAlign: 'right', labelWidth: 90, width: 290 }, //items: [inventoryField ] items: [ { }, { xtype: 'filefield', // name: 'attach['+i+']', name: 'attach', fieldLabel: '图片', allowBlank: ((action == 'update') ? true : false), anchor: '100%', buttonText: '选择图片', emptyText: '--请选择图片--', value:record.get('filePath') },{ xtype : 'button', text : '删除', iconCls : 'silk_page_add', handler : function(button ) { Ext.Ajax.request({ url: '<%=basePath%>goods/goods!delAttach.do', method: 'post', async: true, params: { attachId: record.get('id') }, success: function(response){ var result = Ext.decode(response.responseText); if(result.success){ alert(result.msg); button .up('fieldset').remove(button.up('fieldcontainer')); }else{ alert(result.msg); } } }); } },{ xtype:'panel', height:60, // margin-left: 100, html:'<img style=" width: 100;" src="<%=basePath%>upload'+record.get('filePath')+'"/>' } ] }; fieldset.items.push(field); imgCount++; // console.log(field); // field.down('[name^=attach]').setValue(record.get('filePath')); } var _form = formPanel; _form.add(fieldset); } // var type = store.getAt(0).data['data.type']; // cboType.setValue(storeType.getAt(type-1)); } } });
待完善:修改附属图片时候,会全部删除附属图片。原因就是,无法在修改图片的时候,传相应的ID到后台,从而不知道是修改的哪张图片。
怎么才能传ID到后台?
相关推荐
Ext HTMLEditor是一款基于Ext JS库的富文本编辑器组件,它允许用户在网页上进行类似于Word的文本编辑操作,包括格式化、插入链接、图片等。本文将深入讲解如何利用Ext HTMLEditor实现图片上传功能,以及相关知识点。...
在使用"带插图功能的EXT编辑器"时,需要注意兼容性问题,确保它与EXT的版本兼容,并且在不同的浏览器环境中表现稳定。同时,后端的文件存储和处理策略也需谨慎设计,以确保安全性和性能。 总之,"带插图功能的EXT ...
1. **EXT组件**:EXT提供了一个叫做`Ext.form.FileField`(或`Ext.form.field.File`)的组件,它允许用户选择本地文件进行上传。这个组件通常与一个按钮结合使用,当点击按钮时,会打开文件选择对话框。 2. **AJAX...
为了使上传过程更友好,你还可以添加进度条显示、错误处理和多文件上传支持等功能。EXT提供了ProgressBar组件来展示上传进度,同时,你可能需要对Ajax请求进行错误处理,以确保用户体验流畅。 总结来说,EXT上传...
例如,对于图片上传,可能使用了像Plupload这样的文件上传库,它提供了多浏览器兼容性、断点续传等功能。同时,文章可能还会介绍如何将HtmlEditor与后端服务(如PHP、Java或Node.js)集成,实现文件的接收和存储。 ...
在"Extjs upload(ext官网例子)"中,我们主要探讨的是如何在ExtJS中实现文件上传的功能,这是一个常见的需求,特别是在构建Web应用时,如表单提交、文件分享或在线编辑等场景。 首先,我们要理解ExtJS中的Upload...
ExtJS4是一个强大的JavaScript...综上所述,“Extjs4后台框架、多文件上传”项目涵盖了前端开发、后端处理、文件上传逻辑、用户体验设计等多个方面,是一个完整的Web应用解决方案,旨在简化并优化批量文件上传的过程。
这个文件中通常会定义一个新的EXT插件,这个插件会在Htmleditor的工具栏上创建一个按钮,点击该按钮时,用户可以选择本地图片并将其插入到编辑器内容中。具体实现步骤可能包括以下几步: 1. 定义插件:首先,你需要...
- **主要用途**:指示后台操作的完成状态,如文件上传或下载过程。 **2.10 Split Button (Ext.SplitButton)** - **xtype**: `splitbutton` - **功能描述**:Split Button 是一个组合按钮,主要由一个主按钮和一个...
8. **反馈结果**:当文件上传成功后,可以在界面上显示上传成功的消息,或者更新相关数据显示新上传的文件信息。如果上传失败,同样需要明确的错误提示。 以上就是使用ExtJS 4.0实现文件上传的一些关键点。通过合理...
6. **EXTJS4文件上传**:EXTJS4版本的文件上传功能与EXTJS3相比有改进,可能涉及到使用`Ext.form.field.File`组件和`Ext.form.action.Upload`动作,以及调整上传参数和配置。 7. **Struts2获取request三种方法**:...
4.9. 还要做文件上传哟 4.10. 非想非想,单选框多选框 4.10.1. 多选呢checkbox 4.10.2. 单选呢radio 4.11. 自动把数据填充到form里 5. 雀跃吧!超脱了一切的弹出窗口。 5.1. 呵呵~跳出来和缩回去总给人惊艳的感觉。 ...
EXT JS提供了多种上传组件,如`Ext.form.FileField`(旧版)或`Ext.form.field.File`(新版),用于在Web应用中实现文件上传功能。这些组件通常与后端服务器进行交互,处理文件的上传、验证和管理。通过这个Demo,...
3. **配置KindEditor**:KindEditor有许多可配置的选项,如语言设置、工具栏按钮、图片上传、文件管理等。这些可以通过在组件构造函数中传递配置对象来实现。例如,可以设置`langType`为`'zh-CN'`以使用中文版本,...
Ex4.0共2个压缩包特性,《ext js权威指南》 前 言 第1章 ext js 4开发入门 / 1 1.1 学习ext js必需的基础知识 / 1 1.2 json概述 / 3 1.2.1 认识json / 3 1.2.2 json的结构 / 3 1.2.3 json的例子 / 4 1.2.4 ...
4.1.21 Ext.form.field.File文件上传字段 4.2 实现表单验证 4.2.1 常见的验证类型 4.2.2 表单验证(VType) 4.2.3 自定义VType验证 4.3 表单的提交和加载 4.3.1 Ext.form.action.Action基础 4.3.2 Ajax模式的...
在Java编程中,文件上传和下载是Web应用中常见的功能,尤其在开发涉及用户交互的系统时,如网盘、论坛或在线文档编辑平台。本章("chapter16_java文件上传下载_")将深入探讨如何使用Java实现这些功能。 首先,让...
处理过程可能包括验证文件类型、大小,然后将图片保存到服务器的特定目录,并返回一个表示图片URL的响应,这个URL会被前端用来在编辑器中插入图片。 `实例及用法.txt`文件很可能包含了详细的步骤,指导开发者如何...
这个包是在之前包的基础上多加了很多功能。 原来的内容: 1ext2.2源码及例子 2深入浅出extJs例子 ...2新增dhtmlx上传文件 3新增EXT异步加载树 4动态修改树节点图标和提示层 5ext结合mxGraph作出流程图编辑器
2. **SmartUpload库**:这是一个第三方库,用于处理文件上传过程中的各种操作,如设置允许的文件类型、上传文件等。 3. **JSP (JavaServer Pages)**:前端页面使用JSP技术编写。 #### 三、代码解析 ##### 1. 文件...