JQuery仿的Extjs控件和界面(有图)

Extjs的出现为我们这些不会做界面的人带来了不少的便利，但是我感觉学起来挺麻烦的(我感觉)，就模仿一下ext的相关界面，一来用的时候也简单，二来提高一下自己对Jquery和Css的掌握程度。
现在就做了几个简单的小功能，TreePanel,accordionPanel,WindowPanel,MsgPanel,ToolBar,和一个简单的layout，使用的时候引入以上的几个js和对应的css即可。
如下图：
1、TreePanel、 GridPanel、toolBar


这个页面有个TreePanel 和一个 GridPanel以及一个ToolBar

//创建树控件
new TreePanel({
				renderTo : 'tree',
				treeNodes:nodes,
				click:function(node){
					
				}
			});

//创建表格控件
		new GridPanel({
		title : '部门管理',
		titleTable : 'titleTable',
		dataTable : 'dataTable',
		width:[25,200,200,180,180,],
		toolBar : true
		});

//添加toolBar
		var toolBar = new ToolBar({
			renderTo : 'toolBar',
			items : [{
				text : '新建',
				pic : 'add',
				handler : function(){
				
				}		
			},'-',{
				text:'修改',
				pic:'edit',
				handler:function(){
				
				}
			}]
				
		}).render();
		});

2、WindowPanel

这是一个WindowPanel

new WindowPanel({
			id : 'saveDepartment',
			title:'添加部门',
			width:420,
			height:200,
			html : '<iframe name="saveDepartment" id="saveDepartment"  frameborder="0"></iframe>',
			toolBar : new ToolBar({
				items:[{
					text : '保存',
					pic : 'add',
					userable:'true',
					handler : function(){
						
					}	
			}]
			})
		});

3、MsgPanel

这是一个弹出框

new Msg({
	    	title : '提示',
	    	content:'恩？，成功啦，成功啦',
	    	handler: function(){
	    	
	    	}
	    });

评论

38 楼 BuN_Ny 2011-11-09  

小伙，你这个能这样写不：
var tbar = new ToolBar();
var tbarItem = new ToolBarItem();
tbarItem.setType('button');
.....
tbar.addItem(tbarItem);
tbar.renderTo($('xxxxx'));
=========================================
或者用这种调用方式也不错的：
$('xxxx').create('toolbar', {
  xxxx: xxx,
  xxxx: xxx
});
$('xxxx').create('window', {
  xxxx: xxx,
  xxxx: xxx
});
再者：
$('xxxx').toolbar({...});
$('xxxx').window({...});
=========================================
倒是所谓的Ext方式。。。不如说是js方式。。。

37 楼 cheney_love 2011-06-20  

勇敢的核桃 写道

楼主静瞎掰~哪里有jquery的影子啊

36 楼 勇敢的核桃 2011-06-20  

楼主静瞎掰~哪里有jquery的影子啊

35 楼 cheney_love 2011-06-20  

inspire_xg 写道

想问问比ext简单在哪里？！同问

已经回复好几遍了，谢谢

34 楼 inspire_xg 2011-06-20  

想问问比ext简单在哪里？！同问

33 楼 xchd-3 2011-06-18  

很强大！！！！！

32 楼 風一樣的男子 2011-06-17  

easyUI 就有啊

31 楼 zyengogo 2011-06-17  

extjs比较好用写，个人意见

30 楼 cheney_love 2011-06-17  

旋风小胖神 写道

楼主觉得extjs麻烦估计因为extjs是别人写的，思路模式跟你不一样，不容易接受。自己造出来的东西毕竟熟悉，呵呵，加油~

一语中的

29 楼 旋风小胖神 2011-06-17  

楼主觉得extjs麻烦估计因为extjs是别人写的，思路模式跟你不一样，不容易接受。自己造出来的东西毕竟熟悉，呵呵，加油~

28 楼 chenshuang1227 2011-06-17  

cheney_love 写道

chenshuang1227 写道

我想问一下 ， 有什么用？直接用ExtJs就行了，你的优势在哪里？

自己用着方便，提高提高对jq的了解，学习学习Css

如果学习的话，我认为还是很好的。

27 楼 beisicao 2011-06-17  

用jQuery就是为了少写js代码，你写的这和Extjs有啥区别呢？完全是ext的语法

26 楼 cheney_love 2011-06-17  

shadow1114 写道

这不就是easyui么，感觉不怎么好用

25 楼 shadow1114 2011-06-17  

这不就是easyui么，感觉不怎么好用

24 楼 cheney_love 2011-06-17  

chenshuang1227 写道

我想问一下 ， 有什么用？直接用ExtJs就行了，你的优势在哪里？

自己用着方便，提高提高对jq的了解，学习学习Css

23 楼 chenshuang1227 2011-06-17  

我想问一下 ， 有什么用？直接用ExtJs就行了，你的优势在哪里？

22 楼 helloklzs 2011-06-17  

等待你的回应，如果代码整理完了，能发我下吗？[e-mail]邮箱，谢谢

21 楼 空空儿 2011-06-16  

这个是用JQuery仿Ext? 真的是太可以以假乱真了...写法都跟Ext不差啊。。。
支持一下。。

20 楼 就此改变 2011-06-16  

看起来挺醒目的  不错

19 楼 wuliaolll 2011-06-16  

没看出是jquery啊，调用代码还是用的ext风格，jquery节点操作丝豪不见啊