轻松搞定ExtJs 3.4

  首先，我们来看看效果，这是需要实现的东东，经典布局，好吧，我承认，这玩意已经被做烂了，但是还是写写，记录下吧，高手略过哦。我不打算写什么分步的教程，教你如何去使用控件，我们的目标只有一个，实现功能，并且我们的时间不多，毕竟时间宝贵，4天完成，后台我采用php(两天学的)，两天写ext后台(其实还有个前台界面，那个就不说了)。

    好了，第一天，我们先准备下工具:
    1、Sublime_text2 不得不说的编辑器，相当牛掰。
    2、PremiumSoft 不说了，一个很不错的数据库工具，放弃phpmyadmin吧
    3、ExtJs库，在这里我讲的将是extjs 3.4库，extjs 4.0.7千万别用，不然哭了可不要说我没提醒，4.1没用过不发表意见，总体，我认为extjs4这个版本的开发效率提高了不少，但是运行效率还是省省吧，不过extjs有个问题，越高的版本对ie6支持就越差劲，所以，如果你有ie6的客户，别选太高的版本，
    好了，我们需要准备的就这么多了，php就是简单啊，难怪asp.net不能独步啊。
    我们正式开始，按照我的习惯，我喜欢先把程序的原型做出来,那么第一步，我们来认识一下viewport这个元素。
    ViewPort,ExtJs用来提供的布局管理器，类似于winform中的dock布局，一个简单的例子，看起来像这样：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--ext css-->
    <link rel="stylesheet" type="text/css" href="..//Jscript/resources/css/ext-all.css" />
    <script type="text/javascript" src="..//Jscript/ext-base.js"></script>
    <script type="text/javascript" src="..//Jscript/ext-all.js"></script>
    <script type="text/javascript" src="..//Jscript/locale/ext-lang-zh_CN.js"></script>
</head>
<body>
    <script type="text/javascript">
        //在ext 4以前的版本中这个非常重要，不然会引起界面的混乱
        Ext.BLANK_IMAGE_URL = '/jscript/resources/images/default/s.gif'; 
        //Ext的标准提示初始化，当然没有它也可以
        Ext.QuickTips.init();

        //很熟悉吧，Jquery(document).ready(); ^^
        Ext.onReady(function () {
            var north = new Ext.Panel({
                id:'south',
                html : '<div>这里是我们的管理系统标题哦</div>',
                bodyStyle: 'background:#133984;padding:20px',
                height : 60,
                region : 'north',
                split : false                                    //禁止拖动
            });

            var south = new Ext.Panel({
                id : 'north',
                html : '<div style="text-align:center">这里是版权哦</div>',
                region : 'south',
                split : false
            });

            var west = new Ext.Panel({
                id : 'west',
                html : '<div>这里是树导航哦</div>',
                width : 200,
                region : 'west',
                split : 'true'
            })

            var content = new Ext.Panel({
                id : 'center',
                html : '这里是主体内容哦',
                split : 'true',
                region : 'center'                                //这里是最重要的，在4版本后如果没有center渲染会报错的
            });

            var view = new Ext.Viewport({
                layout:'border',
                items : [north,south,west,content]
            })
        })
    </script>
</body>
</html>

这样，你看到的样子应该是这样的：

在这里，有几点提示：

　　1、大家最好引入html的dtd文件，防止出现莫名的错误。

　　2、设定meta为utf8，乱码了别哭哦。

　　3、大家最好去下载extjs的帮助文档，如果找不到的话，在文章的最后提供给大家下载，如何去看这个帮助文档很重要。

接下来，有几个注意献给大家讲下：

　　1、在extjs中，如果一个控件有items属性，那么可以简写成这样，类似于下面提供的样子：

(当然，中括号有问题，自己补全下哦^^)

我们要说的是，在items中每个{}号代表一个panel，如果你不加xtype属性的话。

好了，第一大步已经完成了，下面给大家介绍重量级控件，tree控件，鼓掌~~~~~。

我们就不在这里给大家写什么静态树了，直接来ajax加载，接上面viewport。

tree的根节点是一个异步节点，名字叫做Ext.tree.AsyncTreeNode，大家可以在api文档中自行查找，建立的方式看起来是这个样子的：

解释下这段代码的结构：

　　1、id：这个是要像服务器去取值的，必填属性。

　　2、text：显示出来给大家看的，必填属性。

　　3、leaf ：是否是叶节点，必填属性，这个如果不填，那么前面的小图标会不对的。

改写我们viewport的west段代码，使其看起来像这样：

ok，我们的树做完了，相当easy吧，这样子，这棵树就已经是一颗ajax tree了，但是注意哦，后台需要返回的数据是由格式需求的，他们看起来大概是这样的：
[{"id":true,"text":"网站首页","leaf":false},{"id":"2","text":"xxxxx","leaf":false}]

注意看其格式，不然的话会显示出五花八门的错误。

好了，今天就先到这里吧，下课。

哦，忘记了，好像要上传文件的，api在这里哦

posted @ 2012-07-04 18:12 xx++ 阅读(6171) 评论(5) 编辑收藏举报

刷新页面返回顶部

xx++

轻松搞定ExtJs 3.4

公告