`
JavaCrazyer
  • 浏览: 2990440 次
  • 性别: Icon_minigender_1
  • 来自: 河南
社区版块
存档分类

使用ExtJS之Grid有感而发，贡献示例给大家

EXTJavaScriptCSSjsonDAO 
阅读更多

 

最近研究ExtJs觉得官方示例代码有些过多，尤其是Grid的使用代码有的几乎没有太大作用。本人在仔细研究后写出了如下一个精简的Grid示例，希望能给大家带来点帮助 附带图片效果在附件中 首先，上官方下载资源包大家应该都很熟悉了

HTML页面代码通常是这样的 

 <html>
  <head>
    <title>My JSP 'index.jsp' ExtjsServlet page</title>
          <script type="text/javascript" src="js/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="js/ext-all.js"></script>  
     <link rel="stylesheet" type="text/css" href="js/resources/css/ext-all.css" />  
      <script type="text/javascript" src="js/js.js" ></script>
  </head>
  <body>
   <input  type="button"  id="remove" value="remove" />
    <div id="grid"></div>
  </body>
</html>

 

第二步当然是核心了，我的JS文件中的代码 

Ext.onReady(function(){
    var cm = new Ext.grid.ColumnModel([
        new Ext.grid.RowNumberer(),
        //设置网格大标题
        {header:'编号',dataIndex:'id',sortable:true,
            editor:new Ext.grid.GridEditor(new Ext.form.TextField(
            {
                allowBlank:false
            }))},
        {header:'价钱',dataIndex:'price',sortable:true,
        editor:new Ext.grid.GridEditor(new Ext.form.TextField(
            {
                allowBlank:false
            }))},
        {header:'性别',dataIndex:'sex',sortable:true,width:200,renderer:renderSex}
    ]);
    
    function renderSex(value)
    {
        if(value=='女')
        {
            return "<span style='color:red'>"+value+"</span>";
        }
        else
        {
            return "<img src='js/drop-yes.gif'/> <span style='color:greed'>"+value+"</span>";
        } 
    }
    
    var store= new Ext.data.Store({
        proxy:new Ext.data.HttpProxy({url:'ExtJs.do'}),//请求URL
        reader:new Ext.data.JsonReader({//从JSON中读取的数据
                totalProperty:'totalProperty',//获取总共的记录数
                root:'root'//这个必须设定值否则网格里面没有内容.值不一定是ROOT，其他的也行
            },[
                {name:'id'},
                {name:'price'},
                {name:'sex'}
            ])
        });
    //网格视图设置
    var grid =  new Ext.grid.EditorGridPanel({
        title:'ORDER表查询记录显示结果',
        renderTo:'grid',//这个参数必须设定否则显示空白页面
        store:store,
        cm:cm,
        loadMask:true,//这个对刷新按钮起作用
        width:400,
        height:200,
        //试图下方分页工具条显示的内容
         bbar : new Ext.PagingToolbar({
              store : store,
              pageSize : 4,//每页显示的数目应该与limit的值保持一致
              displayInfo : true,//设置是否显示信息
              beforePageText:"第",
              afterPageText:"/ {0}页",
              displayMsg : "当前记录从 {0} - {1} 总 {2} 条记录",
              emptyMsg : "没有相关记录!",
             })
    });
    //点击删除按钮可以移除当前视图中的一项,但是刷新后仍然是原来的样子，并没有删除数据库中的数据
    Ext.get('remove').on("click",function(){
         store.remove(store.getAt(1));
         grid.view.refresh();
    },this);
   //初始化参数，start表示从第几条开始查询，limit表示查询多少条记录,start与limit是提交请求时的请求参数，不可修改必须写成这样
    store.load({params:{start:0,limit:4}})；
});

  

以上的JS代码我采用的是配合JSON来替换值的方法做的，所以在处理业务逻辑时，比如在ACTION中的代码也显得很重要 

 BaseForm bf=(BaseForm)form;
        Order1Dao dao=new Order1DaoImpl();
        System.out.println(bf.getStart()+"================================"+bf.getLimit());
        List<Order1> orders=dao.listall(bf.getStart(),bf.getLimit());
        int total=dao.getTotal();
        StringBuilder s= new StringBuilder("   {totalProperty:"+total+",pageNo:"+bf.getStart()+",pageSize:"+bf.getLimit()+",root:[");
        int i=0;
        for(Order1 order:orders){
            i++;
            s.append("{id:'"+order.getId()+"',price:'"+order.getPrice()+"',sex:'"+order.getSex()+"'}");
            if(i<5)
            {
                s.append(",");
            }
            
            
        }    
         s.append("]}");
         response.setContentType("text/html;charset=utf-8");
         response.getWriter().write(s.toString());

 

   怎么样？运行起来看看吧，是不是简单许多呢？

2
顶
0
踩
分享到：
| 使用JFreeChart生成XY轴折线图
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics