EXTJS - 技术教程文章
extjsDataReader、JsonReader、XmlReader的构造方法_extjs
extjs3.0帮助文档： DataReader( Object meta, Array/Object recordType ) Create a new DataReader 参数: meta : Object Metadata configuration options (implementation-specific). 元数据配置选项(...-...) recordType : Array/Object Either an Array of Field definition objects 任意一个Field定义的对象数组 which will be passed to Ext.data.Record.create, 作为对象传递给Ext.data.Record.create, or a Record construc...
ExtJSWindow最小化的一种方法_extjs
下面是通过重新它的minimize函数来实现的一种最小化方法： HTML： 代码如下: 恢复 JS： 代码如下: function openWin() { if(!win) { win = new Ext.Window({ title:"弹出窗口", el:"divWin", width:500, height:300, constrain:true, maximizable:true, closeAction:hide, minimizable:true }); win.minimize = function(e) { this.hide(); Ext.get("aRestore").show(); } } win.show(Ext.get("btn")); Ext.get("aRestore").h...
ExtJS的FieldSet的column列布局_extjs
以下是自己扩展的FieldSet： 代码如下: ME.Base.FieldSet = Ext.extend(Ext.form.FieldSet, { layout: column, fieldSetItems: [], autoScroll:false, defaults: { layout: form, labelAlign: right, labelWidth: 65, columnWidth: .25, defaults: { anchor: 96% } }, initComponent: function(){ var thisItems = new Array(); var itemsLen = this.fieldSetItems.length; if(itemsLen > 0){ for (var i = 0; i < itemsLen; i++)...
ExtJSGrid使用SimpleStore、多选框的方法_extjs
代码如下:/// Ext.onReady(function(){ var data = [ [1,"wilson.fu",10], [2,"wilson.fu2",20], [3,"wilson.fu3",30] ]; var sqldata = new Array() ; for(var i=0;i<10;i++) { sqldata.push([i.toString(),"wilson.fu" + i.toString(),10*i]); } var sm = new Ext.grid.CheckboxSelectionModel({handleMouseDown:Ext.emptyFn}); var cm = new Ext.grid.ColumnModel([ sm, {header:"编号",dataIndex:"id",sortable:true}, {header...
extJs文本框后面加上说明文字+下拉列表选中值后触发事件_extjs
代码如下:var showForm; function panelShowForm() { showForm=null; showForm = new Ext.FormPanel({ renderTo:"showPanel", region:north, border:false, bodyBorder:false, frame:true, waitMsgTarget: true, labelAlign:right, id:"showForm", items:[{ layout:column, labelWidth:129, items:[ { columnWidth:.6, layout:form, items:{ name:"enable", hiddenName:"enable", fieldLabel:是否启用密码策略, xtype:combo, edita...
Exitjs获取DataView中图片文件名_extjs【图】
1、前台 代码如下: function aa() { var selNode = this.DataView1.getSelectedNodes()[0]; alert( selNode.id); } 2、后台 代码如下: protected void Page_Load(object sender, EventArgs e) { string path = Server.MapPath("images/thumbs"); string[] files = System.IO.Directory.GetFiles(path); List data = new List(files.Length); foreach (string fileName in files) { System.IO.FileInfo fi = new System.IO.Fil...
ExtJS下grid的一些属性说明_extjs
1.界面修改(css style)： Extjs中界面风格与我们产品本身的风格有很大不同，从边框、选中行的颜色到鼠标移动到的行的颜色、菜单等，几乎都不同。Extjs对这些样式的设置都是由css完成的。如： 选中行的颜色就可用如下设置完成： .x-grid3-row-selected{background:#c6e2ff!important;} 其他的都类似，只要找到对应的class, 然后设置要修改的部分即可。 2. 属性的作用(About Ext.grid. GroupingView, EditorGridPanel): Extjs的grid功...
extJs常用到的增，删，改，查操作代码_extjs
代码如下: extJs中常用到的增删改查操作的示例代码 /** * 作 者： 花 慧 * 时 间： 2009年12月22日 * 内 容： extJs中常用到的增，删，改，查操作 */ //设置每页显示的行数默认为10 var QUERY_PAGE_SIZE = 10; /** * SearchQueryForm():绘制查询表单 */ function searchQueryForm(...
Extjs学习笔记之三extjsform更多的表单项_extjs【图】
1.日期选择框，DateField 日期选择框在日常项目中被广泛应用，一个方便的日期输入机制能够极大的提高用户体验。Extjs的DateField非常友好灵活强大。可以通过如下代码新建一个日期选择框： 代码如下: new Ext.form.DateField({ id: diliveryDate, format: Y年m月d日, maxValue: new Date(), minValue: 1900-01-01, disabledDays: [0, 6], disabledDaysText: 禁止选择该日期, fieldLabel: 选择日期, width:200, showToday:false }) ...
Extjs学习笔记之二初识Extjs之Form_extjs【图】
Extjs中的表单组件是Ext.form.BasicForm，不过最简单最常用的是Ext.form.FormPanel控件，它继承自Panel，具有一定的界面显示控制能力，它其中包含着一个BasicForm对象，用来执行向服务器提交，加载等动作。Extjs也对常用的html表单项进行了封装，提供了一些额外的功能，比如数据验证。实际使用的时候只要向FormPanel中添加这些表单项即可。常见的表单项有，TextField，NumberField,Radio,CheckBox等。 下面通过一个例子来介绍基本F...
Extjs学习笔记之一初识Extjs之MessageBox_extjs【图】
在其中新建一个my目录，以后所有的样例文件都新建在这个目录中。1.Hello world! 先看一个Extjs版的Hello World网页的全部代码： 代码如下: Extjs MessageBox Ext.BLANK_IMAGE_URL = '../resources/images/default/s.gif'; Ext.onReady(function() { Ext.MessageBox.alert('Hello', 'Hello world'); }); 运行下，结果如下： 注意上面引入js文件的顺序不能颠倒，否则不能得到正确的结果。2.Ext.MessageBox Ext.MessageB...
Extjs学习笔记之五一个小细节renderTo和applyTo的区别_extjs【图】
ExtJS中的renderTo和applyTo的差别 对applyTo和renderTo的理解和思考个人认为这两篇文章写的不够通俗。写一个简单的例子来看看最终生成了什么代码， 代码如下: RenderTo and ApplyTo Ext.onReady(function() { var button = new Ext.Button({ renderTo: 'button', text:'OK' }); }); sadfa 此代码生成的html如下： 如果是applyTo:button，则生成的代码为：很明显，简单的说，applyTo是将组件加在了指定元素之后，而r...
Extjs学习笔记之六面版_extjs【图】
Extjs为我们封装好了Panel，Panel具有统一的标题头，面板体，面板底部，还可以自由的添加工具栏等。另外，extjs中还有丰富的布局，可以用来布局Panel。这种方式很像Java的Swing. Panel可以嵌套，可以作为整个页面的框架，也可以作为一个小功能区。前几篇文中用到的FormPanel就是继承自Panel类的。 下面的例子展示了一个较为完整的Panel,主要是设置工具栏： 代码如下: Extjs Combobox 输出的html代码，这些输出的代码都由我们自...
EXT中xtype的含义分析_extjs
序言 根据我在论坛上的观察，xtype用起来的时候疑惑会比较多。甚至有些人根本忽略xtype，或者不清楚它是什么。所以我决定阐述一下这个xtype的概念。 定义 xtype就是一个代表类（Class）的标识名字。 譬如，你有这个类，名字是Ext.ux.MyGrid。正常情况下你需要用这个名字来实例化这个类（创建类的对象）。 除了类名外，你还可以这样登记类的xtype： Ext.reg('mygrid', Ext.ux.MyGrid); 其中xtype 是 mygrid 而类名的一般形式是Ext.u...
Extjs学习笔记之四工具栏和菜单_extjs【图】
ToolBar的使用很简单，关键是向ToolBar上面添加内容，默认地ToolBar添加的是Button，不过实际上可以向Toolbar添加任意的组件。下面是一个例子： 代码如下: Ext.onReady(function() { var tb = new Ext.Toolbar({ renderTo: document.body, width: 600, height: 100, items: [ { // xtype: 'button', // default for Toolbars, same as 'tbbutton' text: 'Button' }, { xtype: 'splitbutton', // same as 'tbsplitbutton' text: '...
ExtjsTriggerField在弹出窗口显示不出问题的解决方法_extjs
一、原因分析 this.WinData.AutoLoad.Mode = LoadMode.IFrame; WinData.AnimateTarget = "BtnEdit"; PHWin.Controls.Add(WinData); 使用PlaceHolder让窗口弹出具有动画效果 二、解决方案 this.WinData.AutoLoad.Mode = LoadMode.IFrame; 去掉动画效果即可
Extjs学习笔记之八继承和事件基础_extjs
这里接口的意思是Observable实际上起了一个抽象类的作用，Extjs中有大量的组件都是继承自这个类的。这个类提供了一些基本的方法比如addEvents，addlistener,fireEvent等等。本文暂时不介绍如何使用extjs的组件响应事件，而是介绍Extjs的事件的一些实现原理。整个Extjs框架都是以一种面向对象的方式开发的，所以理解Javascript中的继承也很重要。我前面的一篇文章 补点基础：Javascript中的类和闭包 也是为这篇做准备。另外，博客园...
Extjs学习笔记之七布局_extjs
Extjs Layout Browser . Extjs3.1.0 版本支持17种，下面挑一些重要的简要的说明一下，要看效果，去上面给的链接，不再贴图了。给Panel设置Layout的方法是一样的，就是设置Panel的Layout配置项。1. AbsoluteLayout 可以通过Panel内部组件的决定位置来布局。通过x,y来指定。 示例用法： 代码如下: new Ext.Panel({ layout: absolute, title: AbsuluteLayout, renderTo: document.body, frame: true, defaultType: textfield, width:...
Extjs学习笔记之九数据模型(上）_extjs【图】
Extjs的数据模型分为以下几个部分： 数据记录 Record 数据集合中的一个条记录，包括数据的定义和值。相当于实体类。 数据代理 Proxy 用来获取数据的代理。相当于Datasource。 数据解析器 DataReader 负责将Proxy获取的数据解析出来传换成Record并存入Store中。相当于C#的DataReader。 数据集 Store 一个保存数据的集合，类似于C#的Datatable。 Extjs3的Proxy较以前版本有了一些变动，资料很少，而且官方文档上相当简练，以至于一个...
extjs为某个事件设置拦截器_extjs【图】
我们先来自定义一个事件： 代码如下: person = function(name) { this.name = name; this.addEvents("walk"); } Ext.extend(person, Ext.util.Observable, { info: function(event) { return this.name + is + event + ing.; } }); var person = new person(张铭诺); person.on(walk, function() { Ext.Msg.alert(event, person.name + 在走啊走啊。); }); 然后我们再定义一个按钮用来触发这个walk事件： 代码如下: var btn = n...
Extjs几个方法的讨论_extjs
相信大家在做Extjs开发的时候都使用过类似下面的代码： 代码如下: var form_pz = new Ext.form.FormPanel({ id: "form_pz", region: "center", labelAlign: "right", lazyRender: true, frame: true, items: [{ xtype: "combo", fieldLabel: "产品名称", id: "CPMC", allowBlank: false, store: new Ext.data.SimpleStore({//store的定义}), displayField: "CPMC_BBH", valueField: "ID", anchor: "100%", mode: "...
ExtJs3.1XmlTreeLoaderExampleError_extjs
前言 关键字：ExtJs 3.1 XmlTreeLoader Example Error,XmlTreeLoader 错误,TreePanel ErrorExtJs 3.1的XmlTreeLoader例子折腾了我近一个下午加晚上，官方的例子没有问题，可以加载xml的数据，本地IIS死活不行，也不报错，直接查看官方的代码也是一模一样的，今早意外给让我搜到了，不是在官方，而是在貌似一个韩国的博客里面找到的，致敬一下，本文且做其简单中文"译"本。 原文 http://javarush.com/entry/ExtJS-XmlTreeLoad...
Extjs学习过程中新手容易碰到的低级错误积累_extjs【图】
1.下载extjs的安装包，里面没有.msi文件，看好多的安装方法说都有这个.msi文件，但是我在官方下载的解压缩后没有，以为不能用。说明一下，我用的开发工具是visualstudio 2008，其实根本不用安装，直接解压缩后放到创建的网站项目的目录下，然后再也页面添加extjs的引用就行啦。 2.extjs的引用的错误。 注意这里的顺序，一定要把ext-base放在ext-all的前面，否则虽然不报错误，但是你的页面预期的效果是不会有的。 3. 这样的错误...
extcombox下拉框不出现自动提示,自动选中的解决方法_extjs
看代码 代码如下: var comboxContractType = new Ext.form.ComboBox({ name:logisticsId, fieldLabel:物流公司, displayField:logisticsName, valueField:logisticsId, emptyText:请选择, width:330, editable:true, allowBlank:false, mode:local, loadingText:loading..., hiddenName:logisticsId, //pageSize:10, selectOnFocus: true, triggerAction:all, store:comboxContractTypeStore = new Ext.data.JsonStore({ url:/pcm...
ExtJS工具栏分页事件参数_extjs
例如:载入第一页的时候 代码: 代码如下: store.load({params:{start:0,limit:pageSize,Keyword:Ext.getCmp(input_name).getValue()}}); 当单击下一页(上一页)时带参数 代码如下: doLoad : function(start){ record_start = start; var o = {}, pn = this.paramNames; o[pn.start] = start; o[pn.limit] = this.pageSize; var Keyword=Ext.getCmp(input_name).getValue(); //获取参数 o[Keyword] = Keyword ;//参数写入 this.sto...
ExtJSGridPanel根据条件改变字体颜色_extjs【图】
1、在GridPanel中加入GridView 代码如下: 2、加入js脚本 代码如下: function setRowBg(rd, ri, ro) { var zhb,lj,xzh; zhb=rd.data.zhb; lj=rd.data.lj xzh=rd.data.xzh; if (xzh=="正向") { if (zhb>lj) { ro.tstyle = "color: #F57D02; "; } else { ro.tstyle = "background-color:none;"; } } if (xzh=="反向") { if (zhb{ ro.tstyle = "color: #FFE37E; "; } else { ro.tstyle = "background-color:none;"; } } } Ja...
ExtJs之带图片的下拉列表框插件_extjs【图】
在ExtJs的官方网站上有一个带图片的下拉列表，其中扩展了ExtJs的Combo，名称叫做IconCombox，官方地址为： http://www.extjs.com/learn/Tutorial:Extending_Ext_Class_Chinese 但是这个IconComboBox有个缺点，就是显示的图片不能按比例变化。如果图片太大，就会出现覆盖了Combobox中的字，或者出现Icon显示不全种种问题，后来读了IconComboBox的源代码，修改了其中的问题： 在Ext.ux.IconCombo.js这个文件中： 代码如下...
ExtJs扩展之GroupPropertyGrid代码_extjs【图】
ExtJs本身就提供了丰富的空间和良好的界面开发，就如同WinForm的开发一样。但是ExtJs的空间也有不完美的地方，但是有缺点也有他自己的弥补方法。ExtJs的良好的扩展性就是ExtJs自己控件不能实现的最好的方法。 这几个中使用最多的当属ExtJs的PropertyGrid，ExtJs的PropertyGrid使用起来时相当简单的，在ExtJs的官方网站上也有相应的例子，简单的就不在叙述了。但是ExtJs本身的PropertyGrid不能支持分组，在显示的不能将属性进行分组...
ExtJs3.0中Store添加baseParams的Bug_extjs
代码如下: this.store.on(beforeload, function() { Ext.apply(Ext.getCmp("propTypeGrid").store.baseParams, { 参数1: 111, 参数2: 111 }); }); 但是在 3.0 中这样无法增加参数，于是在 ExtJs官方论坛上找到了解决方案： 代码如下: this.store.on(beforeload, function(store,options) { var new_params={参数1: 111, 参数2: 111 }; Ext.apply(options.params,new_params); }); 最后发现 Ext更新到 3.1.1了，在3.1.1中已经修复...
extjs的权限问题要求控制的对象是菜单，按钮，URL
解题思路1 ： http://www.gxlcms.com/wiki/197.html" target="_blank">重载Connection类 由于extjs和server端交互全都是 json格式的数据交互，server端不会控制页面的跳转，页面跳转，提示功能全都有extjs来完成。 extjs和server端的交互方法全都是继承自 Ext.data.Connection,这个类中可以拦截所有和server端交互的方法。 server端的权限控制用acegi做的，如果没通过acegi的验证，没有授权会返回到403.jsp,需要重登录会返回到 log...