
ExtJs
文章平均质量分 54
指尖上的程序
座右铭:做人、做事、做学问;
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Ext.FormPanel
首先弄清楚这个问题,创建的时候: //查看源代码便知,两种方法是一样的Ext.form.FormPanel = Ext.FormPanel;html代码-->body>div id="form1">div>body>//js代码var form1 = new Ext.form.FormPanel({ width:350,转载 2012-09-08 11:03:55 · 3329 阅读 · 0 评论 -
ExtJs4 笔记(4) Ext.XTemplate 模板
本篇将涉及到ExtJs中一个重要的概念,模板。话说Razor很神奇,但是我个人不是很喜欢那种html混编C#的方式,仿佛又回到了asp的时代。ExtJs的模板同样也可以组织生成灵活的html,而且代码和html有效的分离。本文将细细分析ExtJs模板的用法。行文之前我先把公共的html和用到的js数据贴在前面,后面的代码都要引用到。[html]?转载 2013-05-22 16:43:49 · 574 阅读 · 0 评论 -
ExtJs4 笔记(5) Ext.Button 按钮
从本篇开始讲基础控件,ExtJs对所有的UI控件都有它自己的一套封装。本篇要讲到的是ExtJs的按钮。主要包括按钮事件、带分割线、带图标、带菜单的按钮,下拉选项式按钮和按钮组合等。我们先看看效果图:预览如下是用到的html:[html]?12345678910转载 2013-05-22 16:51:50 · 643 阅读 · 0 评论 -
ExtJs4 MVC模式下绑定Menu事件
View层代码:[javascript] view plaincopyExt.define('My.view.Menu', { extend: 'Ext.menu.Menu', alias: 'widget.mainMenu', items: [{ text: '主菜单',原创 2013-05-24 16:10:36 · 1280 阅读 · 0 评论 -
ExtJs4中gird列中增加操作列,并给操作按钮绑定事件
在ExtJs4中,grid组件有Ext.grid.column.Action组件,所有要增加操作列,只需指定列的xtype为actioncolumn即可,例如:[javascript] view plaincopyExt.create('Ext.grid.Panel', { renderTo: Ext.getBody(),转载 2013-05-24 16:13:12 · 990 阅读 · 0 评论 -
ExtJs实现类似于jQuery中live的绑定功能,并且实现多个进行绑定
[html] view plaincopyul id="action"> li> input class="ok" type="button" value="确定"> input class="cancel" type="button" valu="取消"> li> li>原创 2013-05-24 16:14:58 · 704 阅读 · 0 评论 -
ExtJs 中float设置为true后,默认有4px边距问题
前些天,写一个区域的拖动遮挡插件,要获取拖动层在区域的坐标,利用Ext的draw.Component来编写,在没有设置float为true时对单个拖动有效,不会出现错误问题,但是在需要动态添加多个拖动层时,在不设置float为true的情况下,拖动层在区域的坐标就会出现错误,这时候必须设置float为true,才能解决这个问题,但是新的问题又出现了,在区域里拖动遮挡块到区域最边上的时候总有4px的转载 2013-05-24 16:16:21 · 826 阅读 · 0 评论 -
ExtJs4 中 获取grid列表数据绑定到form表单
首先创建store:[javascript] view plaincopyvar store = Ext.create('Ext.data.Store', { fields: [ { name: 'IntData', type: 'int' }, { name: 'StringData转载 2013-05-24 16:18:35 · 3570 阅读 · 0 评论 -
ExtJs4中更改Store的代理(proxy)路径(url)
在ExtJs4中我们通过异步获取数据用Ext.data.Store,如下:[javascript] view plaincopyvar gridStore = Ext.create('Ext.data.Store', { fields: [ { name: 'id', type: 'string' },转载 2013-05-24 16:19:43 · 826 阅读 · 0 评论 -
根据不同环境加载不同js文件
根据不同环境加载不同js文件分类: js Web2012-04-13 10:53 255人阅读 评论(0) 收藏 举报nullpathfunctionfile 在项目开发中,通常我们会引用未压缩的js文件,以便调试,但是在外网我们又需要将js进行压缩,这样每次上传都要更改js引用的代码,很不科学,所以采取js判断当前访问环境来进行加载js,这样就避免转载 2013-05-24 16:23:32 · 2424 阅读 · 0 评论 -
Extjs4中grid 隐藏列,同时删除header表头下拉勾选项
在显示grid列表的时候我们通常需要隐藏某列,这时我们只需设置hidden: true即可,例如:[javascript] view plaincopycolumns: [ { text: 'id', hidden: true }, { text: 'name', flex: 1, dataIndex: 'name转载 2013-05-24 16:20:32 · 1428 阅读 · 0 评论 -
ExtJs4 笔记(13) Ext.menu.Menu 菜单、Ext.draw.Component 绘图、Ext.resizer.Resizer 大小变更
本篇讲解菜单、绘图、还有大小变更控件。菜单控件可以附加到各种其他控件中,比如按钮、工具栏等,甚至可以直接通过通过右键打开(模拟右键菜单);ext对绘图的支持可以让我们通过js来绘图;大小变更控件可以让各种html元素获取可变更大小的能力。下面我们一一详细介绍。一、Ext.menu.Menu 菜单1.菜单的定义下面我们来定义一个菜单,它包括一个下拉列表,还有颜色选择器,日期选转载 2013-05-22 17:07:17 · 578 阅读 · 0 评论 -
ExtJs4 笔记(12) Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏
本篇讲解三个工具栏控件。其中Ext.toolbar.Toolbar可以用来放置一些工具类操控按钮和菜单,Ext.toolbar.Paging专门用来控制数据集的分页展示,Ext.ux.statusbar.StatusBar用来展示当前的状态信息。一、Ext.toolbar.Toolbar工具栏控件可以被附加在面板、窗口等容器类控件中,可以在四个方位添加多个工具栏控件。我们演示多个E转载 2013-05-22 17:00:37 · 963 阅读 · 0 评论 -
ExtJs4 笔记(8) Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件
本篇要登场的有三个控件,分别是滚轴控件、进度条控件和编辑控件。一、滚轴控件 Ext.slider1.滚轴控件的定义下面我们定义三个具有代表意义滚轴控件,分别展示滚轴横向、纵向,以及单值、多值选择的特性:[html]?1234567891011转载 2013-05-22 16:55:46 · 584 阅读 · 0 评论 -
基于Struts的Ext增删改查应用范例
index.jspthis is my first Extjs Demo...Ext.onReady(function(){Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';Ext.QuickTips.init();//fieldsvar fields =转载 2012-09-10 14:31:17 · 764 阅读 · 0 评论 -
ExtJs4 笔记(10) Ext.tab.Panel 选项卡
本篇讲解选项卡控件。一、基本选项卡首先我们来定义一个基本的选项卡控件,其中每个Tab各有不同,Tab的正文内容可以有三种方式获取:1.基本方式:通过定义html和items的方式。2.读取其他html的信息:通过设置contentEl就可以获取其他html的信息为当前tab正文。3.读取服务端数据:通过定义autoLoad异步方式获取服务端数据。另外转载 2013-05-22 16:57:58 · 1701 阅读 · 0 评论 -
ExtJs4 笔记(11) Ext.ListView、Ext.view.View 数据视图
本篇介绍两个用来展示数据的容器控件,分别是Ext.ListView和Ext.view.View。Ext.ListView就是大名鼎鼎的Ext GridPanel的前身,不过现在的Ext4已经将它整合到GridPanel一起了,做一些简单的表格数据展示还是可以用到的。而Ext.view.View则提供了通过模板自定义展示数据的方式,数据的展示形式不限于表格,可表现为灵活的方式,同时Ext为其提供了基转载 2013-05-22 16:58:44 · 2219 阅读 · 0 评论 -
ExtJs4 笔记(3) Ext.Ajax 对ajax的支持
本篇主要介绍一下ExtJs常用的几个对JS语法的扩展支持,包括Ajax封装,函数事件操作封装,还有扩展的常用函数等。Ajax服务端交互式操作是提交到.NET MVC。后续服务端交互都采用这一方式实现。一、ExtJs中的Ajax:Ext.Ajax.request通过客户端向服务端发送Ajax请求,可以“直接”调用MVC的action方法,并传递参数,action返回值可以是普通字符串转载 2013-05-22 16:45:54 · 619 阅读 · 0 评论 -
ExtJs4 笔记(6) Ext.MessageBox 消息对话框
本篇演示消息对话框的用法,ExtJs封装了可能用到的各类消息框,并支持自定义的配置。如下是用到的html:[html]?123456789h1>各种消息框h1>div id="div1" class="content">button id="bt1转载 2013-05-22 16:52:44 · 563 阅读 · 0 评论 -
ExtJs4 笔记(7) Ext.tip.ToolTip 提示
本篇介绍提示控件,ExtJs支持两种方式定义提示,可以支持普通html元素和一般的ExtJs UI控件。一、基本提示 Ext.tip.ToolTip1.最简单的提示下面通过代码定义一个最简单的提示,首先在HTML加入一个div,我们要实现当鼠标移动到这个div上时,自动出现提示,如下是html内容:[html]?1转载 2013-05-22 16:54:20 · 825 阅读 · 0 评论 -
ExtJs4 笔记(9) Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件
本篇讲解三个容器类控件。一、面板控件 Ext.Panel一个面板控件包括几个部分,有标题栏、工具栏、正文、按钮区。标题栏位于最上面,工具栏可以在四个位置放置,围绕中间部分正文,按钮区位于最小方。下面介绍几个基本配置项:1.title:设置面板标题文本。2.tbar,lbar,rbar,bbar:分别设置上、左、右、下四个部位的工具栏。3.html,items转载 2013-05-22 16:56:51 · 1233 阅读 · 0 评论 -
ExtJs4 笔记(14) layout 布局
本篇讲解Ext另一个重要的概念:布局。一般的容器类控件都是通过配置项items添加子控件的,这些子控件相对于父控件怎么定位呢,这里就要用到布局。某些容器类控件,它本身默认就集成了一种布局方式,例如比较典型的是:Ext.container.Viewport 布局控件,它其实就是一个border布局的容器,还有Ext.form.Panel、Ext.tab.Panel等。本节我们系统的分析各种布局方式。转载 2013-05-22 17:08:22 · 1176 阅读 · 0 评论 -
ExtJs4 笔记(2) ExtJs对js基本语法扩展支持
本篇主要介绍一下ExtJs对JS基本语法的扩展支持,包括动态加载、类的封装等。一、动态引用加载ExtJs有庞大的类型库,很多类可能在当前的页面根本不会用到,我们可以引入动态加载的概念来即用即取。这些代码都要写在Ext.onReady外面。1.动态引用外部Js[Js]?1234//加载配置转载 2013-05-22 16:48:18 · 616 阅读 · 0 评论 -
ExtJs4 笔记(1) ExtJs大比拼JQuery:Dom文档操作
现在主流的JS框架要数ExtJs和JQuery应用的比较广泛。JQuery属于轻量级的,一般做网站应用比较常见,可见块头小的优势。ExtJs比较庞大,它除了对基本的JS语法和HTML DOM操作方式的封装之外,还提供了一套强大的UI库。在企业级B/S解决方案应用上独占优势。就单说它在原生JS的封装,DOM操作方式封装方面也足以藐视JQuery。下面我就通过对比API,体现两种框架的异曲同工之处。我转载 2013-05-22 16:49:51 · 540 阅读 · 0 评论 -
Ext的CheckboxSelectionModel默认选中
说明:勾选某几条记录后,翻页再翻回来,保持原来的选中状态。原理:在勾选或取消勾选的时候用recordIds保存或删除勾选中的Record的主键id值, 每次store加载(load事件)完后,遍历store,比较每条Record的主键列id是否在recordIds中, 若存在则将Record保存到临时变量records中,最后调用selMod.selectRecords(rec转载 2013-07-26 16:17:53 · 956 阅读 · 0 评论