![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
ExtJS
sandykwx
这个作者很懒,什么都没留下…
展开
-
Extjs4 学习笔记源码---Extjs4 Demo(1-9)
Extjs4 学习笔记源码(Extjs4 Demo),此源码为学习笔记一至九的全部源码,其中包含Extjs4的资源包,由于使用的是asp作为服务端,所以建议大家使用windows主机进行测试,所有案例均在demo文件夹中。欢迎大家下载测试,如有任何问题,可联系我,大家一起进步。我的QQ号码:301109552(倾斜的水瓶座)。下载地址:www.mhzg.net/upload/131153672转载 2013-01-17 09:53:15 · 534 阅读 · 0 评论 -
ExtJS4学习笔记(十二)---选项卡(tabs)
tab选项卡,是Extjs中常用的组件,tab一般依附于tabpanel,很多时候我也认为tab就是tabpanel,但在官方api中,确实有Ext.tab.Panel和Ext.tab.Tab之分,具体属性、事件、方法,请参考API,tab选项卡可以单独渲染,使用方法是:xtype: 'tab',本文介绍tab的基本用法。HTML代码:除了加载基本库以外,定义了一些CSS样式,这些CSS基本没转载 2013-01-17 09:53:03 · 544 阅读 · 0 评论 -
ExtJS4学习笔记(三)---VBox布局的使用
要使用VBox布局方式,首先的熟悉下一下几个主要属性:一、align:字符类型,指示组件在容器内的对齐方式。有如下几种属性。 1、left(默认):排列于容器左侧。 2、center :控件在容器水平居中。 3、stretch:控件横向拉伸至容器大小 4、stretchmax:控件横向拉伸,宽度为最宽控件的宽。二、flex:数字类型,指示组件在容器中转载 2013-01-17 09:52:44 · 810 阅读 · 0 评论 -
关于Extjs4开发笔记(二)的补充说明
Extjs4开发笔记二,主要讲述了框架的搭建,链接地址是:www.mhzg.net/a/20116/201162913210280.html,最近有网友跟我反映,说按照文章内容照着完成后,不显示框架,只有空白一片,问了几位网友下,发现他们都是使用的Exjts4.02a的版本,最后,在官方最新的API中发现,Ext.application下的属性autoCreateViewport 默认变成了f转载 2013-01-17 09:52:31 · 274 阅读 · 0 评论 -
Extjs4开发笔记(二)——框架的搭建
废话不多说了,上篇文章建立了比较基础的文件。今天开始搭建大体的框架,由于Extjs4在组件建立方面有了很大的改变,所以第一次建立的框架页面还是费了比较长的时间。本章内容增加了一些图片及CSS文件,目的是为了美化整个界面。增加的CSS文件:注意事项:layout、region的使用,如果没有看API及相关文档的话,那么面对错误对话框的时候,还不知道是怎么回事。本文将main.js放到了/ap转载 2013-01-17 09:52:27 · 469 阅读 · 0 评论 -
Ext Designer 可视化设计器及汉化全攻略
安装和汉化的步骤 第一步下载:Ext需要支持AIR的支持。下载并安装 http://airdownload.adobe.com/air/win/download/latest/AdobeAIRInstaller.exe第二步下载 Ext的核心安装包 在官网上 http://extjs.com/deploy/xds_preview.air下载后安装。转载 2013-01-17 09:52:04 · 361 阅读 · 0 评论 -
Extjs4 API文档阅读(二)——MVC构架(上)
一直想写一些Extjs4 MVC的东西,但由于自己的英文水平足够媲美小学5年纪的学生,所以在找了一些比我强一点的网友+机器翻译,总结出了以下这篇文章。但个人强烈建议去看英文原版(点击进入)。看完本文后,如有任何错误,欢迎来信或者留言指正(QQ:301109552)。那么,我们开始吧!对于Extjs来说,大客户端程序一直很难写,当你为大客户端程序添加更多的功能和项目的时候,项目的体积往往迅速转载 2013-01-17 09:53:19 · 368 阅读 · 0 评论 -
Extjs4布局详解(四)——Card布局
Card布局:这种布局用来管理多个子组件,并且在任何时刻只能显示一个子组件。这种布局最常用的情况是向导模式,也就是我们所说的分布提交。Card布局可以使用layout:'card'来创建。注意:由于此布局本身不提供分步导航功能,所以需要用户自己开发该功能。由于只有一个面板处于显示状态,那么在初始时,我们可以使用setActiveItem功能来指定某一个面板的显示。当要显示下一个面板或者上一个面板的转载 2013-01-17 09:53:34 · 512 阅读 · 0 评论 -
Extjs4布局详解(七)——Column布局
Column布局一般被称为列布局,这种布局的目的是为了创建一个多列的格式。其中每列的宽度,可以为其指定一个百分比或者是一个固定的宽度。Column布局没有直接的配置选项(继承的除外),但Column布局支持一个columnWidth属性,在布局过程中,使用columnWidth指定每个面板的宽度。注意:使用Column布局布局时,其子面板的所有columnWidth值加起来必须介于0~1之转载 2013-01-17 09:53:40 · 819 阅读 · 0 评论 -
ExtJS4学习笔记(十三)---上传文件(upload)
本文介绍Extjs4文件上传示例,Extjs4中,主要使用up('form').getForm().submit()方法来实现文件的上传,在submit方法中,指定其type属性,这点很重要,如果不指定,那么在上传完成后的处理中,除非服务端不返回数据,否则客户端就会报错。实例代码如下:upload.html: MHZG.NET--upl转载 2013-01-17 09:53:05 · 748 阅读 · 0 评论 -
ExtJS4学习笔记(十一)---TabPanel
创建一个tabPanel有两种方法:一:Ext.createWidget('tabpanel',{...})二:Ext.create('Ext.tab.Panel',{...})本文分别介绍这两种创建方法。HTML代码: MHZG.NET--Tabstabs.js:转载 2013-01-17 09:53:00 · 418 阅读 · 0 评论 -
Extjs4开发笔记(六)——数据的增删改
上一章,我们介绍了动态Grid的显示,其地址是:Extjs4开发笔记(五)——动态grid,在上一章,我们只做了数据的显示,并没有添加、删除和修改功能,本章内容,介绍如何进行添加、删除和修改。一般的项目中,Gird功能不是很复杂的话,都会使用window来实现数据的添加、修改功能,而本实例中,由于使用了动态grid功能,这样就使得再使用动态window来实现数据的添加和修改就会变的非常困难。转载 2013-01-17 09:52:37 · 359 阅读 · 0 评论 -
Extjs4 API文档阅读(二)——MVC构架(下)
一直想写一些Extjs4 MVC的东西,但由于自己的英文水平足够媲美小学5年纪的学生,所以在找了一些比我强一点的网友+机器翻译,总结出了以下这篇文章。但个人强烈建议去看英文原版(点击进入)。看完本文后,如有任何错误,欢迎来信或者留言指正(QQ:301109552)。 控制网格要注意的是,onPanelRendered功能仍然是被调用的。这是因为gird匹配'viewport > pan转载 2013-01-17 09:53:21 · 442 阅读 · 0 评论 -
Extjs4布局详解(一)——Fit布局
在Fit布局中,子元素将自动填满整个父容器。注意:在fit布局下,对其子元素设置宽度是无效的。如果在fit布局中放置了多个组件,则只会显示第一个子元素。典型的案例就是当客户要求一个window或panel中放置一个GRID组件,grid组件的大小会随着父容器的大小改变而改变。示例代码: var myData = [ ['3m Co',转载 2013-01-17 09:53:28 · 477 阅读 · 0 评论 -
Extjs4布局详解(二)——border布局
border布局:border布局也称边界布局,他将页面分隔为west,east,south,north,center这五个部分,我们需要在在其items中指定使用region参数为其子元素指定具体位置。注意:north和south部分只能设置高度(height),west和east部分只能设置宽度(width)。north south west east区域变大,center区域就变小了。转载 2013-01-17 09:53:30 · 706 阅读 · 0 评论 -
ExtJS4学习笔记(八)---Grid多选/全选
上一篇文章,在Grid中加入了搜索功能(链接地址是:www.mhzg.net/a/20115/20115219110248.html),但大量数据需要删除操作的时候,总不能一条一条去删除吧,本文介绍如何在Extjs4 Grid中加入全选功能。先来张效果图:点击显示所选后:注意点:1、需要在JS文件中动态加载“'Ext.selection.CheckboxModel'”2转载 2013-01-17 09:52:54 · 434 阅读 · 0 评论 -
ExtJS4学习笔记(二)---HBox的使用
要使用HBox布局方式,首先的熟悉下一下几个主要属性:一、align:字符类型,指示组件在容器内的对齐方式。有如下几种属性。 1、top(默认):排列于容器顶端。 2、middle:垂直居中排列于容器中。 3、stretch:垂直排列且拉伸义填补容器高度 4、stretchmax:垂直拉伸,并且组件以最高高度的组件为准。二、flex:数字类型,指示组转载 2013-01-17 09:52:41 · 529 阅读 · 0 评论 -
Extjs4开发笔记(四)——实现登录功能
上篇文章介绍了如何实现菜单功能(点击查看),但是有个问题,就是管理系统必须是登录后才会显示菜单,而且菜单还要实现不同权限有不同的菜单项,本文将实现这个功能。首先,将server/MenuLoader.asp修改,增加管理员验证功能。即 If Session("Manage") <> "" Then'显示菜单项End If 这时,重新打开页面转载 2013-01-17 09:52:33 · 358 阅读 · 0 评论 -
ExtJS4学习笔记(十)---ExtJS4图片验证码的实现
上几篇文章,主要学习了Extjs4 Grid的使用方法,从本篇开始,我们开始其他组件的学习,使用。在登录、注册甚至是发表文章或帖子的时候,都会用到验证码这个东西,那么在EXTJS中,可以使用验证码功能么?答案是肯定的,在EXTJS4之前,也有很多验证码的实现,在Extjs4中,验证码到底如何实现呢?暂时,我们将验证码组件,命名为CheckCode。此组件继承自Ext.form.field.Te转载 2013-01-17 09:52:58 · 320 阅读 · 0 评论 -
ExtJS4学习笔记(十四)--- ComponentQuery
对于Extjs3.x来说,Extjs4.0组件查找使用了ComponentQuery类,这个类是用来查找容器内的组件的。实现方式类似于CSS的Selector。在extjs3.x中,查找组件的方式有很多,例如:(ID组件ID)、(ref组件引用)、(items.get(0)组件的层级)。在extjs4.0中,则多了ComponentQuery。利用这个类,将更加方便的查找组件。下面,则是将extj转载 2013-01-17 09:53:07 · 252 阅读 · 0 评论 -
ExtJS4学习笔记(十五)---Ext.data.Model
extjs4.0中,在data类中新增加了一个Model(模型类),这个类有点类似于extjs3.x中的record。Model类功能非常强大,尤其在extjs4.0 MVC开发中,非常实用。如何定义Model类: Ext.regModel("Student",{ fields:[{name:"name",type:"string"},{nam转载 2013-01-17 09:53:11 · 405 阅读 · 0 评论 -
ExtJS4学习笔记(十六)---Combobox三级联动
很多网友在问,Extjs4.0 ComboBox如何实现,好在之前用3.x实现过一个三级联动,如今用Extjs4.0来实现同样的联动效果。其中注意的一点就是,3.x中的model:'local'在Extjs4.0中用queryMode: 'local'来表示,而且在3.x中Load数据时用reload,但是在extjs4.0中要使用load来获取数据。如下图:代码部分先看HTML代码:转载 2013-01-17 09:53:13 · 426 阅读 · 0 评论 -
Extjs4 API文档阅读(一)——类系统(Class System)
ExtJS4使用新的类机制进行了大量的重构。为了支撑新的架构,ext4几乎重写了每一个类,因此最好先好好的理解一下新的架构,再开始编码。本文适合想在extjs4中扩展现有类或者创建新类的开发者。其实,不管是想扩展还是使用,都建议您仔细阅读一下(如果E文好的,建议您还是阅读英文原文。链接地址是:http://docs.sencha.com/ext-js/4-0/#/guide/class_sys转载 2013-01-17 09:53:17 · 363 阅读 · 0 评论 -
Extjs4布局详解(六)——Absolute布局
Absolute布局继承Ext.layout.container.Anchor 布局方式,并增加了X/Y配置选项对子组件进行定位,Absolute布局的目的是为了扩展布局的属性,使得布局更容易使用。 Ext.create('Ext.form.Panel', { title: 'MHZG.NET - Absolute Layout', width转载 2013-01-17 09:53:38 · 403 阅读 · 0 评论 -
ExtJS4学习笔记(十四)--- ComponentQuery
对于Extjs3.x来说,Extjs4.0组件查找使用了ComponentQuery类,这个类是用来查找容器内的组件的。实现方式类似于CSS的Selector。在extjs3.x中,查找组件的方式有很多,例如:(ID组件ID)、(ref组件引用)、(items.get(0)组件的层级)。在extjs4.0中,则多了ComponentQuery。利用这个类,将更加方便的查找组件。下面,则是将extj转载 2013-01-17 09:53:09 · 275 阅读 · 0 评论 -
ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid)
上一篇文章,在Grid中加入了多选/全选功能(链接地址是:http://www.mhzg.net/a/20115/20115311100255.html),实际运用中,我们可能需要动态修改Grid中的数据,也就是要实现EditGrid功能。本文介绍如何实现Extjs4 EditGrid功能。先发几张效果图。看图说话,更有说服力哦。 HTML代码:转载 2013-01-17 09:52:56 · 1109 阅读 · 0 评论 -
ExtJS4学习笔记(七)---带搜索的Grid(SearchGrid)
项目开发中,Grid组件少不了搜索功能,在Extjs4中,搜索组件以插件的形式出现,而且实现也非常简单,搜索组件位于examples/ux/form目录下,JS文件是SearchField.js。Grid加载搜索功能,要注意的是:1、开启延迟加载,即Ext.Loader.setConfig({enabled: true});2、设置插件的目录:Ext.Loader.setPath('E转载 2013-01-17 09:52:52 · 444 阅读 · 0 评论 -
ExtJS4学习笔记(六)---多表头Grid
做项目的时候,有时候会遇到多表头的Grid,在EXTJS4中,多表头的实现已经很简单了,本文介绍如何实现多表头gird的功能。之前有一篇文章,讲的是如何实现Grid的分页功能(地址是:www.mhzg.net/a/20115/201151811170246.html),本文在此基础上做出修改,达到多表头Grid+分页功能。先看下效果图: 实现代码如下:HTML代码:转载 2013-01-17 09:52:50 · 438 阅读 · 0 评论 -
ExtJS4学习笔记(五)---Grid分页
Grid组件,当数据量很大的时候,就需要分页显示,本文介绍如何实现Extjs4 Grid的分页功能。先看THML代码: Paging Grid-MHZG.NET这里引用的JS文件,都是相对于Extjs4整个目录的。如果已经将JS和CSS文件剥离并分目录放置了,那么一定要注意修改bootstrap转载 2013-01-17 09:52:48 · 357 阅读 · 0 评论 -
ExtJS4学习笔记(四)---Grid的使用
Extjs4 Grid创建还是比较容易的,难记、难理解的地方,也就是数据的获取。下面,就创建一个最简单的Grid组件,后面,我们会逐渐丰富这个Grid的功能。HTML代码: Grid-MHZG.NET grid.js: Ext.require([ 'Ext转载 2013-01-17 09:52:46 · 362 阅读 · 0 评论 -
ExtJS4学习笔记(一)---window的创建
Extjs4,创建Ext组件有了新的方式,就是Ext.create(....),而且可以使用动态加载JS的方式来加快组件的渲染,我们再也不必一次加载已经达到1MB的ext-all.js了,本文介绍如何在EXTJS4中创建一个window。编者注(修正于2011-7-8):代码中所有Ext.Window应该是Ext.window.Window,如果按Ext.Window的话,在某些浏览器中显示不转载 2013-01-17 09:52:39 · 277 阅读 · 0 评论 -
Extjs4开发笔记(五)——动态grid
上一节我们说了如何实现登录,其地址是:Extjs4开发笔记(四)——实现登录功能。现在为止,框架有了,菜单有了。下一步工作就是实现每个菜单项目的数据显示,一般来讲,我们都是固定思维,通过编写大量的grid来实现各种数据的显示,在网络上有一些案例,都是每一个菜单项目,写一个grid,而且点击树节点,都是通过判断或其他方法来创建相应grid的实例,例如: if(node.id=转载 2013-01-17 09:52:35 · 480 阅读 · 0 评论 -
Extjs4开发笔记(三)——菜单的实现
上篇文章介绍了搭建一个空的框架(链接地址:www.mhzg.net/a/20116/201162913210280.html),使得管理系统有了大致的模样,今天工作的主要内容就是菜单的实现以及点击菜单后在右边内容区打开一个新的Panel。本篇文章的内容主要包括两个方面,Extjs4 Tree及Extjs4 tabPanel。在Extjs应用中实现菜单,无疑Tree是最好的选择,将菜单项直接写到转载 2013-01-17 09:52:29 · 418 阅读 · 0 评论 -
如何在VS2010中编写ExtJs--001
1. 配置开发环境先从环境配置说起,本文及后续IDE皆以VS2010环境示例。下载Ext.Net,http://www.ext.net/download/官方提供两个版本:社区版和专业版,这两个版本除了授权协议不一样外,对开发人员来说,没有任何区别。 顺便说一个问题,官方的要求的.NET Framework版本为3.5,其实需要装3.5SP1或直接4.0转载 2013-01-17 09:52:06 · 763 阅读 · 0 评论 -
Extjs4 API文档阅读(三)——布局和容器
extjs4.0布局和容器(Layouts and Containers)是Ext JS中最强大的部分之一。它负责控制你应用程序中每个组件的尺寸和定位。本文内容包括了如何运用布局的基础。一、容器一个Ext JS应用程序的图形用户界面(UI)是由许多组件(查看组件指南(Components Guide)获取更多关于组件的信息)构成的。容器是一种可以容纳一些其他组件的特殊类型组件。典型的E转载 2013-01-17 09:53:23 · 508 阅读 · 0 评论 -
Extjs4 API文档阅读(四)——Data
上一节,我们介绍了下布局及容器,本节本来要介绍下组件,但是组件方面的资料暂时没有翻译完成,所以本节先介绍下数据(Data)。数据Data包负责加载和保存你应用程序中的所有数据,由41个类构成,其中有三个类是最重要的,分别是模型类(Model),存储类(Store),代理类(Ext.data.proxy.Proxy)。它们几乎在每个应用程序中都被使用到,并且有很多相附类为它们提供支持。转载 2013-01-17 09:53:26 · 424 阅读 · 0 评论 -
Extjs4布局详解(三)——accordion布局
accordion布局:accordion布局也称手风琴布局,在accordion布局下,在任何时间里,只有一个面板处于激活状态。其中每个面边都支持展开和折叠。注意:只有Ext.Panels 和所有Ext.panel.Panel 子项,才可以使用accordion布局。示例代码: Ext.create('Ext.panel.Panel', { title: 'A转载 2013-01-17 09:53:32 · 559 阅读 · 0 评论 -
Extjs4布局详解(五)——anchor布局
anchor布局将使组件固定于父容器的某一个位置,使用anchor布局的子组件尺寸相对于容器的尺寸,即父容器容器的大小发生变化时,使用anchor布局的组件会根据规定的规则重新渲染位置和大小。AnchorLayout布局没有任何的直接配置选项(继承的除外),然而在使用AnchorLayout布局时,其子组件都有一个anchor属性,用来配置此子组件在父容器中所处的位置。anchor属性为一转载 2013-01-17 09:53:36 · 535 阅读 · 0 评论 -
Extjs4开发笔记(一)——准备工作
重写原因:由于开始准备的时候,就是按照传统开发去做的,写了一部分之后,有网友和同事提出:“为什么不用MVC模式”呢?这样的问题让我对目前传统开发的心发生了一些细微变法,对啊,为什么不用MVC模式呢?我征求了一下同事及热心网友的意见,都同意使用MVC模式开发。从而,我删掉了原来所有目录,重新按照MVC模式去组织目录结构,很快的,目录结构准备好了。那。。我们重新来过,使用EXTJS4.0的MVC模转载 2013-01-17 09:52:25 · 309 阅读 · 0 评论