zoukankan      html  css  js  c++  java

  • ExtJS开发实践

    很久以前就看过有关ExtJS方面的知识，一直没有拿它做一些东西，闲来无事帮女朋友做毕业设计，于是选择用ExtJS来实现下，弄了两天，感觉还是比较好上手的，这里结合实例和大家分享下利用ExtJS开发的知识。

    ExtJS简介

    ExtJS可以用来开发RIA也即富客户端的AJAX应用，是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs最开始基于YUI技术，由开发人员JackSlocum开发，通过参考JavaSwing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。
    Ext的UI组件模型和开发理念脱胎、成型于Yahoo组件库YUI和Java平台上Swing两者，并为开发者屏蔽了大量跨浏览器方面的处理。相对来说，EXT要比开发者直接针对DOM、W3C对象模型开发UI组件轻松。

    OK，简单的了解下ExtJS，废话不多说，进入正题。

    ExtJS开发实践之Border布局

    Border布局在ExtJS中的应用很常见，可以将整个页面划分成几个区域，该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。

    基本代码：

    Code

    通过定义Viewport，就可以实现Border的布局，将页面划分成东西南北中五个部分，每个部分添加什么，就有自己决定啦，很好理解。

    效果：

    ExtJS开发实践之Tree控件

    对于ExtJS中的树来说，树加载器TreeLoader是一个比较关键的部件，树加载器由Ext.tree.TreeLoader类定义，只有AsyncTreeNode才会使用TreeLoader。

    基本代码：

    Code

    从上面的代码中可以看出，树中显示的内容是从Content/DMenuTree.aspx中Load到的，这里我实现的方法是通过数据库中一个表保存树形结构，然后通过将数据转化成Json输出到页面中。

    效果：

    ExtJS开发实践之TabPanel控件

    个人认为这是ExtJS中提供的最实用绚丽的控件之一，他可以实现Tab的添加和删除，给用户很人性的用户体验。

    基本代码：

    Code

    效果：

    ExtJS开发实践之数据的获取和显示

     ExtJS中的数据交互基本上就是以Ajax的方式进行传递和实现的，也就是可以不用刷新页面，就可以访问服务器的程序进行数据读取或数据保存等操作。

    基本代码：

    Code

    简单说下上面的代码，大家就明白ExtJS是如何获取数据的了。首先定义一个保存数据库字段的数组，然后定义ExtJS中保存数据的核心Ext.data.Store，从CarInfo.aspx中读取数据，并将读取的数据通过JsonReader付给定义好的数组，最后通过Load方法加载参数。而CarInfo.aspx中实现的是对数据的访问操作。从这也可以看出，通过脚本实现数据的交互，从而完成无刷新的操作。

    数据的显示：这里要介绍的是ExtJS中的GridPanel

    ExtJS中的表格功能非常强大，包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。这里不逊色于GridView的功能。

    基本代码：

    Code

    效果：


    ExtJS开发实践之Window窗体

    ExtJS中窗口是由Ext.Window类定义，该类继承自Panel，因此窗口其实是一种特殊的面板Panel。窗口包含了浮动、可拖动、可关闭、最大化、最小化等特性。

    基本代码：

    Code

    效果：

    实现起来可以说是相当的容易。很实用。

    ExtJS开发实践之换肤

    最后我们来说下ExtJS中的换肤功能，这个是有ExtJS内部提供的，实用起来十分方便，我只需定义一个皮肤脚本文件：

    Code

    通过选择，指定不同的css。

    效果：

    小结：ExtJS开发实践中的基本应用就介绍到这，通过强大的ExtJS类库，可以很容易的实现炫酷的UI效果，对我们的开发带来很大的帮助，但是，好事的同时也有一些弱势，脚本的调试就是很头疼的问题，一个小小的"，"就可能叫你检查半天。相信合理的使用ExtJS，会给你的开发带来很不错的效果。
  • 相关阅读:
    Android Studio在项目中添加assets资源目录
    Android Studio向项目中导入jar包的方法
    Android Studio 配置 androidAnnotations框架详细步骤
    Android退出所有Activity最优雅的方式
    Android数据存储之SQLite使用
    Android数据存储之SharedPreferences使用
    三种实现Android主界面Tab的方式
    Android热门网络框架Volley详解
    Android必学之数据适配器BaseAdapter
    23种设计模式UML图
  • 原文地址：https://www.cnblogs.com/gaoweipeng/p/1599969.html
Copyright © 2011-2022 走看看