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

ExtJs fieldset区域中,动态添加多个块集合

 
阅读更多

 var formPssq = new Beidasoft.Bap.FormPanel({
  title: '线下评审',
  renderTo: 'main',
  submitServiceUrl: 'pingshenService/saveBelowlinePsjl/',
  labelWidth : 120,
  frame: true,
  border: false,
  baseCls: 'x-panel',
  autoWidth : true,
  // autoHeight: true,
  fileUpload : true,
  autoScroll : true,
  defaultType : 'textfield',
  plugins: [new Ext.ux.plugins.FitToParent()],
  items: [ {
   xtype : 'panel',
   layout : 'column',
   labelWidth : 80,
   id : 'gzcp',
   anchor : '96%',
   border : false,
   frame : true,
   items : [ {
    columnWidth : .95,
    xtype : 'panel',
    layout : 'form',
    items : [ fieldSet = new Ext.form.FieldSet({
     title : '评审产品',
     fieldLabel : '',
     id : 'addTaskReportFieldSetID',
     autoHeight : true,
     defaultType : 'textfield',
     anchor : '100%',
     defaultType : 'displayfield',
     // autoScroll : true,
     labelWidth : 60
    }) ]
   }, addFileButton = new Ext.Button({
    text : '添加',
    id : 'semip_storage_btn',
    iconCls : 'page_add',
    handler : addFile
   }) ]
  },
  {
   xtype : 'panel',
   layout : 'form',
   defaultType : 'textfield',
   items : [ repFileNumber = new Ext.form.Field({
    inputType : 'hidden',
    name : 'repFileNumber',
    value : 0
   }), repFileDelete = new Ext.form.Field({
    inputType : 'hidden',
    name : 'repFileDelete'
   }) ]
  }]
  
 })

// 添加fieldset区域的方法
function addFile() {
 // 如果没有PDM,则隐藏单选框的那一行
 var number = repFileNumber.getValue();
 var fileName = 'file_' + number;
 // fileNames += fileName + ','; // 到时候隐藏时用的
 repFileNumber.setValue(parseInt(number) + 1);
 var lText = '<a href="#" onclick="deleteInputAddEdit(\'' + fileName
   + '\')">删除</a>&nbsp;&nbsp;';
 fieldSet.add(new Ext.form.FieldSet({
  title: lText,
  id : fileName,
  frame : true,
//  bodyStyle : 'padding:5px 5px 0',
  items : [ {
   layout : 'column',
   xtype : 'panel',
   anchor: '92%',
   items : [ {
    columnWidth : .5,
    layout : 'form',
    items : [ {
     xtype : 'filefield',
     id : fileName + 'pscp',
     nameValue : 'pscp' + number,
     fieldLabel : '评审产品<font color=\'red\'>*</font>',
     allowBlank:false,
     anchor : '95%'
    }]
   } ,
   {
    columnWidth : .5,
    layout : 'form',
    items : [{
     xtype : 'combo',
     id : fileName + 'psjcd',
     hiddenName : 'psjcd' + number,
     fieldLabel : '评审检查单',
     store : jcdStore,
     mode : 'local',
     editable : false,
     allowBlank:false,
     valueField : 'id',
     displayField : 'text',
     triggerAction : 'all',
     anchor:'95%'
    }]
   }]
  },
  {
  xtype: 'panel',
  layout: 'column',
  anchor: '92%',
  items: [{
   columnWidth: .5, 
   layout: 'form',
   items: [{
    xtype: 'numberfield',
    fieldLabel: '评审产品规模',
    allowDecimals : false, // 不允许小数
          allowNegative : false, // 不允许负数
          allowBlank:false,
    id: fileName+'pscpgm',
    name: 'pscpgm' + number,
    anchor: '95%'
   }]
  },
  {
   columnWidth: .5,
   layout: 'form',
   items: [{
    xtype : 'combo',
    id: fileName+'gmlx',
    hiddenName : 'gmlx' + number,
    fieldLabel : '规模类型',
    store : gmlxStore,
    mode : 'local',
    editable : false,
    allowBlank:false,
    valueField : 'id',
    displayField : 'text',
    value: '01',
    triggerAction : 'all',
    anchor:'95%'
   }]
  }]
 }]
 }));
 
 fieldSet.doLayout();
}

分享到:
评论

