轻松搞定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在这里哦

转载于:https://www.cnblogs.com/freedoom/archive/2012/07/04/2576632.html

轻松搞定ExtJs 3.4相关推荐

轻松搞定ExtJs 3.4 (2)
ok,接上回,我们已经完成了一个界面,一颗ajax tree,那么今天我们将完成树的事件的侦听,表格的实现和extjs的继承. 首先,我们来完成最容易的东东,树的侦听,修改上一节的tree代码,使它看 ...
ASP.NET2.0轻松搞定统计图表【月儿原创】
ASP.NET2.0轻松搞定统计图表作者:清清月儿主页:http://blog.csdn.net/21aspnet/ 时间:2007.3.27 本文讲述如何绘制条形图,折线图, ...
用Python轻松搞定Excel中的20个常用操作
来源 |早起Python(ID: zaoqi-python) Excel与Python都是数据分析中常用的工具,本文将使用动态图(Excel)+代码(Python)的方式来演示这两种工具是如何实现数据 ...
子查询引用外表_轻松搞定慢查询？这一文就够了（内附大量实例助你看懂Explain）...
原文:https://mp.weixin.qq.com/s/p5UKuh1yY3P4zrOzVBmY1w (复制链接至浏览器,即可查看) 大量实例助你看懂Explain的输出内容,轻松搞定慢查询 EX ...
基于 CODING 轻松搞定持续集成
点击观看视频教程带你一步一步搞定 CODING 持续集成持续集成加速软件交付持续集成这个概念是由 Grady Booch 在 1991 年首次提出,随后成为了 DevOps 的核心实践之一.持续 ...
函数字节不对齐函数崩溃_Excel中统计字符数，不需要一个一个的数，len函数能轻松搞定...
简介:要统计Excel单元格中的字符数,不需要一个一个的数,利用len函数就能轻松搞定. 问:什么是len函数? 答:自动统计字符数的函数问:怎样记住len函数答:len是length(长度)的简 ...
[JavaScript]只需一行代码,轻松搞定快捷留言-V2升级版
前天熬了大半宿发了一篇[一行代码轻松搞定快捷留言功能],同时发布了V1.0beta版的快捷留言功能和源代码,之所以是beta版,就是当时感觉虽然基本功能有了,但是还不够完善,特性也不一定合理,今天不知 ...
十招轻松搞定社会媒体
十招轻松搞定社会媒体十招轻松搞定社会媒体社会媒体化成为在线营销的重要手段不再是什么秘密了,写一些好的内容并且进行推广只是这个过程的一小部分,你还必须加强在网络社会的曝光机会,有些人不知道如何开 ...
轻松搞定项目中的空指针异常Caused by: java.lang.NullPointerException: null
轻松搞定项目中的空指针异常Caused by: java.lang.NullPointerException: null 参考文章: (1)轻松搞定项目中的空指针异常Caused by: java.l ...

轻松搞定ExtJs 3.4

轻松搞定ExtJs 3.4相关推荐

最新文章

热门文章