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

第一次使用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最好的东西就是可以看看里面封装的代码,提高自己的编码思想。
先工作着,从老总,老员工那学点我需要的东西,在为公司做点贡献就闪人!
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics