2008年03月16日

最近在学习extjs,挺复杂,功能太强了,可能还是入门级的缘故。其中想实现一个表格(Grid),并且有添加,删除之类的功能。网上有不少比较全面的代码示例,如这里这里。我使用了CheckboxSelectionModel,其中看到示例代码:

grid.selModel.selections.keys

可以得到选中行的id,可是在哪里设置呢?看了半天,后来才找到原来需要在reader类中,指定id对应的字段名才可以。这下就行了。

还遇到一个问题就是,使用autoExpandColumn时一定要设置相应的column的id属性,不然会报错,好象还可以使用数字。

2007年08月06日

最早知道jquery-ui项目是在jquery的1.1.3版本发布的声明上提到正在由Paul, Sean开发的一个ui方面的新项目,我想它的最终目的是形成一个与dojo, ext相类似的以界面为主的项目,它将替代现有的interface。于是我订阅了它的邮件列表,里面人到是不多,我也没有发过言,因为平时的精力不在javascript上。

今天看到John Resig打算发布ui项目了,他列出了一个发布计划:

Sunday August 10th: Feature list deadline.
Beyond this point, no more feature additions will be added to the list
of features in the jQuery UI release, anything past this point will
have to be held off until a future time. Only items that are claimed
by a dedicated author will be kept.

Sunday August 26th: Feature freeze
Any feature on the list that is not 100% complete, at this point, will
not be included in the jQuery UI release. (This also includes themes –
but they should also be fully usable and documented by this point.)

Friday August 31st: Documentation/Demo freeze
Any feature that does not have it’s full API documented, and demos
implemented and skinned, at this point will not be included in the
jQuery UI release.

Monday September 3rd: jQuery 1.2 & jQuery UI Release
This will be a simultaneous release, done together to best handle the
resulting press.

9月3日将与jQuery 1.2一起发布。从上面的发布要求来看,John对于文档的要求是非常高的,我想这一点可能是非常重要的,也是jQuery非常棒的一个原因。

而Paul很赞同这个决定,列出了最优化要固化的内容:

1.) Themeing
2.) UI Box
3.) Mouse interaction plugins (excluding Sortables, since no other widgets are based on Sortables)
4.) UI Core API (helper functions, structural functions)

的确有不错的功能,期待中。。。

2007年04月19日

今天在Ajaxian上看到一篇Blog说是使用js来实现圆角矩形的效果,地址是Corner.js。它的使用很简单,只要引入了Corner.js,然后在再处理的图片上使用相应的class属性值就行了。而它又是从Reflection获得的灵感。我没有具体看代码,看介绍Reflection是通过Canvas来处理的。Reflection可以实现倒影效果,许多web 2.0的Logo都是这样的。而且在FF和IE下我试了没有问题。但是Corner.js只能在FF下有效果,不知道以后的版本如何。挺有意思的东西。

2007年04月10日

dean开发的javascript packer是用在jquery相关项目中最多的packer了。现在是3.0。它是一个web工具,可以在线进行压缩。它的使用很简单:

  1. 进入网站
  2. 粘贴要压缩的代码
  3. 执行pack

它还有几个选项:Base62 encode和Shrink variables。如果这两个选项不选的话,只是去掉多余的空格,换行,注释之类的。如果选择Base62 encode基本上就不可读了。如果选择Shrink variables可以压缩变量,具体它是如何做的我不清楚,不过体积的确会变小。不过在我压缩jquery.jform.js时,在测试中发现原本应该是ajax的POST方式提交的结果变成了GET方式,太奇怪了。如果换成不压缩的版本就没有问题。因此定位是这个packer的问题。于是我没有选中Base62 encode,而只是选中了Shrink variables,发现在$.ajax的参数中,原本为type的给变成了typf,当我中选中Base62 encode,但没有选中Shrink variables后,一切正常。所以我的第一个建议是:

当运行出错时,去掉Shrink variables试试。

另外我的第二个建议是:每个函数后面一定要有分号(‘;’),每个语句后面如果不是大括号括起来的,一定要有分号。不然在运行时会说是少分号,很麻烦。

现在OpenbookPlatform中的许多js代码我都进行了压缩,甚至把一些常用的放到了一个full.js文件中,这样可以减少文件读取次数,从而提高效率。

