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

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. java获得url里面所带参数的值

    url: http://localhost:8080/test/list?p=1&d=2014 要获得所带参数p和d的值,方法如下: int p = Integer.parseInt(requ ...

  2. [CentOS 0010] CentOS 配置mysql允许远程登录

    Mysql为了安全性,在默认情况下用户只允许在本地登录,可是在有此情况下,还是需要使用用户进行远程连接,因此为了使其可以远程需要进行如下操作: 一.允许root用户在任何地方进行远程登录,并具有所有库 ...

  3. php设计模式之单例模式

    单例模式顾名思义,就是只有一个实例.作为对象的创建模式, 单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例. 单例模式的要点有三个: 一是某个类只能有一个实例: 二是它必须自行 ...

  4. My97DatePicker 与 某个CSS冲突 ,导致无法显示

    调试 Metronic3.7 模版  ,boostrap的时间插件不怎么好用,改用My97DatePicker, 发现某个与plugins.css中某个插件冲突,经排查发现 css 中有这一段 ifr ...

  5. bzoj4306: 玩具厂

    Description 在JIH考察的地图中有N个城市,被公路依次连成了一个环,JIH想在这些城市中建一个玩具厂.城市和公路都被编号为1..N,i号公路连接i-1号城市与i号城市(1号公路连接N号城市 ...

  6. Azure IoT

    微软Azure IoT   国外物联网平台初探(二)——微软Azure IoT 马智 平台定位 连接设备.其它 M2M 资产和人员,以便在业务和操作中更好地利用数据. 连接 IoT 设备 将所有设备连 ...

  7. 杂谈之SolrCloud这个坑货

    杂谈之SolrCloud这个坑货 看<Solr In Action>时候看到对Solr不足的介绍有这么一段话:“One final limitation of Solr worth men ...

  8. 【性能测试】【Jmeter】学习(1)

    2013/8/6开始阅读Jmeter文档 2013/8/7总结 监听器——CSV Data Set Config 在Jmeter中添加一个CSV配置原件 CSV配置原件添加方法:(右键点击某一个操作步 ...

  9. bzoj 1056 [HAOI2008]排名系统(1862 [Zjoi2006]GameZ游戏排名系统)

    1056: [HAOI2008]排名系统 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1854  Solved: 502[Submit][Statu ...

  10. poj 2246 (zoj 1094)

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=1094 ZOJ Problem Set - 1094 Matrix Chai ...