`

ext 编辑form 多文件上传 显示图片

    博客分类:
  • ext
ext 
阅读更多
  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到后台?

  • 大小: 48.7 KB
0
3
分享到:
评论

相关推荐

    Ext Htmleditor 支持上传图片

    Ext HTMLEditor是一款基于Ext JS库的富文本编辑器组件,它允许用户在网页上进行类似于Word的文本编辑操作,包括格式化、插入链接、图片等。本文将深入讲解如何利用Ext HTMLEditor实现图片上传功能,以及相关知识点。...

    带插图功能的ext html编辑器

    在使用"带插图功能的EXT编辑器"时,需要注意兼容性问题,确保它与EXT的版本兼容,并且在不同的浏览器环境中表现稳定。同时,后端的文件存储和处理策略也需谨慎设计,以确保安全性和性能。 总之,"带插图功能的EXT ...

    ext + json HTML编辑器中上传图片

    1. **EXT组件**:EXT提供了一个叫做`Ext.form.FileField`(或`Ext.form.field.File`)的组件,它允许用户选择本地文件进行上传。这个组件通常与一个按钮结合使用,当点击按钮时,会打开文件选择对话框。 2. **AJAX...

    EXT上传附件

    为了使上传过程更友好,你还可以添加进度条显示、错误处理和多文件上传支持等功能。EXT提供了ProgressBar组件来展示上传进度,同时,你可能需要对Ajax请求进行错误处理,以确保用户体验流畅。 总结来说,EXT上传...

    Extjs的HtmlEidtor富文本编辑器的使用和图片上传显示的实现

    例如,对于图片上传,可能使用了像Plupload这样的文件上传库,它提供了多浏览器兼容性、断点续传等功能。同时,文章可能还会介绍如何将HtmlEditor与后端服务(如PHP、Java或Node.js)集成,实现文件的接收和存储。 ...

    Extjs upload(ext官网例子)

    在"Extjs upload(ext官网例子)"中,我们主要探讨的是如何在ExtJS中实现文件上传的功能,这是一个常见的需求,特别是在构建Web应用时,如表单提交、文件分享或在线编辑等场景。 首先,我们要理解ExtJS中的Upload...

    Extjs4后台框架、多文件上传

    ExtJS4是一个强大的JavaScript...综上所述,“Extjs4后台框架、多文件上传”项目涵盖了前端开发、后端处理、文件上传逻辑、用户体验设计等多个方面,是一个完整的Web应用解决方案,旨在简化并优化批量文件上传的过程。

    EXT扩展Htmleditor,在工具栏中添加插入图片按钮,可选择图片插入到编辑器中(也可添加其他功能按钮)

    这个文件中通常会定义一个新的EXT插件,这个插件会在Htmleditor的工具栏上创建一个按钮,点击该按钮时,用户可以选择本地图片并将其插入到编辑器内容中。具体实现步骤可能包括以下几步: 1. 定义插件:首先,你需要...

    Ext组件描述,各个组件含义

    - **主要用途**:指示后台操作的完成状态,如文件上传或下载过程。 **2.10 Split Button (Ext.SplitButton)** - **xtype**: `splitbutton` - **功能描述**:Split Button 是一个组合按钮,主要由一个主按钮和一个...

    ExtJS4.0下的文件上传方式代码filesupload

    8. **反馈结果**:当文件上传成功后,可以在界面上显示上传成功的消息,或者更新相关数据显示新上传的文件信息。如果上传失败,同样需要明确的错误提示。 以上就是使用ExtJS 4.0实现文件上传的一些关键点。通过合理...

    EXTJS_.7z文件上传

    6. **EXTJS4文件上传**:EXTJS4版本的文件上传功能与EXTJS3相比有改进,可能涉及到使用`Ext.form.field.File`组件和`Ext.form.action.Upload`动作,以及调整上传参数和配置。 7. **Struts2获取request三种方法**:...

    Ext 开发指南 学习资料

    4.9. 还要做文件上传哟 4.10. 非想非想,单选框多选框 4.10.1. 多选呢checkbox 4.10.2. 单选呢radio 4.11. 自动把数据填充到form里 5. 雀跃吧!超脱了一切的弹出窗口。 5.1. 呵呵~跳出来和缩回去总给人惊艳的感觉。 ...

    ext 资料 花了我好多分啊

    EXT JS提供了多种上传组件,如`Ext.form.FileField`(旧版)或`Ext.form.field.File`(新版),用于在Web应用中实现文件上传功能。这些组件通常与后端服务器进行交互,处理文件的上传、验证和管理。通过这个Demo,...

    在Ext中集成KindEditor4.0正式版

    3. **配置KindEditor**:KindEditor有许多可配置的选项,如语言设置、工具栏按钮、图片上传、文件管理等。这些可以通过在组件构造函数中传递配置对象来实现。例如,可以设置`langType`为`'zh-CN'`以使用中文版本,...

    Ext Js权威指南(.zip.001

    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 ...

    ExtJSWeb应用程序开发指南(第2版)

    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模式的...

    chapter16_java文件上传下载_

    在Java编程中,文件上传和下载是Web应用中常见的功能,尤其在开发涉及用户交互的系统时,如网盘、论坛或在线文档编辑平台。本章("chapter16_java文件上传下载_")将深入探讨如何使用Java实现这些功能。 首先,让...

    完整的Extjs4 htmleditor上传图片插件(包括实例和用法)

    处理过程可能包括验证文件类型、大小,然后将图片保存到服务器的特定目录,并返回一个表示图片URL的响应,这个URL会被前端用来在编辑器中插入图片。 `实例及用法.txt`文件很可能包含了详细的步骤,指导开发者如何...

    Ext学习必备,涵盖大量实例,插件,其他有用组件

    这个包是在之前包的基础上多加了很多功能。 原来的内容: 1ext2.2源码及例子 2深入浅出extJs例子 ...2新增dhtmlx上传文件 3新增EXT异步加载树 4动态修改树节点图标和提示层 5ext结合mxGraph作出流程图编辑器

    web 上传直接可用code

    2. **SmartUpload库**:这是一个第三方库,用于处理文件上传过程中的各种操作,如设置允许的文件类型、上传文件等。 3. **JSP (JavaServer Pages)**:前端页面使用JSP技术编写。 #### 三、代码解析 ##### 1. 文件...

Global site tag (gtag.js) - Google Analytics