Form生成说简单也简单,说复杂也复杂。虽然我宁肯手工来生成Form代码,但是不停地重复,还不方便维护的确不是我喜欢的,于是我想能不能使用Js来简化Form的生成。于是我写了一个jquery.formbuilder.js的插件,目前在FF下测试基本没有什么问题,但是在IE下有问题,因为没有安装vs.net(没有版本)工具,所以无法调试,先不管它了。

代码目前放在 OpenbookPlatform 项目中,在media/js/jquery.formbuilder.js中。

调用示例:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jbasicext.pack.js"></script>
<script type="text/javascript" src="jquery.formbuilder.js"></script>
<script type="text/javascript">
$().ready(function(){
    var form = $(‘#test’).formbuilder({layout:’table’});
    form.add(form.Line(form.Label(‘Text Field’), form.Text({name:’text’,value:’text field’})));
    form.add(form.Line(form.Label(‘Password Field’), form.Password({name:’password’,value:’password field’})));
    form.add(form.Line(form.Label(‘Select field’), form.Select({name:’select’,value:[3],options:[{value:1},{value:2},{value:3},{value:4}]})));
    form.add(form.Line(form.Label(‘Textarea field’), form.Textarea({name:’textarea’,value:’This is a textarea field’})));
});
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>

$(‘#test’).formbuilder({layout:’table’});这样将创建一个FB的对象,它拥有创建相关输入元素的方法。它可以接受一个hash参数(可以缺省),主要有:

layout:可选值为simple,则生成的form形为<label>message</label><input type="text" name="field"/>,当layout为table,则使用表格进行封装,形式为<table><tbody><tr><td><label>message</label><input type="text" name="field"/></td></tr></tbody></table>。缺省为simple。

multipart:缺省为false。当为true时,form元素属性会增加enctype="multiparts/form-data",这样可以用来上传带文件的表格。

action:缺省为""。应为提交对应的url。

method:缺省为"POST"。

除上述属性外,还可以自已增加其它的属性,如:class,id等。

formbuilder将返回一个FB对象,它有两个属性:form和o。form为生成的form元素,因此你可以直接使用它进行处理。o为参数,主要为:layout和target。layout是从formbuilder中得到的。而target根据layout的不同而变化。当layout为simple时,target为form。当layout为table时,target为tbody。

返回的FB对象有许多的方法,如创建输入元素的方法:

Input用来创建通用Input元素。还有一些是创建特殊输入元素,如:Text,Password,Checkbox,Radio,Select,Textarea,File,Hidden,Button,Submit,Reset等。

对于Input方法需要两个参数,第一个为生成tag的名字,如:text,第二个为这个标签的属性。而特殊输入元素则只需要一个参数,就是元素的属性。有些是有特殊处理的,如:textarea,它的value属性将放在<textare>标签中。对于select也特殊一些,它的value是一个数组,如示例所示。同时有一个options的属性,表示它的可选项。options是一个数组,它的值是一个hash值,如果只有一个value,则每个option的显示信息与value相同。否则需要有:value和text两个属性。如果select的某个value与某个option的值相等,则这个option将被选中。

如果要创建label需要使用Label方法。

生成的Input元素和Label元素不会自动加入到form中。你需要通过add方法将其加入。add方法可以允许有多个参数。同时formbuilder还提供了一个Line的方法,用于与layout参数对应,是生成用<p>封装的行或使用<tr>封装的行。所以添加一行的代码是:

form.add(form.Line(form.Label(‘Text Field’), form.Text({name:’text’,value:’text field’})));

这个插件需要jquery.jbasicext.js插件(在openbookplatform)中也可以找到。

此插件还在完善中,有什么意见或者帮助我解决ie下的问题欢迎与我交流。

2007年03月19日

这几天在学着做一个对话框,我使用的是jqModal为基础,它已经提供了显示和拖拽的基本功能(拖拽要使用jqRnD)。它的优势是代码简单,不过功能还是有限。比如拖拽,你无法限定它的最小和最大的尺寸。另外jqModal没有提供太好看的对话框效果,它只是一个框架,如果生成对话框基本上要靠你自已去写html代码和css加上图片。当然这足够灵活,也容易使用。于是我用它写了一个对话框,功能有限,有些东西是从yui-ext学来的(对我来说主要是一些css和图片了)。

那么在处理中有一个问题,在开始时我要计算一个元素的大小,然后进行调整它内部元素的大小。那么问题就来了。这个元素就是对话框div,在开始时是不显示的,计算的时候根本不对,而一旦显示计算出来的才是对的。那么这个问题如何解决呢?我看到过在interface ifx.js模块中有一段处理:

 if (t.css(‘display’) == ‘none’) {
  oldVisibility = t.css(‘visibility’);
  t.css(‘visibility’, ‘hidden’).show();
  restoreStyle = true;
 }

可以看出这里有一个技巧,它先把visibility改为’hidden’,这样这个元素是不可见的,然后执行show(),其实是修改了display为’block’。真是很有趣,两个用于显示的元素,作用不同,正好可以利用这一点来:虽然元素不可见,但是可以让它在内存中显示出来,在计算出正确的位置后,再隐藏它,然后恢复visibility为原来的值。

在ifx.js中你可以找到更全的代码。而取得宽度和高度的方法我是使用了dimensions.js来计算的。

2007年02月28日

详情见这里

是一个bug-fix版本。

2007年02月25日

Ext 1.0 alpha 2 已经发布,它既可以基于yui也可以基于jQuery了。下载包大概有2M多。里面有一个doc目录,双击index.html可以运行,去试验它其中的例子。效果真是不错,它可以动态切换Theme,并且可以动态切换是使用yui还是jQuery。不过我照着examples中的Hello world那个对话框的例子改了一下,CSS好象有问题,没有再研究是怎么回事。从整体看来EXT还是自成体系,不符合jQuery的使用方式。

2007年02月24日

这已经不是一个新闻了,这是2月19号的事了。不过正在家里过年,不好上网,所以没有写在blog中。现在补记一下。新闻的详细说明见这里

要不是看这个blog,我还不知道Jack Slocum是何许人也。原来他就是yui-ext的创始人,同时在前阵子还写了一个DomQuery,并且与jQuery进行过一番比较,在那番比较上,说是DomQuery的效率与功能要强于jQuery。为此jQuery的创始人John Resig 还专门写了一篇Blog进行了仔细地分析。不知怎的突然间冒出来yui-ext可以基于jQuery了。真是太大的好事了。在 djangobook.com 中,不知道大家是否已经领略到了yui-ext生成的tab对话框,我是学了半天(使用jQuery)才有些接近,如今yui-ext可以基于jQuery了,这样有许多强大,美观的组件就可以使用了。

即将发布的Ext 1.0将基于jQuery,真是有些等不及了呢。正象blog中所说的,这是一个双嬴的事情。

2007年01月24日

在 SharePlat 中我需要一个日期输入的 js 功能,于是在 jQuery 中找到了 date-picker 。其实 django Admin中的日期选择还是不错的,不过它不是使用jQuery开发的,不过它支持 i18n 的处理。主要是有一个 jsi18n.js 文件其实是通过 view 生成的,它会根据你的状态(浏览器或i18n的配置)来生成字符串不同的 i18n 的对应。不过感觉它的使用不如 jQuery 方便,所以还是选择了 jQuery 的插件。

使用这个插件要下载两个东西,一个是date-picker.js,一个是style.css文件。其中style.css你要选取一下,因为它还包括整体的一些css设定,与date-picker.js关系不大。style.css中的 a.date-picker 需要一个图片,感觉 date-picker 中的不好看(这个你要单独下载,通过图片另存为),所以我使用了 django 中的图片,并且根据 shareplat 进行了修改。

使用 date-picker 很简单。分为以下几步(以SharePlat为例):

1. 在Html的head中加入js和css的引用

<script type="text/javascript" src="/site_media/js/calendar.js"></script>
<link href="/site_media/css/date-picker.css" rel="stylesheet" type="text/css" />

2. 在$(document).ready()中加入如下代码:

<script type="text/javascript">
$(document).ready(function(){
    $.datePicker.setDateFormat(‘ymd’,'-’);
    $.datePicker.setLanguageStrings(['日', '一', '二', '三', '四', '五', '六'],
 ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十-月', '十二月'],
 {p:’上一月’, n:’下一月’, c:’关闭’, b:’选择日期’}
);

    $(‘#date’).datePicker();
});

date-picker 可以有一些配置。

setDateFormat可以定年月日的显示和分隔符

setLanguageStrings可以设定日历的语言

然后$(‘#date’).datePicker()就可以自动在一个input元素后面生成一个链接(它显示为一个图标),当点击这个链接时,会弹出日期选择窗口,然后就可以选择了。

3. 设定对应的元素

<input id="date" type="text" name="date"/>

这里id的值是与上面的$(‘#date’)是匹配的。