EasyUI如期而至,jQuery替代Extjs

三 25 2010 Published by zdy under 编程技巧

前台开发，很多人喜欢用JQuery，但是在做后台管理系统，特别是企业管理系统，例如WEB进销存系统等，很多人都会选择ExtJS，因为ExtJS提供了非常多的UI界面，并且非常友好。

现在JQuery也有一个很好的UI插件了，几乎完全可以替代ExtJS，下面来看看对比：

jQuery EasyUI framework help you build your web page easily.

  • easyui is a collection of user-interface plugin based on jQuery.
  • using easyui you don’t need to write many javascript code, you usually defines user-interface by writing some HTML markup.
  • easyui is very easy but powerful.

Easy UI的使用也非常地简单：

<div>
<div><!--

Code highlighting produced by Actipro CodeHighlighter (freeware)

http://www.CodeHighlighter.com/

--><script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script></div>
</div>

与引用其它JQuery插件类似。具体使用可以参考官方地址：http://jquery-easyui.wikidot.com/tutorial

下面是Easy ui目前提供的所有插件功能：

Menu and Button

Create a simple menu

Create a Link Button

Create a Menu Button

Create a Split Button

Layout

Build border layout for Web Pages

Complex layout on Panel

Create Accordion

Create Tabs

Create XP style left panel

DataGrid

Convert a HTML table to DataGrid

Add a pagination to DataGrid

Get selected row data from DataGrid

Add a toolbar to DataGrid

Frozen columns for DataGrid

Dynamic change DataGrid columns

Formatting DataGrid columns

Add sorting to DataGrid

Create column groups in DataGrid

CheckBox select on DataGrid

Window

My first window

Custom window tools

Window and Layout

Create Dialog

Tree

Create Tree from markup

Create Async Tree

Append nodes to tree

Form

Submit a form with Ajax

Add ComboTree field to a form

Form Validation

用过ExtJS的朋友都知道，他与JQuery来比，ExtJS是比较臃肿的一个JS框架，JQuery它是一个公认的轻量级JS框架，而基于JQuery的Easy UI它能够完全胜任我们的基本开发需求，并且比ExtJS要轻量许多。

赶快去体验吧，一定会对你的工作有很大帮助的!下载地址：http://jquery-easyui.wikidot.com/download

No responses yet

做了两个extjs的独立元件

十二 04 2009 Published by zdy under 杂七杂八

又一个通宵，整整一个晚上，才做好两个extjs3.0的组件，一个是批量移动照片的窗口（chooser），还有一个就是批量上传，上传用的swfupload。其中大部分时间花在了swfupload上，在gridpanel中加入ProgressBar真的比较麻烦，自己没想出，但是发现官网论坛上有人写出了方法，确实简单。
总之，记点笔记，免得忘了。
1.关于store的

//添加一条数据,
var u =new this.store.recordType({
	name : this.fileProgressName,
	fileid: this.fileProgressID,
	size : file.size,
	jindu : '0',
	filestatus : 0
});
this.store.add(u);
//find方法得到id
this.index = this.store.find('fileid',this.fileProgressID);
//如果需要这条数据的话
var record=this.store.getAt(this.index);
//修改指定格的值
record.set('jindu', '1');

2.然后是表格中放入其他object。ProgressBar什么的应该都可以

renderer:function change(value, meta, rec, row, col, store){
	var id = Ext.id();
	(function(){
		new Ext.ProgressBar({
			id:rec.data.fileid+'-jd',
			renderTo: id,height:13,
			value: value,
		})
	}).defer(25);
	return '<span id="' + id + '"></span>';
}

这个有个缺陷就是如果动态更新表格内容，里面可能会重复出现ProgressBar，所以最好就是使用指定id，
然后检查是存在，存在就删了，然后生成新的，不然比较麻烦。
用extjs真的是个体力活，要不停的查看api document

No responses yet