随笔分类 - extjs
摘要：在web显示数据时，会遇到grid的列数和行数不确定的这种情况。如何来根据数据动态的创建表格呢？Extjs 的json data给我们带来了一个很好的比较简单的方法。 要创建一个grid需要确定它的列数，再根据数据的数量就可以确定行数了。 看到有人用过一种方法就是讲列的属性和数据一起放在json data里去，这样可以达到效果，但是不难发现，这样的话，就很难进行分页或者更新表格里的数据。 其实我们可以结合extjs官网上的那种固定列数的访问方法来动态生成表格。 首先通过Ajax从服务端反回列的信息，封装成json ,表格数据通过另一个ajax请求来获得，因为列已经获得，所以可以将此封装成一个.
阅读全文
摘要：为了在发起某一事件后，阻止用户对界面的进行操作，可以使用ExtJS提供的针对Ext.Element的mask和unmask 例如： 1、对整个body操作 Java代码 functionreLoadData(){ Ext.getBody().mask("数据重新加载中，请稍等"); varrequestConfig={ url:'#',//url可以根据需要设置 callback:function(options,success,response){ varmsg=["",,"\n","",resp
阅读全文
摘要：1. 需求说明：在domino开发中我们经常会遇到表单上需要一个类似table的组件，你可以增删改等。比如我有一个张报核单据，上面需要详细列出每项金额的明细，我们先看完成后的效果：上面的图就是我用extjs完成的。2. 功能介绍这个grid组件可以完成增加，删除，插入，修改，排序等功能。每项功能的操作都只是针对grid，不需要额外的FormPanel。双击单元格就可以修改。3. 如何使用这个组件我做的尽可能通用，由于是专门为domino平台定制，grid中的数据均存储在notes的多值域中。使用这个gird组件，你需要提供以下几个数组：（1）：多值域名的数组(第一列对应的序号多值域的名字必须为
阅读全文
摘要：不要问我为什么这么做，也不要问EXTJS的问题，也不要怀疑EXTJS的性能问题。自己分析自己看。代码写得不好或不规范，留个言指出一下。3Q下载地址：http://download.csdn.net/source/951199放入至DATA目录下，签名。EXTJS:放入domino\html\ext目录下访问地址：http://localhost/pro_ppm.nsf/index.html?readform
阅读全文
摘要：XTemplate是Extjs里面的模板组件.下面我们看个最简单的例子.效果图:js代码:Ext.onReady(function(){ //数据源 var data={ name:"博客园", read:[{ book:'<<道不远人>>', date:'2007-7-7' },{ book:"<<大话设计模式>>", date:"2006-6-6" }] } //呈现组件 var mypa
阅读全文
摘要：JS的Ext库中用到现在唯一感到用的很爽的就是template，实在是ajax数据前台显示的利器,jQuery没有类似该对象实在是遗憾，虽然有第三方实现，但表现不如人意，还要引入大小不菲的js文件。首先要提下Xtemplate，它其实比template更高级，更强大，可以实现部分逻辑，包括循环、判断等。但是用到它则必须引入ext-all.js，500kb的庞然大物，我一般只会用ext-core.js，为了一个对象引入500kb的文件，以现在中土网络条件来看是非常不可取的。包括用ext来显示ui组件，也并不可取。其实大部分的功能在用template就能解决，无需Xtemplate出马。templ
阅读全文
摘要：上一篇说到,模板值有两种定义形式,可以是数组,也可以是JSON对象,先来看看这两种不同定义的实现吧. 1.模板值以数组形式提供: 2.模板值以JSON对象格式提供: 上面两种方式的运行结果都是一样的: 问题深入:从了解Ext.Template到现在,你可能会有这样的想法和尝试--如何在上面这个模板中追加更多的记录? 尝试一:多次使用append方法 运行结果: 发现虽然也实现了追加两条记录,但表头也出现了两次,显然是尝试失败的. 尝试二: 运行结果: 结果是一条记录也没有追加到模板中去,再次尝试失败.那是不是就没有办法实现了呢?当然不是,否则ExtJS中有一个模板类就毫无意义了.
阅读全文
摘要：Template类主要是功能是生产html片断,例var t = new Ext.Template( '<div name="{id}">', '<span class="{cls}">{name:trim} {value:ellipsis(10)}</span>', '</div>');t.append('some-element', {id: 'myid', c
阅读全文
摘要：DomHelper和Template动态生成html 用dom生成html元素一直是头疼的事情，以前都是听springside的教导，使用jsTemplate和Scriptaculous的组合。现在到了ext里面，我们就来看看它自己的实现。 DomHelper用来生成小片段 使用DomHelper非常灵活，超简单就可以生成各种html片段，遇到复杂情况也要依靠于它。 大概就是这么用 var list = Ext.DomHelper.append('parent', {tag: 'div', cls: 'red'}); 它就是向id=parent这个元素里，添加一个div元素。 按照文档里讲的，
阅读全文
摘要：XTemplate是Extjs里面的模板组件.下面我们看个最简单的例子.效果图:附件: XtemplateData Demo.gif js代码: Ext.onReady(function(){ //数据源 var data={ name:"博客园", read:[{ book:'道不远人', date:'2007-7-7' },{ book:"大话设计模式", date:"2006-6-6" }] } //呈现组件 var mypanel=new Ext.Panel({ width:400, id:"mypanel", title:"XtemplateData简单示例
阅读全文
摘要：今天我们接着深入解析表单元素中ComboBox组件的使用。会涉及到.net简单服务器数据交互，但暂不做深入讨论，以后会详细分析服务器交互相关，不过可能要等较长一段时间，呵呵！5.服务器数据作为ComboBox的数据源实例首先从服务器获取json数据：//cs后台代码，简单起见，示例而已，要主要字符串格式(新手注意，下面的代码放在类里面，不是放在方法里)publicstringServerData="['湖北','江西','安徽']";//aspx前台js介绍代码Ext.onReady(function(){varcombo=newExt.form.ComboBox({store:%=Serv
阅读全文
摘要：Ext.onReady(function(){ Ext.onReady(function(){ //定义模板 使用标签tpl和操作符for var tpl1 = new Ext.XTemplate( 'table border=1 cellpadding=0 cellspacing = 0', 'trtd width=90 姓名/tdtd width=90 年龄/td/tr', 'tpl for="."', 'trtd{name}/tdtd{age}/td/tr', '/tpl', '/table' ); //通过自定义格式
阅读全文
摘要：//way1//itworks varframe1=document.createElement("IFRAME"); frame1.id="frame1"; frame1.frameBorder=0; frame1.src="reports/empty-report.html"; frame1.height="100%"; frame1.width="100%"; varpanel2=newExt.Panel({ id:"panel2", items:[frame1] //contentEl:"frame1"//thiswon'twork }); //way2//itworks,too
阅读全文
摘要：Js代码 Ext.onReady(function(){ Ext.onReady(function(){ //定义模板 使用标签tpl和操作符for var tpl1 = new Ext.XTemplate( 'table border=1 cellpadding=0 cellspacing = 0', 'trtd width=90 姓名/tdtd width=90 年龄/td/tr', 'tpl for="."', 'trtd{name}/tdtd{age}/td/tr', '/tpl', '/table' ); //通过
阅读全文
摘要：Ext.form.TextField组件的基本用法:form id="form1" runat="server"divdiv id="Bind_TextField"/divbr /div id="Bind_Button"/divscript type="text/javascript"//这里是把TextField很重要的属性列出来 实际在应用的时候不需要将每个属性都列出 也许只需要一个属性就够了。function ready(){Ext.QuickTips.init();var textfieldName = new Ext.form.TextField({i
阅读全文
摘要：1.增加script属性，如：varn=this.add({ id:node.id, closable:true, //通过autoLoad属性载入目标页,如果要用到脚本,必须加上scripts属性 autoLoad:{ url:"info.aspx", scripts:true} }); this.setActiveTab(n); 2.不能在被加载的页面上加!-- //--符号，否则不能正确截析javascript代码。3.若被加载页面含有ext代码时注意不能和加载的页面引入相同的包。如页面index.jsp加载页面portal.jap，index.jsp中引入了script type
阅读全文
摘要：刚刚学习EXT，感觉布局有点麻烦，记录下:在网上找到的，可惜解决了之后才发现的：第一次用Extjs的column布局时遇见了很多问题，记录下来，供大家参考。column布局时常会碰见label不能显示或者控件显示错位等问题，导致这些问题的常见原因如下：1.formPanel上的控件显示不出来，控件的宽度太大，formpanel的宽度相对太小导致。2.为FormPanel设定了defaultType属性，没有为每个控件单独制定xtype属性。正确的做法是不设置defaultType。3.在每个column里再加上form layout，再在form里加textfield。4.在新建TabPane
阅读全文
摘要：事件触发机制l 给某一个控件添加事件。obj.addEvents( {search : true });l 给某一个事件添加处理函数n 给一个对象或变量添加监听及对应得处理，可以在创建时，通过属性listener添加。n 或者通过 obj.on(‘event’,function(){})n 或者通过obj.addListener(“event”,function)l 出发一个事件，params是要传给事件对应的处理函数的参数Obj.fireEvent(‘eventName’,params)工具栏获取工具栏元素方法var items = this.preview.topToolbar.items
阅读全文
摘要：很多人都苦恼怎么在ext中给window动态添加组件（注意！我说的动态是指从数据库里读出来添加），今天我发明了一种前无古人后无来者的方法解决了这个问题，不多说，直接上码：var addButton = function(){Ext.Ajax.request({url : "personal/PersonalMessage.action?method=getPeople&pid=0",success : function(o){var res = Ext.util.JSON.decode(o.responseText);var showNum=res[0].showNum;var itemArr
阅读全文
摘要：extpanel移除item失效的解决办法在form中使用remove 移除item的时候，会留下他的html标签label，为了解决这个问题在网上搜了一下。方法为：//解决form中remove 一个field 时，fieldLabel不能被删除的问题Ext.override(Ext.layout.FormLayout, { renderItem : function(c, position, target){ if(c && !c.rendered && c.isFormField && c.inputType != 'hidden'){ var args = [ c.id, c.fiel
阅读全文