EXTJS - 技术教程文章

ExtJS笔记 Tree【代码】【图】

The Tree Panel Component is one of the most versatile Components in Ext JS and is an excellent tool for displaying heirarchical data in an application. Tree Panel extends from the same class as Grid Panel, so all of the benefits of Grid Panels - features, extensions, and plugins can also be used on Tree Panels. Things like columns, column resizing, dragging and dropping, renderers, sorting and fil...

Extjs 基础篇—— Function 能在定义时就能执行的方法的写法 function(){...}()

Ext.js 中 Function能在定义时就能执行的方法的写法 function(){...}()Js代码 /** * 第二部分Function:能在定义时就能执行的方法的写法 function(){...}(); //注意 红色 括号,即 Function定义之后,价格括号既可以定义之后就执行了 */ /** * 一、普通的方法的定义与执行 */ // 1-1、普通的方法定义,不带返回值的情况 fun = function() { alert("执行"); }; // 1-2、普通的方法执行,不带返回值的情况 // fun(...

一个简单的Extjs继承实现

function extend(sub,sup){ //目地:实现只继承父类的原型对象 //1.用一个空函数据中转,目地进行中转 var F = new Function(); //2.实现空函数的的原型对象和超类的原型对象转换 F.prototype = sup.prototype; //3原型继承 sub.prototype =sup.prototype; //4.还原子类的构造器 sub.prototype.constructor = sub; //5.保存父类的原型对象 一方面解耦,另一方面可以方便获得父类的原型对象 sub.su...

ExtJs特点、优缺点及注意事项【代码】【图】

摘自:ExtJs特点、优缺点及注意事项 1.什么是ExtJs?ExtJS可以用来开发RIA也即富客户端的AJAX应用,是一个用javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端Ajax框架。因此,可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJS的前身来自于YUI,经过不断发展与改进,现在已经成为最完整与成熟的一套构建RIA Web应用的JavaScript基础库。利用ExtJS构建的RIA Web应用具有与桌面程序一样的标准用...

Javascript - ExtJs - Toolbar - 工具栏【代码】【图】

Toolbar类是一种子控件,它不能独立存在,需要依附在其它组件上面。//创建工具栏var tbar = new Ext.Toolbar({width: 200,height: 30 });View Code工具栏创建完成后,类似下面这样: 现在你可以在这个空白的工具栏上add其它的子控件。tbar.add("-");//为工具栏增加一条分割线View Code//创建按钮var addRowBtn = new Ext.button.Button({text:"添加" }); var delRowBtn = new Ext.button.Button({text: "删除" }); //将两个按钮添加...

ExtJs6 loader 引入html页面不执行页面内js的解决办法

如题: extjs4的代码 到了ext6不执行了ext4代码: loader: { url: me.url, autoLoad: true, scripts: true }在ext6中作如下修改即可: loader: { renderer : function(loader, response, active) { loader.getTarget().update(response.responseText, true); ...

10.29_Extjs-lovcombo

(1) Ext.ux.form.LovCombo多选下拉框 :http://www.iteye.com/topic/340900 (2)combox:icon,lovcombo:icon(3)(4)(5)原文:http://www.cnblogs.com/juedui0769/p/4060856.html

Extjs初学者(四)

Ext常用函数:Ext.onReady() ---> 该方法的调用发生在Document对象加载完成后,Html的onload事件以及image加载之前 调用格式:Ext.onReady(Function fn,Object scope,boolean override)  参数说明:    fn: 执行函数   【Object scope】:执行范围   【boolean override】:表示是否以scope作为fn的默认执行范围 Ext.get() ---> 获取HTML、dom中的Element元素。  Ext.select() ---> 基于CSS来获取应用了该...

extjs Combox 调用数据

1方法一 从 json获取var typeStore = new Ext.data.Store({ proxy : new Ext.data.HttpProxy({url : ctx + '/cms/faqTypeListCombox.do'}), reader : new Ext.data.JsonReader({}, [ 'value', 'name' ]) // 显示的字段名,与服务器端返回的json中字段一致 }); new Ext.Panel({columnWidth : .2,layout : 'form',border : false,labelWidth : 58,labelAlign : 'right',it...

Extjs 4 生成饼状图的例子

前台://远程抄表设备下落图表数据 var Store1 = new Ext.data.Store({ <span style="white-space:pre"> </span>proxy:{ <span style="white-space:pre"> </span>type:'ajax', <span style="white-space:pre"> </span>url:'/newmaterial/servlet/GetCountChartGoDatas', <span style="white-space:pre"> </span>reader:{ <span style="white-space:pre"> </span>type:'array' <span style="white-space:pre"> </span>}...

【翻译】ExtJS vs AngularJS【图】

原文:ExtJS vs AngularJSExtJS和AngularJS是两个行业内率先的富界面开发框架。TechFerry有机会使用Ext JS和Angular JS来开发多个富界面的单页面应用程序。本文讲述的就是使用这两种技术来开发多个应用程序后的开发体验。本文环绕利弊、架构、測试、移动能力、性能、生成和部署等方面对Ext JS和Angular JS进行了超过30个以上的要点进行了比較。我们将通过使用Ext JS和Angular JS开发一个測试应用程序来了解架构细节,以便进行具体的...

Extjs resize too much recursion ,Extjs resize 无限循环

这个BUG,我不知道怎么去表达自己的心情,并不是所有浏览器都会再现,貌似和Extjs 自己的解析有关,同时也和自己的使用有关,看到确实有人在stockoverflow 上提到类似的BUG,但是一直没有correct的答案。突然走路的时候,想到,是不是因为高度的问题,回到公司重新写了resize 里面的内容解决:var panel= Ext.getCmp("XXXXX");panel.setWidth(你要的值);注意,我用了setWidth(); 代替了setSize();因为我在XXXXX同级的控件还有很多,...

Javascript - ExtJs - Itemselector【图】

引入扩展文件Extjs4.2根目录下:examples \ ux \ css \ images (这是选择按钮的图片资源)examples \ ux \ css \ ItemSelector.cssexamples \ ux \ form \ MultiSelect.jsexamples \ ux \ form \ ItemSelector.js 我是将以上文件取出来打包到我项目中自己创建的ux目录,没有全部使用ExtJs的包,然后引入以上文件:<script src="/ExtJs/ux/MultiSelect.js"></script><script src="/ExtJs/ux/ItemSelector.js"></script> <link h...

Extjs4 常用布局总结

1.anchor 固定布局 子组件尺寸相对于容器的尺寸,即父容器容器的大小发生变化时,使用anchor布局的组件会根据规定的规则重新渲染位置和大小( width:500,height:300, )。一般与布局column一起使用。设置相对于父容器的百分比。2.absolute 绝对布局 X/Y坐标定位3.accordion 手风琴布局 类似于QQ面板的好友分组4.border 边框布局 将容器分为 east south west north center 5部分5.card 卡片布局 类似于tabpanel c...

JQuery 与 ExtJS

最近做了一个小项目,以前觉得我无论如何也做不好前台的界面,不过这次做完了基本自己还是可以看得下去的,当然也经过了不少折磨,写程序就是这样,一个接着一个的解决问题。 由于这个项目比较小,前台的代码写的反而比后台多很多,JavaScript写了不少,要说使用框架,那是自然而然的事情。当你被繁复的JavaScript所折磨,就不得不去考虑代码的复用,模块化,把与业务无关的,只是与操作DOM相关的代码抽象出来。这样去想了之...

Extjs之表单提交

Extjs的三种提交方式:表单Ajax提交,普通提交,单独Ajax提交;表单Ajax提交(默认提交方式) 提交函数:当按下表单中的提交按钮时执行下面的 btn函数,按照表单的 name进行提交。 根据后台返回值不同回调success或者failure函数(与单独ajax提交不同)。 如果返回outputResult("{success:true}"),调用success函数, 如果返回outpu...

ExtJS 列表数据编辑【代码】【图】

在ExtJs中,GridPanel一般用于展示列表数据。同时利用一些附加的插件也能编辑数据。类似于asp.net中的DataGridView控件.展示数据比较简单,利用Store则可以自动展示,只要在服务器端将数据Json化即可;下面在Extjs中编辑列表数据一、单条编辑 单条数据的编辑利用了Ext.ux.grid.RowEditor插件达到目的var gridEditor = new Ext.ux.grid.RowEditor({ listeners: {‘canceledit‘: function () {var re = FieldGrid.getSelecti...

ExtJs 日期相加,Grid表格列可编辑

1、日期相加:Ext.Date.add(new Date(), Ext.Date.DAY, 15) 2、Grid表格列可编辑:{ header : "实际已交货量", tooltip : ‘实际已交货量‘, dataIndex : ‘actualQuantityDelivered‘, width : 100, editor : { xtype : ‘numberfield‘, maxLength : 100, allowNegative : false, allowDecimals : true, decimalPrecision : 4 }, sortable : true}{ header : "包装...

EXTJS on事件

http://www.iteye.com/problems/59467 on( String eventName, Function handler, [Object scope], [Object options] ) : void 给对象添加事件处理器 (addListener的简写形式) 给对象添加事件处理器 (addListener的简写形式。) 参数: eventName : String 监听的事件类型 handler : Function 事件调用的方法 scope : Object (可选)处理方法执行时的作用域 (this 的引用)。 如果被忽略。默认为触发事件的对象。 options : Objec...

extjs 组件

Ext.define(‘com.view.MyPanel‘, {extend : ‘Ext.panel.Panel‘,alias : ‘widget.MyPanel‘,height : 150,width : 170,layout : {align : ‘stretch‘,type : ‘vbox‘},title : ‘‘,config : {displayname_com : null,dislaystate_com : null,dislayproduct_com : null,dislaynum_com : null,displayname : null,dislaystate : null,dislayproduct : null,dislaynum : null},constructor : function(cfg) {var me = this;cfg...

extjs 数字校园-云资源平台 2013.11.2--视频资源播放【图】

顺势做了mp3资源播放器后,接力做了这个视频资源播放器播放资源库中视频资源等于有了校园视频点播服务器可以关键词检索视频原文:http://blog.csdn.net/olinbsoft/article/details/18922631

Extjs 关于列column 排序问题

当我们在使用column属性时,添加sortable:true属性,该列本身应该是可以手动点击排序的,即API中所示:sortable : Boolean (可选)设置为true,此列允许排序。默认值为Ext.grid.ColumnModel.defaultSortable属性值。无论是本地/远程使用排序都是在Ext.data.Store.remoteSort中指定。但有的时候排序会无效,可能是在定义Ext.data.Store时添加了属性remoteSort:true,导致排序无效,去掉该属性即可。原文:http://blog.csdn.net/y6300...

extjs4 treepanel 多个checkbox先中 多个节点选中 多级节点展开【代码】

//<%@ page contentType="text/html; charset=utf-8" %>var checkedNodes = {_data:{},update:function(id,text,checked){if(checked){this.add(id,text,checked);}else if(!checked){this.delById(id);}},clear:function(){for(var key in this._data){ delete this._data[key];}this._data = {};},add: function(id,text){if(!this._data[id]){this._data[id] = {‘id‘:id,‘text‘:text};}},delById:function(id){if(this._dat...

EXTJS 4.2 资料 控件之Grid 那些事【代码】

最近在学习Extjs4.2 ,积累文章,看得不错,再此留年: //表格数据最起码有列、数据、转换原始数据这3项 Ext.onReady(function(){ //定义列 var columns = [ {header:‘编号‘,dataIndex:‘id‘,width:50}, //sortable:true 可设置是否为该列进行排序 {header:‘名称‘,dataIndex:‘name‘,width:80}, {header:‘描述‘,dataIndex:‘descn‘,width:112}, {header:‘状态‘,dataIndex:‘status‘,width:80,renderer:function...

基于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...