相关推荐

    Extjs fieldset两行两列布局

    在Extjs框架中,`FieldSet`是一种常见的组件,常用于组织一组相关的表单字段,并通过一个标题来标识这组字段的主题。本文将详细介绍如何使用Extjs实现一个两行两列布局的`FieldSet`。 #### 一、整体结构设计 首先...

    ExtJs 动态添加表单

    在"动态添加表单"这个主题中,我们将深入探讨如何在ExtJS中实现表单的动态创建和管理。 首先,我们要理解表单(Form)在ExtJS中的基本概念。表单是数据输入和验证的核心组件,可以包含各种字段类型,如文本框、下拉...

    ExtJs的resultGrids中动态添加按钮

    本文将深入探讨如何在ExtJS的`resultGrids`中动态添加按钮,并结合`SuserInfoRes_js.jsp`文件名称推测可能的实现方法。 动态添加按钮在很多情况下非常有用,比如在表格数据加载后根据特定条件显示或隐藏操作按钮,...

    ExtJs动态grid的生成

    本文将深入探讨如何在ExtJS中动态生成Grid,这是一个非常实用的功能,可以适应不断变化的数据需求和用户交互。我们首先从标题"ExtJs动态grid的生成"开始,了解动态生成Grid的基本概念和实现方法。 动态生成Grid意味...

    ExtJS经典皮肤集合

    此外,ExtJS还支持动态皮肤切换,用户可以在运行时根据自己的喜好更改界面风格,这需要在代码中实现皮肤切换逻辑。 总的来说,ExtJS经典皮肤集合是开发高质量、美观的Web应用的重要资源,它使得开发者无需从零开始...

    extjs动态生成表格,前台+后台

    动态生成表格是ExtJS中的一个重要功能,它允许开发者根据需求灵活地构造表格结构和数据。 首先,我们需要了解ExtJS中的核心组件之一——GridPanel。GridPanel是一个显示二维数据的组件,通常用于展示大量结构化的...

    extjs动态添加tabpanel标签页支持pannel嵌入

    extjs动态添加tabpanel标签页支持pannel嵌入 逻辑代码在 MyWindow.js里面直接调用 方法 就可以

    extjs 实现动态表头

    动态表头是ExtJS中一个高级特性,它允许开发者根据需要在运行时动态地创建和修改表格的列结构。这在处理数据展示和操作时具有很大的灵活性,尤其在数据字段不确定或需要自定义的情况下非常实用。 标题“extjs 实现...

    extjs4动态添加表头

    extjs4动态添加表头字段、删除、增加记录!

    EXTJS 多文件上传

    在EXTJS中,`MultiFileUploadField` 是一个组件,它允许用户在单个操作中选择并上传多个文件,极大地提升了用户交互体验。这个功能对于处理大量文件上传的场景非常有用,比如在内容管理系统、图像库或者文件分享平台...

    Extjs折叠布局中添加树

    通过这个示例,我们可以了解到如何在ExtJS的折叠布局中集成树形结构,以及如何从服务器动态加载数据来构建这个树。这在实现具有层次结构的导航菜单或信息分类时非常有用。同时,我们也学习到了如何创建和配置不同的...

    ExtJS的FieldSet的column列布局

    ExtJS的FieldSet的column列布局,需要的朋友可以参考下。

    Extjs动态加载菜单

    动态加载菜单是ExtJS中的一个关键特性,它允许在用户交互过程中动态地创建、修改和加载菜单项,提供了更灵活的用户界面设计。在“Extjs动态加载菜单”这个主题中,我们将深入探讨这一功能的实现方式以及相关技术。 ...

    extjs4.2 动态生成toolbar

    在 ExtJS 4.2 中实现动态生成 Toolbar,以满足 gridPanel 中动态生成带按钮及查询条件的工具栏的需求。本文将详细介绍如何实现动态生成 Toolbar,包括视图层、 Toolbar.js 和后台调用创建工具栏的方法。 视图层 在...

    Extjs动态Grid的生成 htm

    Extjs动态Grid的生成 htm

    extjs实现动态树

    Accordion布局是ExtJS中的布局类型之一,允许在一个容器内多列垂直堆叠,每次只有一个面板展开。在动态树中,可以将树节点与Accordion布局关联,当点击节点时,对应的Accordion面板展开显示详细信息。 六、优化与...

    extjs动态添加控件

    可以动态的新增和删除Ext控件,这里支持的上传控件的新增和删除。

    extjs 动态表格完整版

    动态表格是ExtJS中的一个重要组件,它允许用户以灵活的方式展示和操作数据。在这个“ExtJS 动态表格完整版”中,我们可以期待学习到关于如何创建、配置和定制动态表格的深入知识。 首先,动态表格的核心组件是`Ext....

    ExtJs常用案例集合

    精心整理的EXTJS常用例子集...是学习EXTJS不可多得的好资料,欲下载,则从速喔!!!

    extjs加水印

    "extjs加水印"这一主题涉及到如何在EXTJS框架构建的系统中添加水印功能,以增强数据的安全性,防止敏感信息非法传播。EXTJS是一个强大的JavaScript库,用于构建富客户端的Web应用程序,而水印则是一种有效的方法,...

Global site tag (gtag.js) - Google Analytics