EXTJS - 技术教程文章
jQuery与ExtJS之选择实例分析_jquery
Examples 下面是PHP中生成的表页： 代码如下: url(array(controller=>contact, action=>add));?>">Add new Contact Contact Address Phone Number Email contacts as $contact) { ?> escape($contact->name);?> escape($contact->address));?> escape($contact->phone_number);?> escape($contact->email);?> url(array(controller=>contact, action=>edit, id=>$contact->id));?>">Edit url(array(controller=>contact...
ExtJs表单提交登陆实现代码_extjs
1 在子类中添加单击提交事件 代码如下: //登陆按钮单击事件 loginFun: function() { var f = Ext.getCmp("loginForm"); //表单验证 if (f.form.isValid) { f.form.submit({ waitTitle: "请稍候", waitMsg: 正在登陆..., url: http://www.cnblogs.com/Service/SystemService/SystemService.ashx?Method=UserLogin, method: POST, success: function(form, action) { window.location = Main.htm }, failure: function(form, action...
ExtJs中简单的登录界面制作方法_extjs【图】
一 首先请看图片 二 登陆界面Ext代码 代码如下: /// //加载提示框 Ext.QuickTips.init(); //创建命名空间 Ext.namespace(XQH.ExtJs.Frame); //主应用程序 XQH.ExtJs.Frame.app = function() { } Ext.extend(XQH.ExtJs.Frame.app, Ext.util.Observable, { LoginLogo:new Ext.Panel({ id: loginLogo, height: 35, frame:true, bodyStyle:padding-top:4px, html:后台Ext框架 }), //登陆表单 LoginForm: new Ext.form.FormPanel({ id...
ExtJsGridPanel简单的增删改实现代码_extjs【图】
1.首先看下效果图： 2.ext代码 代码如下: /// Ext.namespace(XQH.ExtJs.Frame); XQH.ExtJs.Frame.RoleManage = function() { this.init(); }; Ext.extend(XQH.ExtJs.Frame.RoleManage, Ext.util.Observable, { init: function() { //表单 addForm = new Ext.form.FormPanel({ id: addRoleForm, width: 460, height: 250, //样式 bodyStyle: margin:5px 5px 5px 5px, frame: true, xtype: filedset, labelWidth: 60, items: [ { x...
extjsgrid设置某列背景颜色和字体颜色的方法_extjs
css代码： 代码如下: .x-grid-back-red { background: #FF0000; } js代码： 代码如下: { header : 分成类型, dataIndex : divideType, renderer : function(v,m){ m.css=x-grid-back-red; return v; }, width : 60 } 或者直接这样写也可以 代码如下: { header : 编号, dataIndex : fcId, css : background: #FF0000;, width : 40 } extjs grid设置某行字体颜色 css代码： 代码如下: .x-grid-record-red table{ color: #FF00...
Extjs中DisplayField的日期或者数字格式化扩展_extjs【代码】【图】
使用 Ext.form.FormPanel 来处理数据时候，某些字段是需要只读的。当然我们可以使用 Ext.form.TextField，然后设置成 ReadOnly，不过这样子的显示效果不是很好，因为始终会有个输入框。所以我们必须使用 Ext.form.DisplayField，但是 Ext.form.DisplayField 没有一个format的属性，也不具备 renderer 这个事件，比如日期字段 var form = new Ext.form.FormPanel({frame: true,renderTo: form-div,items: [{ xtype: displayfield, f...
extjsgrid设置某列背景颜色和字体颜色的实现方法_extjs
css代码： 代码如下: .x-grid-back-red { background: #FF0000; } js代码： 代码如下: { header : 分成类型, dataIndex : divideType, renderer : function(v,m){ m.css=x-grid-back-red; return v; }, width : 60 } 或者直接这样写也可以 代码如下: { header : 编号, dataIndex : fcId, css : background: #FF0000;, width : 40 } extjs grid设置某行字体颜色 css代码： 代码如下: .x-grid-record-red table{ color: #FF00...
ExtJs事件机制基本代码模型和流程解析_extjs【图】
代码实现的目的：为一个自定义的类的某个属性在使用它时候，触发某个事件。 该程序的效果：点击输入按钮，弹出一个脚本提示输入框让用户输入他的姓名，确定后，用户录入的姓名会显示在页面的姓名文本框中，并且页面标题变成和姓名一致，接着再弹出脚本提示输入框让用户输入性别，录入完毕并点击确定后，用户录入的性别将会显示在页面的性别文本框里。 代码如下: 事件 var _person = null ; //按钮点击后触发 button_c...
ExtJS入门_extjs
开始... 在ExtJS里最常用的,应该就是Ext.onReady这个方法了,而且它也可能是你学习ExtJS所接触的第一个方法,这个方法在当前的DOM加载完毕后自动调用,保证页面内的所有元素都能被Script所引用.可以尝试在这个方法中添加一条语句,看看页面打开后是什么反映: 代码如下: Ext.onReady(function() { alert(hello world!); }); 上面的代码将在页面加载完毕后弹出一对话框,打印出'hello world!'字样. 获取元素 还有一个常用的方法,就是获取...
入门基础学习ExtJS笔记（一）_extjs【图】
大致看了几天的书籍 查阅了API。头脑里也记不下多少，学习还是动手比较好。就试着开始写写： 首先：开始搭个 界面框架. 第一步当然是引用ExtJs的相关文件： 定义一个Ext.Viewport： 在items的属性里设置： 头部： 代码如下: { region: 'north', html: 'CRM管理系统', autoHeight: false, border: false, margins: '0 0 5 0' } 左侧的管理树： 代码如下: { region: 'west', collapsible: true, title: '管理菜单'...
Ext对基本类型的扩展ext,extjs,format_extjs
1. Array indexOf(Object o):Number 方法 remove(Object o):Array 方法 2. Date Javascript对日期时间的操作是不太方便的，而Ext在此基本上加入了比较多的扩展。比较重要的有： add(String interval,Number value):Date 方法 其中interval表示要加入的周期，有效的字符串为 ms--------表示毫秒 s-----------表示秒 mi---------表示分钟 h----------表示小时 d---------表示天 mo--------表示月 y---------表示年 这个方法是通过封装...
extjs之去除s.gif的影响_extjs
大家在调试 EXTJs的例子时，经常会去访问 http://extjs.com/s.gif ，如果一些不能访问国外网站的朋友（如：校园网，公司限制上网），就会等很久时间，虽然没有什么影响，但也但也非常不爽。 其实这一个总是很容易解决，只要在Ext.onReady()方法之前（或者方法的第一句）加上下面这一句代码就解决了！ Ext.BLANK_IMAGE_URL = "/js/Ext/resources/images/default/s.gif";
ExtJs的Date格式字符代码_extjs
Date类在ExtJs中提供的方法算是少的。但是，另外一方面，因为历史原因，现在Date无论在哪个语言里面，表征其格式变量的字母都很多。本节就着重讲解Date的日期格式表示。这些都是ExtJs API中的内容，如果有中文版的可以直接跳过这里了。如果需要继续看的，请注意，其中的格式字符时大小写敏感的。年Y 年的数字表示，4位数字，例如1999y 年的两位数字表示，例如99或03o ISO-8601年的数字表示（与Y相同，但是如果ISO周的数W属...
extjs中grid中嵌入动态combobox的应用_extjs
拿combobox的数据 代码如下: comboDS = new Ext.data.JsonStore({ url : test.do, fields : [{ name : id }, { name : display }] }); combobox定义 combobox 中的id必须要有，后面要跟据id取combobox值。 代码如下: var comboBox = new Ext.form.ComboBox({ id : "cb", //必须有 typeAhead : true, readOnly : true, allowBlank : false, autoScroll : true, selectOnFocus : true, emptyText : 请选择..., store : comboDS, f...
EXT窗口Window及对话框MessageBox_extjs【图】
看下面的代码： 代码如下: var i=0; function newWin(){ var win = new Ext.Window({ title:"窗口"+i++, width:400, height:300, maximizable:true }); win.show(); } Ext.onReady( function(){ Ext.get("btn").on("click",newWin); } ); 页面中的html内容： 执行上面的代码，当点击按钮“新窗口”的时候，会在页面中显示一个窗口，窗口标题为“窗口x”，窗口可以关闭，可以最大化，点击最大化按钮会最大化窗口，最大化的...
EXTJSFORMHIDDENTEXTFIELD赋值使用value不好用的问题_extjs
遇到一个很奇怪的问题，ExtJs里的form提交创建的时候从session里取了个操作员的ID，然后在form里添加了一个xtype为hidden的组件，给它写了个value，奇怪的就出现了，在其中的一条机器上做是没有问题，换了一个机器，说什么就是不能赋值上去，搞的我老郁闷了。用了一个方法解决了此问题，但是老是感觉这样解决了很不爽，各位有没有遇到过这种问题，请指点一下。 先说说我的解决方法 给hidden组件加个ID 然后在form提交的时候 触发个...
ExtJS4组件化编程，动态加载，面向对象，Direct_extjs【图】
ExtJS4推荐定义类的时候均使用Ext.define，利用xtype动态加载 修改了以前的一个登陆窗口，感觉用官方推荐的方法还是很不错的 但还有一些问题没有想得非常清楚，先把代码贴出来一起研究下。请看代码中的注释~~ 使用Ext+.Net，用Direct模式传递数据 Default.aspx: 代码如下: ExtJS学习 正在加载... //Ext.Loader.setConfig({ enabled: true }); Ext.onReady(function () { Ext.BLANK_IMAGE_URL = 'img/s.gif'; Ext....
Extjsgridpanel出现横向滚动条问题的解决方法_extjs
代码如下:viewConfig : { layout : function() { if (!this.mainBody) { return; // not rendered } var g = this.grid; var c = g.getGridEl(); var csize = c.getSize(true); var vw = csize.width; if (!g.hideHeaders && (vw < 20 || csize.height < 20)) { // display: // none? return; } if (g.autoHeight) { if (this.innerHd) { this.innerHd.style.width = (vw) + px; } } else { this.el.setSize(csize.width, csize.he...
ExtjsTimeField显示正常时间格式的代码_extjs
如果想正确显示，一般的方法都是改后台代码，使日期时间格式变为string返回，我解决的方法是重写TimeField 的setValue ，具体代码如下： 代码如下:Ext.override(Ext.form.TimeField, { getValue: function () { return this.value; }, setValue: function (v) { this.value = v; this.setRawValue(this.formatValue(v)); return this; }, formatValue: function (v) { if (v.length>8) { //timefield最大不超过8个 大于8个的肯定是...
ExtjsEditorGridPanel中ComboBox列的显示问题_extjs
为了解决这个问题需要在EditorGridPanel的ColumnModel中显示ComboBox的地方使用renderer属性，重新渲染，方法如下： 代码如下: //部门列表 var comboxDepartmentStore = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ url: "GetDepartmentJson.aspx", method: GET }), reader: new Ext.data.JsonReader({ root: data, totalProperty: totalCount, fields: [ { name: departmentid, mapping: ID }, { name: departmentnam...
EXTJS记事本当CompositeField遇上RowEditor_extjs
原因是客户的物料种类非常多，有一千种之多，如果单纯用一个Combobox，那么在实际使用中，很难快速找到一个物料，所以，我使用包含物料分类和物料品牌的两个combobox来组成级联式筛选。问题恰恰出在这儿，如果在roweditor的一个字段中用多个控件，就要处理每个控件的初始化，Change事件。网上目前还未找到有人有好的解决办法。经过3天的调试，我终于解决了问题，把我的代码贴出来： 代码如下: var editor=new Ext.ux.grid.RowEdit...
extjs初始化checkboxgroup值的代码_extjs
代码如下: Ext.override(Ext.form.CheckboxGroup,{ setValueForItem : function(val){ //多个选项值以逗号分开的 val = ","+val+"," this.items.each(function(item) { if (val.indexOf(item.inputValue) > -1) { item.setValue(true); } else { item.setValue(false); } }); } ,clearValueForItem:function(){ // 清空所有值 this.items.each(function(item) { item.setValue(false); }); } });
ExtJsExcel导出并下载IIS服务器端遇到的问题_extjs【图】
项目是Extjs的主要针对于Extjs GridPanel数据导出这块先做一下说明。 我们可以通过Ext.getcmp()方法获取到GridPanel对象并通过重写的方法获取Excel字符串具体方法可以百度到。这个应该也不是什么大问题。 代码如下: //输出报表 function ExportReport(title) { var vExportContent = Ext.getCmp("gridPanel").getExcelXml(null, title); if (Ext.isIE6 || Ext.isIE7 || Ext.isSafari || Ext.isSafari2 || Ext.isSafari3 || Ext.is...
extjs实现选择多表自定义查询功能前台部分(ext源码)_extjs【图】
主要使用的技术： 1、extjs2.0，整体框架 2、RemoteCheckboxGroup.js ，用于动态生成表字段（供查询结果使用） 3、Ext.ux.grid.RowActions.js，用于grid行扩展（上移下移删除等） 4、Datetime.js，用于时间选择 5、MetaGrid.js 用于动态生成查询结果列表（返回结果Grid） 6、ehcache 用于缓存自定表数据，比如表名称、字段描述、长度等固定信息 7、jxl.jar 用于查询结果输出，最后生成Excel文件 8、Java EditGridPanel主要代码如...
一个简单的Ext.XTemplate的实例代码_extjs【图】
把省份与城市以树的形式输出 代码如下: Ext.lib.Ajax.request( POST, /Index/mainIndex, { success: function (data) { data.responseText = "{pros:" + data.responseText + "}"; //获取后台回调的省份城市JSON格式数据 var response = Ext.util.JSON.decode(data.responseText); var province = new Ext.XTemplate( ,//遍历读取pros {id}--{text}, ,//遍历读取pros下的children {id}--{text}, , ); province.compile(); provin...
Extjs中使用extend(js继承)的代码_extjs
注：抄书 传统的js实现继承操作为： 一：定义一个父类 代码如下: var BaseClass = function(){ //..... }; BaseClass.prototype.someMethod = function(){ //..... }; BaseClass.prototype.overridenMethod = function(){ //.... } 为BaseClass定义两个函数someMethod 和overridenMethod ,,然后定义一个subClass子类，可以直接从BaseClass中继承所有的属性和函数， 代码如下: var subClass = function(){ BaseClass.call(this);...
解决Extjs上传图片无法预览的解决方法_extjs
代码如下: { width: 450, fileUpload: true, fieldLabel: 选择图片, items: [{ xtype: textfield, id: up_forth, name: up_forth, inputType: file, width: 300 }] } 预览box 代码如下: { columnWidth: .18, bodyStyle: margin:4px 10px 10px 5px, layout: form, items: [{ xtype: box, autoEl: { width: 150, height: 150, tag: div, id: browser_up_forth } }] } myfrom表示上传控件外围的FormPanel,, contril_id表示上传控件...
ExtJs使用总结(非常详细)_extjs
一、获取元素（Getting Elements） 1.Ext.get var el = Ext.get('myElementId');//获取元素，等同于document.getElementById('myElementId');//会缓存 2. Ext.fly var el = Ext.fly('myElementId')//不需要缓存。 注：享元模式（Flyweight Design Pattern）是一种节省内存的模式，该模式的大概原理是建立单个全体对象然后不断反复使用它。 3.Ext.getDom var elDom = Ext.getDom('elId'); // 依据id来查dom节点 var elDom1 = Ext.ge...
常用Extjs工具:Extjs.util.Format使用方法_extjs
抄些常用工具方便查找 ----------字符串 Ext.util.Format.capitalize(string str);//将首字母变大写 Ext.util.Format.ellipsis(string value, Number length);//截取指定length字符，将自动在尾处添加省略号'...' Ext.util.Format.htmlEncode(string value); //将文本编码 lowercase(string value);//变小写 stripScripts(Mixed value);//删除所有的Script标签 stripTags(Mixed value);//删除所有标签 substr(value, start, length...
Extjs中ComboBox加载并赋初值的实现方法_extjs
如： 代码如下: editCityStore.load({ params: { provinceID: proid }); Ext.getCmp(city-id-name).setValue(cityid); 由于是store是异步加载的，所以他会先赋值再填充值到ComboBox，，这里就需要用： 当加载完成后再进行赋值 : 代码如下: editCityStore.load({ params: { provinceID: proid }, callback: function () { //等待数据加载完成才进行赋值，不然由于异步会出现先赋值后加载完成。 Ext.getCmp(city-id-name).setValu...