[Ext JS 4] 实战之Grid, Tree Gird编辑Cell

前言本篇这里以稍微复杂一点的Tree Grid 来介绍. 在写编辑grid 之, 先来看一下 grid 的 selType 的配置. 先给一个简单的Tree grid 的例子: Ext.onReady(function(){ var treeStore = Ext.create('Ext.data.TreeStore', { fields: ['id','name','sex','age'], root:{ "children":[{id:'001',name:'shu',sex:'…

[Ext JS 4] 实战之Grid, Tree Gird 添加按钮列

引言贴一个grid 的例子先: 有这样一个需求: 1. 给 Grid(or Tree Grid)添加一列, 这一列显示是Button. 点击之后可以对这一行进行一些操作 2. 这一列每一行对应的按钮不尽相同, 根据每一行的数据不同,显示的按钮不同,对应的点击操作也不同. 解法针对以上需求1 , 很容易就可以解决. Ext JS 的Grid 有提供 Ext.grid.column.ActionView xtype: actioncolumn 这样的列. 只需要在grid panel 的co…

Ext JS treegrid 发生的在tree上增加itemclick 与在其它列上增加actioncolumn 发生事件冲突(event conflict)的解决办法

Ext JS treegrid 发生的在tree上增加itemclick 与在其它列上增加actioncolumn 发生事件冲突(event conflict)的解决办法最近在适用Ext JS4开发应用用的时候遇到了一个问题,前后考虑了很久并上网搜索了很多相关问题,都没有发现类似的问题的解决答案.今天早上过来上班的时候,突然想到了解决办法,现在拿出来给大家分享.虽然不是什么出众之比,但是希望在大家遇到这个类似的问题的时候有了参考. 问题描述:我做的一个应用类似于官方http://docs.se…

[Ext JS 4] 实战之带week(星期)的日期选择控件(三)

前言在 [Ext JS 4] 实战之带week(星期)的日期选择控件(二) 的最后,有提到一个解决方案. 不过这方案有一个条件 ==> “2. 每年的周数从(1-52), 如果超过52 周,算到下一年的第一周” 这个条件有一个漏洞就是: 像 2011 年, 全年53 周, 第 53周整周都是2011年的天数,所以算成2012年的第一周就不对了. 综合: 还是两套标准之间的换算还是会有一些问题. 既然这样就不去混合使用两套标准的方法. 对于每个星期一周日开始的标准来说, 可以有更简单的方法.…

[Ext JS 4] 实战之 Picker 和 Picker Field

前言所谓的picker , 就是弹出一个选择框,让你选择一些信息.比如选择日期, 选择颜色等: 选择的结果总是要放在一个地方的,Picker Field 就是用来放置选择结果的一个文本框. 在Ext js中综合起来使用的方式就是, 在 form 里添加一个picker 类型的 field, 这个field比较特殊的是有一个点击按钮, 点击之后可以弹出一个选择框, 在选择框里选中的值添入filed 中. Ext JS 中的Picker Ext JS 目前的版本有三种选择器 1. Date (E…

[Ext JS 4] 实战之带week(星期)的日期选择控件

前言 Ext JS 3 和 Ext JS 4中都有提供日期选择的组件(当然早期版本也有). 但是有一些日期选择的需求是要看到星期,就是日期中的哪一天是这一年的第几周. 遗憾的是Ext js 并没有提供这样的配置. (针对Ext js 4来说,理想的相法是在Ext.picker.Date有一个类似showWeek这样的配置项) 现有的解法到网络上去看看基于Ext js 的解法:有找到两个 http://enikao.net/extjs/weeknumber/weeknumber.html 和…

[Ext JS 4] 实战之多选下拉单 (带checkbox)

前言 Ext js 创建一个多选下拉单的方式很简单, 使用Ext.form.ComboBox, 设置 multiSelect 为true 就可以了. 但是如果要在每个下拉之前加上一个checkbox, 如何实现呢? ComboBox本身没有这样的配置, 有一个 “Ext.ux.form.MultiSelect” 这样一个扩展, 效果的话,是把选项全部显示出来. 没办法只能自己扩展一个这样的组件了. 界面实现要实现这样的显示,可以使用ComboBox 的listConfig 这个配置. 可以配置…

[Ext JS 4] 实战Chart 协调控制（单一的坐标，两个坐标）

前言…

24. [Ext JS 4] 实战之Load Mask(加载遮罩)的显示与隐藏

转自:https://blog.csdn.net/oscar999/article/details/27176791…

【LigerUI实战】Grid弹出编辑popup

最近为分公司的项目做外援,做起了全栈的活.被公司自研架构磨灭的几乎忘掉了其他技能,正好新项目决定重新搭个架构,与同事们讨论过后,决定Spring+MyBatis+SpringMVC+CXF+LigerUI.除了Spring比较熟悉外,其他的还是新接触,不过现在来看,MyBatis和SpringMVC还真是简单易学.不过我的前端知识很有限,干起活来还真是不顺手,所以决定把LigerUI中遇到的问题和解决方案整理整理. 闲言少叙(好像不少了☻)... 一.效果所选课程列是多选,这里…

Ext JS 6学习文档-第5章-表格组件(grid)

Ext JS 6学习文档-第5章-表格组件(grid) 使用 Grid 本章将探索 Ext JS 的高级组件 grid .还将使用它帮助读者建立一个功能齐全的公司目录.本章介绍下列几点主题: 基本的 grid 排序渲染器过滤分页单元格编辑行编辑分组分组 grid(pivot grid) 公司目录 —一个示例项目 grid 组件是 Ext JS 中最强大的一个组件.它有很多的选项和配置,能以任何你希望的形式来构建 grid. Ext JS 的 grid 组件提供完整的支持分页,排序,…

【翻译】Ext JS 6早期访问版本发布

早期访问版本是什么如何参与都包括什么 Sencha Ext JS 6 Sencha Pivot Grid Sencha Cmd 6 JetBrains IDE插件反馈原文:Announcing Ext JS 6 Early Access Release 在令人惊艳的SenchaCon 2015最后一周,我们非常兴奋,因为Ext JS 6早期访问版本要发布了.在Ext JS 6,可以使用单一的javascript框架来无缝的创建基于桌面.平板和智能手机的应用程序. 下载Ext JS 6早期…

[Ext JS 4]后台自动产生图档

前言 [Ext JS 4] 实战之将chart导出为png, jpg 格式的文件承接上一篇, 我们可以做到在Browser端打开一个Chart,并导出为png或是jpg 等格式的图档. 但实际的需求会更高级, 希望可以自动产生图档, 并发送email . 对报表的需求从主动获取到被动接受, 系统要做得更智能. 需要解决的技术问题: 如果在不打开浏览器或是模拟浏览器的状况下产生svg 的代码, 在使用上一篇的技术实现图档? 不打开Browser 获取 SVG 代码段 Ext JS 使用的是浏览器…

[Ext JS 4] Grid 实战之分页功能

前言分页功能的实现有两种途径: 一种是服务端分页方式, 也就是web客户端传递页码参数给服务端,服务端根据页面参数返回指定条数的数据.也就是要多少取多少.这种方式比较适合Grid 的数据量很大,需分批取. 另一种是客户端分页方式, 一次性从服务端取回所有的数据在客户端这边实现分页.这种自然适合数据量较少的状况,减少和服务端的交互, 对性能有一些帮助.这种方式还有一种好处就是对于初学Ext JS Grid 或分页功能比较简单和直观了. Ext 目前的官方文档中,对于客户端分页的方式介绍和实例不…

[Ext JS 4] 布局之实战一 - 中间区块不会自动伸展（tab）

前言 [Ext JS 4] 布局之实战一 - 中间区块不会自动伸展 (tab) 在上一篇中,中间的tab 区块无法自动伸展的原因一句话说就是: 使用contentEL的方式,相关HTML元素不会参与组件使用的布局方案. 但是在实际的开发过程中, 有时后这种方式可能无法避免, 或者说已经开发的代码,如何最简单的修正这个问题. 解决方法利用center 区块的resize 事件可以解决这个问题. 因为在左边收合时,会触发center 区块的resize. 贴代码: <html> <head…

【翻译】将Ext JS Grid转换为Excel表格

原文:Converting an Ext 5 Grid to Excel Spreadsheet 稍微迟来的礼物--Ext JS Grid转为Excel代码,现在支持Ext JS 5! 功能包括: - 支持分组 - 数字的处理 VS 字符串数据类型 - 对于不支持客户端下载的浏览器会提交回服务器 Enjoy! /* Excel.js - convert an ExtJS 5 grid into an Excel spreadsheet using nothing but javascript a…

新书《Ext JS 4.2 实战》终于出炉了

在清华大学出版社网站看到了书籍信息了,具体地址是:http://www.tup.tsinghua.edu.cn/book/Showbook.asp?CPBH=056140-01&DJ=51 预计3月底,最迟4月1日就有售了. 图书详细信息: ISBN:9787302353393 定价:51元印次:1-1 装帧:平装印刷日期:2014-2-26 内容简介: 本书是一本 Ext JS实战系列的书,主要通过简单的 CMS系统的开发过程,介绍了使用 Ext JS 4.2开发应用程序的新模式和新思路.…

《Ext JS 4.2 实战》可以买了

今天编辑告诉我,在网上可以买到这书了,购买链接是http://www.amazon.cn/Ext-JS-4-2%E5%AE%9E%E6%88%98-%E9%BB%84%E7%81%AF%E6%A1%A5/dp/B00J1YFJZM/ref=sr_1_1?ie=UTF8&qid=1395205737&sr=8-1&keywords=ext+js+4.2%E5%AE%9E%E6%88%98.…

新书《Ext JS 4.2实战》即将出版

目录: 第1章 Ext JS 4概述1.1 从Ext JS 4.0到4.071.2 从4.1到4.1.1a1.3 从4.2到4.2.11.4 如何选择版本1.5 基础知识1.5.1 Ext JS的一些专用术语1.5.2 一些常见的配置项1.5.3 类的命名规则1.6 关于调试1.7 小结第2章 Ext JS的MVC模式介绍2.1 概述2.1.1 MVC模式概述2.1.2 Ext JS的MVC模式2.2 …

Ext.js高级组件

第二章:Ext.js高级组件 grid组件普通方式表格面板类Ext.grid.Panel xtype(别名):gridpanel.grid title标题.renderTo渲染至.width宽.height高 frame : Boolean 是否填充渲染gridpanel forceFit : true 列是否自动填充 store : store 数据集 tbar: [] 头部工具栏 dockedItems : Object/Array 可定位的停靠工具条(上.下.左.右) selType…

EXT JS 4.3 在线学习

官网地址:http://docs.sencha.com/extjs/4.1.3/ 相关示例:http://docs.sencha.com/extjs/4.1.3/#!/example Examples Combination Examples Kitchen Sink (Webkit only) Showcase of Ext JS components using a preview release of the new Neptune theme Feed Viewer RSS feed…

Ext Js详解指南

什么是Ext JS 走进Ext的世界 Ext JS是一款富客户端开发框架它基于javascript.HTML和CSS开发而成,无需安装任何插件即可在常用浏览器中创建出绚丽的页面效果. 个人总结Ext JS的方法从Extjs的视图学起例如:窗体.表单.数等等.并且可以掌握调试工具和技巧学习使用API 学会怎么查询以及使用大牛提供的接口解决常见的问题(一般我们用到的效果,大牛们在做框架的时候都想到过) 把Extjs的前端可视化的组件与后台连接,进行交互我们在做各类系统的时候都要跟数据库打交道…

Ext JS 6学习文档–第1章–ExtJS入门指南

Ext JS 入门指南前言本来我是打算自己写一个系列的 ExtJS 6 学习笔记的,因为 ExtJS 6 目前的中文学习资料还很少.google 搜索资料时找到了一本国外牛人写的关于 ExtJS 6 的电子书 [Ext JS 6 By Example].这份资料在 PACKT 上卖 35.99 刀的,当然了万能的 google 还是帮我下载到了 PDF 文档.大概看了一下,讲的很详细,例子也比较简单,容易理解,现我准备利用工作之余翻译这份文档,为自己学习加深理解,也希望能帮助更多的人学习.…

【翻译】Ext JS最新技巧——2016-3-4

原文:Top Support Tips Kevin Cassidy:Grid水印 Ext JS的Grid是一个便于在布局中显示信息的伟大工具.有些用户可能会希望将这些信息打印为会议资料或宣传材料,而且会希望在打印的时候,能添加水印以便进行版权保护.保密或作为品牌的一种方式. 这个很容易实现,只要在Ext JS的Grid中为它指定一个样式就行了,而这只需要一些简单的CSS技巧. 实现这种效果的关键是修改单元格的样式,并在Grid中插入不透明且不会遮盖Grid内容的背景. 要做到这一点,首先是创建一…

【翻译】在Ext JS 6通用应用程序中使用既共享又特定于视图的代码

原文:Using Both Shared and View-Specific Code in an Ext JS 6 Universal App 在本文,在展示如何编写Ext JS 6通用应用程序代码以使控制器和视图模型能适用于特定视图又是共享的. 想了解更多有关Ext JS 6的信息吗?请报名参加培训班吧. 本文的重点是通用应用程序,而不是只能用于纯classic或纯Modern的应用程序.特别是,app文件夹在通用应用程序中具有独特的用途. 背景你可能已经听说过这个令人激动的消息,Ext…

Ext JS添加子组件的误区

经常会有人问我,为什么我的Grid不能岁窗口的变得而自动调整.了解后,发现很多人都习惯在渲染子组件的时候将Gird渲染到容器内的一个div里,而这正是问题的所在. 在Ext JS的布局系统中,能控制到的是容器的子组件,而对于渲染到容器中一个DIV的Grid,它并不知道在这容器里添加了一个Grid,当调整大小的时候,也就无法去调整Grid的大小了,而这也就是为什么Grid不会随容器的改变而改变了. 为什么那么多人喜欢使用这种方式来添加子组件呢?我想原因主要有以下两点: 不知道如何在容器内添加子组件…