zoukankan      html  css  js  c++  java
  • Ext让人惊喜的data.srtoe的loadData

    Ext让人惊喜的data.srtoe的loadData (2008-05-12 08:59:35)
    标签:it  分类:Ajax

    在写Ajax程序时,假如我们的布局如下:

    +-------------------------+

                            |

       数据列表区Grid       |

                            |

    +-------------------------+

                            |

       数据展示/编辑区      |

                            |

    +-------------------------+ 

    如果我们增加一条记录,如何让列表也增加移行呢?从服务器读取?不太合理,当然是js操作Grid是最好的,可是当我们使用Ext.GridPanel时怎么办呢?使用grid.dom肯定是得不偿失的;让人意想不到的时我们可以通过操作grid.store来实现操作,有点类似Delphi的数据库程序,(在Delphi中我们给Dataset增加一条记录,那么与其相关的展示数据的DBGrid会自动显示新增的数据)。

    如下例所示:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
        <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">
        <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../ext-all.js"></script>


    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    </HEAD>

    <BODY>

    <script>


    // -----------  GRID -----------------
    var myData = [
        ['Apple',29.89,0.24,0.81,'9/1 12:00am'],  
        ['Ext',83.81,0.28,0.34,'9/12 12:00am'],  
        ['Google',71.72,0.02,0.03,'10/1 12:00am'],  
        ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],  
        ['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
        ];    

    var myReader = new Ext.data.ArrayReader({},
    [{name: 'company'},  
    {name: 'price', type: 'float'},  
    {name: 'change', type: 'float'},  
    {name: 'pctChange', type: 'float'},  
    {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
    ]);  

    var ds = new Ext.data.Store({
            data: myData,
            reader: myReader
            });

    var grid = new Ext.grid.GridPanel({
     store: ds, 
     columns: [{header: "Company", 120, sortable: true, dataIndex: 'company'},   
      {header: "Price", 90, sortable: true, dataIndex: 'price'},   
      {header: "Change", 90, sortable: true, dataIndex: 'change'},   
      {header: "% Change", 90, sortable: true, dataIndex: 'pctChange'},   
      {header: "Last Updated", 120, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'),                          dataIndex: 'lastChange'}
     ],  
     viewConfig: {
      forceFit: true
     },  
     title: 'My First Grid',  
      500,  
     frame: true
    });

    Ext.onReady(function() {
     grid.render('content');
    });


    function addr()
    // 下面就是为Grid新增一行的代码
     var rd = [['苹果',29.89,0.24,0.81,'']];  // 这是数据格式,必须与myData一样才行
     ds.loadData(rd, true);   // 第二个参数如果为false,则会清空ds的数据后再追加,
    }
    </script>

    <div id=content></div>
    <input type=button value="增加" onclick="addr()">
    </BODY>
    </HTML>
    如果把这项功能能用于从服务器获取数据,那么实现ComboBox联动就容易了,呵呵,用到的时候再试吧!

  • 相关阅读:
    js提交表单错误:document.form.submit() is not a function
    eclipse中把多个项目放在一个work set下
    SpringMVC源码分析系列
    java.util.ConcurrentModificationException详解
    java动态代理(JDK和cglib)代码完整版本
    java静态代理和动态代理
    看完这5张图!不同类型停车位的停车技巧get!
    记住这6个方法,让你的车辆轻松过年检!
    B样条 理论基础
    virtual studio 主题更换
  • 原文地址:https://www.cnblogs.com/winner/p/1279467.html
Copyright © 2011-2022 走看看