现在是这么个问题,在开发中表格是动态出来的,就是标准板是全部字段列出,客户要根据情况列出自己想要的,在增加操作页面的同时要是能用前台自带的功能直接保存到后台就好了,现在的列显示和隐藏是不回发的。

1.FineUI引用的extjs是ext-part1.js,这就不说了,以前截过图,这个文件是压缩的,参数也是简化的不好看,其实这个就是ext-all.js,ext-all哪来的呢,就是extjs官方实例里下的,下来之后也是压缩的,旁边还有个不压缩的,ext-all-debug.js ,完全可以看,那我直接看它就等于看ext-part1.js了,下面我要找到生成grid表头的类,搜Ext.grid.一个一个找看到有Ext.grid.header,header就是头的意思,再在这里找,找到getColumnMenu,恩,字面意思就能看出得到列菜单,怎么确定呢,看到个属性是checkHandler 选择的意思,就是选择事件,触发的是onColumnCheckChange,
  1. onColumnCheckChange:function(checkItem, checked){
    var header =Ext.getCmp(checkItem.headerId);
    header[checked ?'show':'hide']();
    },

      

看到show,hide ,显示和隐藏的意思。进一步测试,找到ext-part1.js下onColumnCheckChange,改了它,加个alert('1'),保存,刷新,当我勾选列隐藏和显示时弹出1,触发成功,就是改它。
2.位置找到了就是改,直接改ext-part1.js?那ext-part2就失去意义了,ext-part2是干嘛的,FineUI自己重写替换了好多方法,也新增了好多方法方便交互或修补bug,我直接找到了Ext.grid.Panel,就照着这个重写就行,看到
  1. if(Ext.grid.Panel){
    Ext.override(Ext.grid.Panel,{

      

分析下,如果是Ext.grid.Panel就是引用的是Ext.grid.Panel类,override搜了下API就是覆盖重写的意思,那好,直接重写onColumnCheckChange,onColumnCheckChange上面的列是Ext.grid.header.Container,那么在Ext.gird.Panel上面写:
  1. if(Ext.grid.header.Container){
    Ext.override(Ext.grid.header.Container,{
    onColumnCheckChange:function(checkItem, checked){
    var header =Ext.getCmp(checkItem.headerId);
    header[checked ?'show':'hide']();
    F.customEvent("触发后台操作");
    }
    });
    }

      

又用到customEvent,咋用就不写了功能是Alert.Show(),编译,保存,刷新,成功触发后台方法。
3.干触发了没参数我保存啥,看见接受了两个参数,checkItem和checkd,意思是项和选择状态,checkItem可定就是选择的项,他都有什么属性呢,还是找到ext-all-debug.js下这个方法,
  1. for(; i < itemsLn; i++){
    item = items[i];
    menuItem =newExt.menu.CheckItem({
    text: item.text,
    checked:!item.hidden,
    hideOnClick:false,
    headerId: item.id,
    menu: item.isGroupHeader ?this.getColumnMenu(item):undefined,
    checkHandler:this.onColumnCheckChange,
    scope:this
    });

      

首先循环项,就是循环的列头总数,一个一个来,创建一个菜单选择元素,然后就是属性,那checkItem的属性就是menuItem的属性,那么有
  1. if(Ext.grid.header.Container){
    Ext.override(Ext.grid.header.Container,{
    onColumnCheckChange:function(checkItem, checked){
    var header =Ext.getCmp(checkItem.headerId);
    header[checked ?'show':'hide']();
    F.customEvent("触发后台操作保存该列隐藏显示状态,列名:"+checkItem.text+" 列ID :"+checkItem.headerId+" 选择状态:"+checked+";gridID:"+this.grid.id);
    }
    });
    }

      

 
在试试,触发后台方法,输出结果为预期。
 
更改了ext-part2.js就要保存好,如果项目里用了,升级的时候覆盖掉就没有了,另外还要介绍自己修改和添加FineUI控件的属性,好像以前提到过在ASP.NET-FineUI开发实践-6(三) 7 里,处理了TriggerBox的回车触发,怎么找到的就是转到定义找到FineUI项目的文件再搜索就可以了,用到的不是特别多,可以结合ext-part2.js再次做一些改进,就不细谈了。

 

ASP.NET-FineUI开发实践-9(四)的更多相关文章

  1. FineUI开源版(ASP.Net)开发实践-目录

    点我订阅 目前所有博客的截图,方便离线观看,点图片 FineUI初学手册 下载,实例项目搭建 FineUI初学手册-部分JS整理 部分JS整理 ASP.NET-FineUI开发实践-1 实际开发环境是 ...

  2. FineUI开发实践-目录

    点我订阅 目前所有博客的截图,方便离线观看,点图片 FineUI初学手册 下载,实例项目搭建 FineUI初学手册-部分JS整理 部分JS整理 ASP.NET-FineUI开发实践-1 实际开发环境是 ...

  3. Xamarin.Android开发实践(四)

    原文:Xamarin.Android开发实践(四) Xamarin.Android下获取与解析JSON 一.新建项目 1.新建一个Android项目,并命名为为NetJsonList 2.右击引用,选 ...

  4. Git工程开发实践(四)——Git分支管理策略

    A successful Git branching model https://nvie.com/posts/a-successful-git-branching-model/ Git工程开发实践( ...

  5. FineUI开发实践

    ASP.NET-FineUI开发实践-7 摘要: 下拉显示grid列表.其实很简单,但是试了很多方法,水平有限,主要是都不好使,还是简单的好使了,分享下.先是看了看网上的,是直接写个了extjs控件类 ...

  6. Angular开发实践(四):组件之间的交互

    在Angular应用开发中,组件可以说是随处可见的.本篇文章将介绍几种常见的组件通讯场景,也就是让两个或多个组件之间交互的方法. 根据数据的传递方向,分为父组件向子组件传递.子组件向父组件传递及通过服 ...

  7. ASP.NET MVC开发微信(四)

  8. Django博客开发实践,初学者开发经验

    python,Django初学者,开发简易博客,做了一下笔记,记录了开发的过程,功力浅薄,仅供初学者互相 交流,欢迎意见建议.具体链接:Django博客开发实践(一)--分析需求并创建项目 地址:ht ...

  9. ASP.NET MVC5 网站开发实践(二) Member区域–管理列表、回复及删除

    本来想接着上次把这篇写完的,没想到后来工作的一些事落下了,放假了赶紧补上. 目录: ASP.NET MVC5 网站开发实践 - 概述 ASP.NET MVC5 网站开发实践(一) - 项目框架 ASP ...

随机推荐

  1. 关于表单的jQuery练习

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  2. 仿猪八戒一个提示(jQuery插件) v0.1 beta

    先看下效果 js jQuery.extend({ prompt: function (text, type, times) { var prompt = $(['<div class=" ...

  3. 正则如何匹配div下的所有<li>标签?

    <?php header('Content-Type:text/html;charset=utf-8'); $str = '<div class="c1s"> & ...

  4. 使用Intellij IDEA构建spark开发环境

    近期开始研究学习spark,开发环境有多种,由于习惯使用STS的maven项目,但是按照许多资料的方法尝试以后并没有成功,也可能是我环境问题:也可以是用scala中自带的eclipse,但是不太习惯, ...

  5. css阴影

    文字阴影:text-shadow:[颜色 x轴 y轴 模糊半径],[颜色 x轴 y轴 模糊半径]... 区域阴影:box-shadow:[颜色 x轴 y轴 模糊半径],[颜色 x轴 y轴 模糊半径]. ...

  6. 将 Objective-C 代码迁移到 Swift(Swift 2.0更新)-b

    本节内容包括: 为你的Objective-c代码做好迁移准备 (Preparing Your Objective-C Code for Migration) 迁移过程(The Migration Pr ...

  7. ASP.NET中Request.ApplicationPath、Request.FilePath、Request.Path、.Request.MapPath

    1.Request.ApplicationPath->当前应用的目录 2.Request.FilePath->对应于iis的虚拟目录   如 URL http://mockte.com/1 ...

  8. Python展开一个嵌套的序列

    摘自<Python Cookbook> 4.6 任务 序列中的子序列可能是序列,子序列的子项仍有可能是序列,以此类推,则序列嵌套可以达到任意的深度.需要循环遍历一个序列,将其所有的子序列展 ...

  9. ExtJs5_使用图标字体来美化按钮

    sencha 的例子中,有使用图标字体来美化按钮的例子,这个用起来又方便风格又统一,例如下图: 上面图标字体的使用方法也很简单,只要下载Font Awesome的css和图标文件,放到项目里就可以了. ...

  10. 《how to design programs》13章用list构造表

    使用cons构造一个包含多个元素的表十分麻烦,因此scheme提供了list操作,该操作接受任意量的值作为输入以创建一个表,下面是扩展的语法: <prm>=list 扩展的scheme值的 ...