EXTJS - 技术教程文章
基于Extjs的web表单设计器 第一节【图】
前面一节介绍了表单设计器的背景和最终的大概样式，本节主要介绍表单设计器的需求及功能设计。在讲需求之前先明确几个常用的概念：主表或者卡片表——具有多行多列的一个区域的控件块，如下图所示。明细表——就是常用的表格类型的控件块，表头信息就确立了该列的数据类型，如下图所示。卡片式的表：指的是一个表单模板只包括一个主表；主子表：指的是一个表单模板包含一个主表、一个明细表；多子表：指的是一个表单模板包含一个主...
extjs3 tree 指定内容qtip【代码】【图】
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <link href="resources/css/ext-all.css" rel="stylesheet"> <script src="jslib/ext-base.js"></script> <script src="jslib/ext-all.js"></script></head><body><script> function init(){ var tree = new Ext.tree.TreePanel({ renderTo: Ext.getBody(), useArrows: true, autoScroll: true, ...
ExtJS 细节【代码】
1. 如何防止每次点击同一个叶子节点时，都新开一个tab：var groupTree =Ext.create(‘Ext.tree.Panel‘,{//创件树 rootVisible:false, title :‘基准点设置‘, region :‘west‘,//useArrows: true, width :‘15%‘, border:false, animate :false, store:TreeStore, listeners :{ itemclick:function(tree,r,item,index,e,eOpts){var n = tab.getComponent(r.get(‘leaf‘));if(r.get(‘leaf‘)){if(...
ExtJs自学教程(1)：从一切API开始【代码】
称号 记得 本系列文章是不是引进全套焦点ExtJs使用，您只需专注于解决ExtJs思考问题。人们不写长篇大论。别人能学会自立。l 有些人只要学会CSS的javascript基础知识并没有非常糟糕的英语（为了帮助金山词霸可以理解ExtJs的API任何）。你可以参考本教程的实践。《一》 从一切API开始 学ExtJs的朋友在初学ExtJs的时候认为ExtJs的非常easy效果非常好。几行代码就把效果搞定了。可是用得多了，抱怨就開始了：ExtJs的布局怎么这么麻烦...
Extjs4对Model定义相关的校验内容【图】
方法名称在添加上一个Message就可以设置错的内容了 config的内容如下config配置内容value，用户传递的值 来自为知笔记(Wiz)原文：http://www.cnblogs.com/babyhhcsy/p/7663e64b5df289d1a1f000abab9eb259.html
ExtJS 第一个程序【代码】【图】
本篇介绍如何创建一个ExtJS应用程序。并通过创建目录、导入文件、编写代码及分析代码等步骤来解释第一个ExtJS程序。目录1. 创建程序 1.1 创建目录建议 1.2 实际目录 1.3 index.html 1.4 运行图2. 代码分析 2.1 Ext.onReady() 2.2 Ext.create() 1. 创建程序1.1 创建目录建议根据官方建议，创建一个ExtJS应用程序的目录推荐如下：- appname| - app| - namespace| - Class1.js| - Class2.js| - ...| - extjs| - res...
Extjs中ajax请求当session失效时自动跳转【图】
当session失效时，我们可以通过filter来拦截并重定向到登陆页面，可是请求如果是ajax请求，页面并不会重定向，这是因为ajax返回的是数据，无法返回页面。ajax异步请求不同于其他请求，其在请求头里包含有X-Requested-With:XMLHttpRequest，看下面两张图的区别。我们可以在filter中通过它来判断一个请求是不是异步的，如果是，我们可以返回一个sessionstatus，在页面上通过判断sessionstatus的值来判断session是否失效。第一张是普通...
4、手把手教你Extjs5(四)主界面上加入顶部和底部区域【代码】
这一节为主界面加一个顶部区域和底部区域。一个管理系统的界面可以粗分为顶部标题部分、中间数据展示和处理的部分、底部备注和状态部分。在增加这二个区域之前，我们先在MainModel.js中加入一些数据。Ext.define(‘app.view.main.MainModel‘, {extend: ‘Ext.app.ViewModel‘,alias: ‘viewmodel.main‘,data: {name: ‘app‘,// 系统信息 system: {name: ‘工程项目合同及资金管理系统‘,version: ‘5.2014.06.60‘,iconU...
ExtJS ComboBox之 键入自动查询【代码】
Ext.create(‘Ext.form.Panel‘, { title: ‘菜单编辑‘, id:‘editMenuForm‘, bodyPadding: 5, // The form will submit an AJAX request to this URL when submitted url: ‘/SystemManage/SaveMenuForm‘, method: ‘POST‘, // Fields will be arranged vertically, stretched to full width layout: ‘anchor‘, defaults: { anchor: ‘100%‘ }, // The fields defaultType: ‘textfield‘, items: [{ name: ‘menuGuid‘, ...
项目开发中遇到的extjs常见问题【代码】
1事件触发机制2 3l 给某一个控件添加事件。4 5 obj.addEvents( {search : true });6 7l 给某一个事件添加处理函数8 9n 给一个对象或变量添加监听及对应得处理，可以在创建时，通过属性listener添加。10 11 n 或者通过 obj.on(‘event’,function(){})12 13 n 或者通过obj.addListener(“event”,function)14 15 16 17l 出发一个事件，params是要传给事件对应的处理函数的参数...
【extjs】 Extjs中的Ext.grid.Panel隐藏列会显示在表头中解决方法【代码】【图】
在Extjs中的GridPanel会有这样的情况，隐藏列会显示在menuDisabled中,但是这个一般没有什么用处，只是用于后台取值的作用,感兴趣的朋友可以了解下啊，希望本文对你有所帮助 在Extjs中的GridPanel会有这样的情况，隐藏列会显示在menuDisabled中 如下图：但是这个一般没有什么用处，只是用于后台取值的作用。so 加一个属性：hideable:false就可以搞定了。 { text: ‘用户ID‘, dataIndex: ‘uid‘,align: ‘center‘,hidden:true,...
extjs datafield 格式化
extjs DateField 的值用getValue()方法获取后是一大堆字符串，类似Tue Dec 07 2010 00:00:00 GMT 0800，这玩意存入数据库实在不好办。。。所以要把它格式化一下，方法很简单，用EXT的 Ext.util.Format.date（）方法 示例： var gedt = Ext.util.Format.date(日期控件.getValue(), ‘Y-m-d‘); 出来的日期格式就是2010-10-10这样的 // date( String/Date value, [String format] ) : String Formats the passed date using the ...
跟我一起学extjs5(19--模块记录的拖放删除、拖放复制新增)【图】
跟我一起学extjs5(19--模块记录的拖放删除、拖放复制新增) 网页其中的拖放(drag-drop)是比較有趣的操作，extjs5中非常好的封装了拖放的动作，也有各种类来支持，可是要学好“拖放”这个东西真是非常难，特别是象我这样英语不好的人。看不太懂官网上的说明，做一个拖放的操作起码得几天的时间。 以下完毕拖放删除的功能。即，选中一条记录或多条记录。然后拖动到“删除”button上。最后松开鼠标进行记录删除的操作。操...
Extjs选中多行Grid提交【代码】【图】
要实现的效果如图：可以选择多行grid然后提交给后台1，Extjs中grid如何可以选择多行？定义一个grid，将色了Type设置为多选即可selType: ‘checkboxmodel‘, 2，controller层代码： 1 StdEvaluationToPaper:function(btn,event){2var grid=Ext.getCmp(‘StudentEvaluationGrid‘);3var form=Ext.getCmp(‘StudentEvaluationForm‘);4var records=grid.getSelectionModel().getSelection(); 5var title = form.getForm().getValues()...
ExtJs--01--引入ExtJs4.1.1
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><base href="<%=basePath%>"><title>ExtJs提示框学习</title><meta http-equiv="pragma" content="no-cache"><m...
Java Web项目（Extjs）报错二
1、Java Web项目（Extjs）报错二 具体报错如下：usage: java org.apache.catalina.startup.Catalina [ -config {pathname} ] [ -nonaming ] { -help | start | stop } 2014-3-26 22:46:18 org.apache.catalina.core.AprLifecycleListener init 信息: Loaded APR based Apache Tomcat Native library 1.1.27 using APR version 1.4.6. 2014-3-26 22:46:18 org.apache.catalina.core.AprLifecycleListener init 信息: APR capab...
Extjs初学者（一）【代码】【图】
Ext.form.field.Number针对数字约束的配置项 1<html> 2<head> 3<title>图书管理界面</title> 4<link rel="stylesheet" type="text/css" href="../ext-4.2.1/resources/css/ext-all.css"/> 5<script type="text/javascript" src="../ext-4.2.1/bootstrap.js"></script> 6 7<script> 8 Ext.onReady(function(){9 Ext.QuickTips.init(); 10var form =new Ext.form.FormPanel({ 11 title:‘示例‘, 1...
ExtJs + Struts2 + JSON【代码】
最近一直都在看EXTJS的东西，然后自己实践了下，界面倒是蛮漂亮的，但是一旦涉及到与服务器端进行数据互动麻烦就出来了，本来下了个例子确发现是 用DWR的，觉得我既然用了STRUTS2作为MVC的框架，我觉得这个框架还是很不错的，觉得还是把EXTJS整合到一起更好些，找了相关的资料，跟着 前辈做了下例子，发现完全不是那么回事，只好自己慢慢摸索，终于把数据交互的问题解决了，所以记录之以便查阅！ 还是从底层开始说吧，拿最经...
[ExtJS5学习笔记]第三十四节 sencha extjs 5 grid表格之java后台导出excel【代码】【图】
继上次使用js前端导出excel之后，另一个主要大家比較关注的是后台实现导出excel,由于本人开发使用的java所以这里使用apache的开源项目poi进行后台excel的导出。本文文件夹本文文件夹poi项目下载及载入extjs前端导出设置extjs后台相应的解决方式创建excel工作簿创建一个excel页签生成excel样式并初始化产生表格标题行build headers构造数据行build rowspoi项目下载及载入POI项目是apache官网的一个开源项目，其主要目的是对microsof...
ExtJS4.2学习(19)在线编辑器Ext.form.HtmlEditor（转）【图】
鸣谢：http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-12-24/191.html--------------------------------------------------------------------------------------------不知道大家发觉这样的问题没，以前写Extjs3.X的时候，Eclipse在复制粘贴写代码的时候一点不卡，在4.2的时候，用eclipse写就会经常卡死的现象。下午研究了一下午，我可不想在写代码的时候一直被卡死，我就找到了新的IDE工具intellij idea (...
extjs PropertyGrid使用【代码】
var grid = new Ext.grid.PropertyGrid({title: ‘属性表格‘,autoHeight: true,width: 300,renderTo: Ext.getBody(),viewCondig: {forceFit: true},source: {‘名字‘: ‘不说‘,‘创建时间‘: new Date(),‘是否有效‘: false,‘版本‘: .01,‘描述‘: ‘没啥说的‘}}); 原文：http://www.cnblogs.com/yll-sww/p/4159844.html
bootstrap、jquery easyui、extjs界面比较
最近需要做一个界面，有下拉选择框、按钮、表格。之前用过jquery ui，样子还凑合，但是很大的一个问题是没有表格。于是我转向了bootstrap，这个最火最好的前端显示框架，发现它只是一个强调html5+css3的移动优先响应式设计的框框，很多东西都需要你自己订制。别说表格了，连下拉框都没有。不过好在它很火，于是有很多补充的项目。Flat UI不错，但用了一下报错，没时间研究源代码于是暂时放弃了。接着想起了以前很流行的easyui，登上...
Extjs中panel的 collapseMode 属性的应用，修改折叠箭头样式【图】
panel中属性collapseMode可以实现面板的折叠，不过属性自带的折叠箭头不太容易辨识，通过修改实现如下展现样式 具体代码实心如下：Ext.onReady(function(){ var mainPanel=Ext.create(‘Ext.panel.Panel‘,{ title:‘主信息‘, // collapsible:false, // layout:‘border‘, height:300, region:‘center‘ }); var linePanel=Ext.create(‘Ext.panel.Panel‘,{ title:‘明细信息‘, layout:‘fit‘, border :...
ExtJS浏览器对象模型BOM——命名空间和用户代理对象、Cookie【代码】
BOM（浏览器对象模型（BrowserObjectModel））,允许访问和操控浏览器窗口。研发者通过使用BOM，可移动窗口、更改状态栏文本、执行其它不与页面内容发生直接联系的操作。本文将从ExtJS中以下四类服务入手： 1，命名空间2，用户代理对象3，Cookie4，定时调用函数（将于下一博文详细陈述） 命名空间 ExtJS的命名空间是在window对象所提供的全局范围内建立相互独立的范围，概念上类似于Java的package。 Ext.namespace("com.baidu"); c...
【ExtJS】关于alias和xtype【代码】【图】
alias在api里的解释为：别名 类名称简短的别名列表。多数用于定义xtypes 1 Ext.define(‘MyApp.Panel‘, {2 extend: ‘Ext.panel.Panel‘,3 alias: ‘widget.mypanel‘,4 title: ‘MyPanel‘5});6 7 Ext.onReady(function(){8// 使用 Ext.create 9 Ext.create(‘widget.mypanel‘,{ 10 html: ‘Create Widget!‘, 11 width: 400, 12 height: 200, 13 broder: true, 14 ren...
[ExtJS5学习笔记]第二十七节 CMD打包错误 Error C2009: YUI Parse Error (identifier is a reserved word => debugger;)
本文地址：http://blog.csdn.net/sushengmiyan/article/details/41242993本文作者：sushengmiyan------------------------------------------------------------------------------------------------------------------------------------使用cmd打包ext的时候报了一个诡异的错误。细细找来，发现是代码书写导致。如今记录一下：错误具体信息：[ERR] C2009: YUI Parse Error (identifier is a reserved word =>debugger;) -- unkn...
ZP的EXTJS学习笔记（四）——图表的简单使用（图表点击事件）【代码】【图】
这次做的比较简单，是一个消息阅读情况的展示。是模仿Example中chart的pie.js做的。贴下改造后的pie.js:Ext.require(‘Ext.chart.*‘); Ext.require([‘Ext.layout.container.Fit‘, ‘Ext.window.MessageBox‘]);Ext.onReady(function () {//store1.loadData(generateData(6, 20));var donut = false,chart = Ext.create(‘Ext.chart.Chart‘, {xtype: ‘chart‘,animate: true,id: ‘domid‘,store: store1,shadow: true,legend:...
Extjs学习笔记--Ext.tree.Panel【代码】【图】
Ext.create(‘Ext.tree.Panel‘, {title: ‘Simple Tree‘,width: 200,height: 150,store: store,rootVisible: false, //是否显示根节点 lines:false,//是否显示树节点前面的虚线 参考图A,BrenderTo: Ext.getBody() }); 图片A 图片B原文：http://www.cnblogs.com/ahjx1628/p/4177019.html
开源进销存PSI - ExtJS知识点(1)【代码】
引言这一系列的博客源于PSI的QQ群中有同学抱怨JS代码中没有注释，于是我就决定动手增加注释。同时我也在想：很多关于ExtJS的疑问是和不太熟悉ExtJS的基础知识点相关的，所以我就决定动手写这一系列的博客。注意：这些知识点仅仅局限于PSI代码中应用到了的，并不是ExtJS开发大全。Ext.define这个是我认为在ExtJS所有的知识点中最重要的，原因是几乎每个PSI的JS代码中它必出现。通俗地讲，Ext.define就是定义一个新的class。因为JS本...
Extjs 选择元素涉及方法总结【代码】【图】
本文主要是解释Extjs在使用过程中使用的相关选择方法：1.首先解释第一组概念：Ext.get（String/HTMLElement/Ext.Element el）Ext.getCmp（String id）Ext.getDom（String/HTMLElement/Ext.Element el）在理解之前，建议先看两篇基础知识的文档： 1.[转载]Extjs中的dom,Ext.Element和Ext.Component对象的关系 2.【转载】Extjs 中id与itemId的区别理解了基础概念之后，我们来看：Ext.get（String/HTMLElement/Ext.Element el） ：入...