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

Extjs的出现为我......
嗯，这个不错，楼主有......
junxiang写道......
这几个功能就不错了，......
基本结构做好，剩下的......
renwolang5......
这个那是Jquery......
jilong-lia......
lz真有心呀，继续努......
想问问比ext简单在......


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


这个页面有个TreePanel 和一个 GridPanel以及一个ToolBar
Js代码  
//创建树控件   
new TreePanel({   
                renderTo : 'tree',   
                treeNodes:nodes,   
                click:function(node){   
                       
                }   
            });  

//创建树控件
new TreePanel({
                                renderTo : 'tree',
                                treeNodes:nodes,
                                click:function(node){
                                       
                                }
                        });
Js代码  
//创建表格控件   
        new GridPanel({   
        title : '部门管理',   
        titleTable : 'titleTable',   
        dataTable : 'dataTable',   
        width:[25,200,200,180,180,],   
        toolBar : true  
        });  

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

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

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

这是一个WindowPanel
Js代码  
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(){   
                           
                    }      
            }]   
            })   
        });  

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

这是一个弹出框
Java代码  
new Msg({   
            title : '提示',   
            content:'恩？，成功啦，成功啦',   
            handler: function(){   
               
            }   
        });  

new Msg({
                    title : '提示',
                    content:'恩？，成功啦，成功啦',
                    handler: function(){
                   
                    }
            });
现在就做了这几个，代码也写的比较乱，等整理整理，会附上源码，请大家指点


大小: 16.9 KB

大小: 4.9 KB

大小: 4.1 KB
查看图片附件

嗯，这个不错，楼主有心了。

junxiang 写道
嗯，这个不错，楼主有心了。

现在就弄了几个简单的功能

这几个功能就不错了，属于把地基盖上了

基本结构做好，剩下的方便扩展就好

renwolang521 写道
基本结构做好，剩下的方便扩展就好

我也在想扩展性的问题，给点意见吧

这个那是Jquery丫？彻底无语啊...

jilong-liang 写道
这个那是Jquery丫？彻底无语啊...

lz真有心呀，继续努力。

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