`
bianxiaobin1991
  • 浏览: 20345 次
社区版块
存档分类
最新评论

第一次使用extJs写的后台与前台的集合显示

阅读更多
后台servlet内容:
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
List<Student> list = StudentService.getStudentList();
String json = "{'users':" + JSONArray.fromObject(list).toString() + "}";;
response.setContentType("text/json;charset=UTF-8");
response.getWriter().print(json);//是一个文件流,将json传给前台
response.getWriter().flush();
}
前台Js内容:
Ext.onReady(function(){
//定义数据源
var store = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({
        url:'servlet/basic'//后台连接地址
        }),
        reader: new Ext.data.JsonReader({
             root : 'users'//查找后台存储在json中的users集合
             },
             ['id','uname','age','sex'])//指定jopo元素值
    });
    //创建列表
    var cm = new Ext.grid.ColumnModel([
        new Ext.grid.RowNumberer(),
        {header:'编号',dataIndex:'id'},
        {header:'名称',dataIndex:'uname'},
        {header:'年龄',dataIndex:'age'},
        {header:'性别',dataIndex:'sex'}
    ]);
    //填充GridPanel
    var userGrid = new Ext.grid.GridPanel( {// 创建Grid表格组件
        applyTo : 'hello',// 设置表格现实位置
        frame : true,// 渲染表格面板
        height:480,
        width:640,
        stripeRows : true,// 显示斑马线
        autoScroll : false,// 当数据查过表格宽度时,显示滚动条
        store : store,// 设置表格对应的数据集
        viewConfig : {// 自动充满表格
            autoFill : true
        },
        cm : cm// 设置表格的列
    });
    store.load();//加载数据集,采用配置好的Reader格式去加载Record缓存,具体请求的任务由配置好的Proxy对象完成
});

这是我第一次使用Ext.Js“成功的案例”,在我第一次自学这玩意的时候感觉着玩意太棒了,什么东西都给你封装好,自己直接拿来用就行了,页面不在枯燥无味了,编程生活又出现光彩啦。
但随着自己对Ext.js的了解发现,这玩意真TMD不是个东西,前台页面加载过慢,代码大量冗余,浏览器内存负担加大,Ext.js本身还存在点问题,还是个重量级的框架。现在越学越比较恶心。
但Ext.js还有他的好处,就是JS,Ajax,Jquery封装的特别完美。其实用Ext.js对于小公司来说是件好事,节约了成本,提高了前台的开发不需要另加美工修饰。另外,Ext.js最好的东西就是可以看看里面封装的代码,提高自己的编码思想。
先工作着,从老总,老员工那学点我需要的东西,在为公司做点贡献就闪人!
分享到:
评论

相关推荐

    extjs通用后台管理界面

    总结来说,这个"extjs通用后台管理界面"是一个使用ExtJS框架精心设计的后台管理界面模板,具备良好的用户体验和实用性。开发者可以通过下载和研究"Ext_Demo"压缩包,学习ExtJS的使用技巧,快速构建自己的后台管理...

    extjs动态生成表格,前台+后台

    在本文中,我们将深入探讨如何使用ExtJS框架在前端动态生成表格,并结合后端数据进行展示。ExtJS是一个强大的JavaScript库,专用于构建富客户端Web应用程序,尤其在创建交互式用户界面方面表现突出。动态生成表格是...

    Extjs4后台框架

    这个“Extjs4后台框架”可能指的是一个特定的、与ExtJS4集成的后端解决方案,用于支持前端应用的数据交互和管理。让我们深入探讨一下ExtJS4及其相关的后台开发概念。 首先,ExtJS4提供了丰富的组件库,包括表格、...

    Extjs 与后台交互的实例

    本实例主要探讨了如何利用ExtJS与后台的Java Servlet进行数据的增删改查操作,涉及的技术栈包括ExtJS、Servlet和Java。下面我们将深入讨论这些知识点。 首先,ExtJS是一个强大的JavaScript库,用于构建富客户端应用...

    extjs4.0.7后台管理框架

    这个后台管理框架是利用EXTJS4.0.7的功能,构建了一个功能丰富的交互式用户界面,通常包括数据管理、表格、图表、窗口、菜单等组件,用于后台系统的管理和操作。 在描述中提到的“动态树”是指可以实时更新和交互的...

    extjs网站后台管理系统

    "ExtJS 网站后台管理系统"是一款基于ExtJS框架构建的高效、功能丰富的网站管理平台,主要用于实现用户权限管理、文章编辑与发布、页面静态化以及集成lucene搜索引擎等功能。这一系统旨在提供一站式的网站信息管理和...

    ExtJS项目后台模板

    已经整理,能直接看效果的哦,用着不错,要使用的拿走吧

    13款extjs后台框架

    在给定的“13款extjs后台框架”中,我们可以看到各种基于ExtJS开发的后台管理模板,这些模板通常包含了一系列预设的页面布局、功能组件和样式设计,旨在帮助开发者快速搭建后台管理系统。 1. **免费后台管理模板**...

    基于ExtJS5的后台管理系统案例 - 源码

    在ExtJS5中,可以使用Grid Panel配合Editor Grid插件实现数据的编辑,使用Window或Modal Form进行新建和修改操作,而使用Store与Proxy连接后台服务进行数据的删除。 4. **表格组件(Grid)** Grid是ExtJS5中用于...

    (Java+JSP)可二次开发Extjs4.0通用后台管理系统源码完整大型项目.zip

    【标题】:“(Java+JSP)可二次开发Extjs4.0通用后台管理系统源码完整大型项目.zip”指的是一个基于Java和JSP技术,并利用Extjs4.0框架开发的可扩展的后台管理系统源码。这个项目是针对中大型企业的需求设计的,提供...

    基于ExtJS的通用后台管理系统

    在这个基于ExtJS的通用后台管理系统中,我们可以看到它被用来创建一个高效的管理界面,可能包含了数据的增删查改、图表分析、用户权限管理等多种功能。 首先,让我们了解一下ExtJS在后台管理系统中的应用。ExtJS...

    extjs前台设计工具

    extjs前台设计工具:不错的前台设计工具,使用起来很方便。web应用设计前台工具首选。

    Extjs 通用后台模板| 经典 Tree+Tab+Grid

    这个"Extjs 通用后台模板| 经典 Tree+Tab+Grid"是一个基于ExtJS的预配置模板,它集成了常见的界面元素,如树形视图(Tree)、选项卡(Tab)和网格(Grid),为开发高效能、用户友好的后台应用提供了便利。...

    前台用extjs后台用java.如何导出excel报表

    在IT行业中,前端和后端的协作是实现各种功能的关键,比如在本例中,我们需要在前端使用ExtJS,后端使用Java来实现一个导出Excel报表的功能。这个功能允许用户点击按钮后,系统生成一个Excel文件,包含了指定的数据...

    Extjs4.0通用后台管理系统源码完整大型项目(ExtJS 4.2+Hibernate 4.1.7+Spring MVC 3.2.8)

    可二次开发Extjs4.0通用后台管理系统源码完整大型项目。数据库在项目里面的一个sql文件里面 1、采用Spring MVC的静态加载缓存功能,在首页将Javascript文件、CSS文件和图片等静态资源文件加载进来放进内存,极大提高...

    Extjs4前台前台grid导出excel

    在IT行业中,ExtJS是一个广泛使用的JavaScript库,用于构建富客户端Web应用程序。它提供了一套完整的组件模型,其中包括Grid(表格)控件,用于展示和操作数据。在本篇文章中,我们将深入探讨如何在ExtJS4中实现前台...

    可二次开发Extjs4.0通用后台管理系统源码完整大型项目

    《深入解析JavaWeb大型项目开发实战——基于可二次开发的Extjs4.0通用后台管理系统》 在现代的Web开发领域,JavaWeb技术以其稳定、高效和强大的特性,被广泛应用于构建大型企业级应用系统。本项目以"可二次开发...

    extjs学习 分页后台处理

    这两个参数用于实现分页,`start`表示从哪一条记录开始,`limit`则表示一次加载多少条记录。 例如,`start: 0, limit: 5`意味着加载第0条至第4条记录。每次用户翻页,`start`值会递增`limit`的值,以获取下一页的...

    extjs后台模版下载实例

    使用extjs实现的超炫后台模版下载实例 整理测试了很久特来贡献

    ASP.Net+ExtJS做的后台

    ASP.Net+ExtJS做的后台 可以学习学习

Global site tag (gtag.js) - Google Analytics