• javascript 中一个有用的框架 Ext2.0


    用过ext的人都知道,gridpanel 可以很方便的达到我们web开发中要求,并且整体的风格也是很漂亮的,所以大部分的控件都是可以直接使用的
     <script type="text/javascript">
         Ext.onReady(function(){
           var grid = new Ext.ux.AutoGridPanel({
                    title:'Auto loading columnmodel',
                    renderTo: 'testgrid',
                    height: 400,
                    500,
                    loadMask: true,    
                    autoSave: true,
                    saveUrl: 'saveconfig.php',               
                    store : new Ext.data.Store({
                        proxy: new Ext.data.HttpProxy({
                            url: 'GenerateData.ashx?grid=grid'
                        }),

                    reader: new Ext.data.JsonReader()
                    })
                });
                grid.store.load({params: {meta: true}});    
            });     
        </script>
      <div>
            <div id="testgrid">
            </div>
            <input type="button" onclick="grid.store.load();" value="load" />
            <input type="button" onclick="grid.store.baseParams.style = 's1'; grid.store.load({params: {meta: true}});"
                value="load+meta" />
            <input type="button" onclick="grid.store.baseParams.style = 's2'; grid.store.load({params: {meta: true}});"
                value="load+alt meta" />
            <p>
                Try re-arranging/moving some collums, and reload the page</p>
        </div>
    以上就是页面上的写法,具体的可以参考ext api函数
    后台的数据是donet ashx页面生成的jason数据,数据的结构是这样的
      private string ProcessAutogrid(HttpContext context)
            {
                string result = string.Empty;
                context.Response.ContentType = "text/xml";
                if (context.Request["grid"] != null)
                {
                    result = "{\"metaData\":{\"root\":\"rows\",\"id\":0,\"totalProperty\":\"totalCount\",\"fields\":[{\"name\":\"company\",\"header\":\"Company\",\"width\":179,\"hidden\":false},{\"name\":\"price\",\"header\":\"Price\",\"width\":77,\"hidden\":false},{\"name\":\"info\",\"header\":\"Info\",\"hidden\":false,\"width\":0},{\"name\":\"date\",\"header\":\"Last Updated\",\"width\":113,\"hidden\":false},{\"name\":\"id\",\"type\":\"int\"}]},\"rows\":[{\"company\":\"3m Co\",\"price\":\"71.72\",\"info\":\"Hello\",\"date\":\"2007-06-10\",\"id\":null},{\"company\":\"Alcoa Inc\",\"price\":\"29.01\",\"info\":\"World\",\"date\":\"2007-06-11\",\"id\":null},{\"company\":\"Altria Group Inc\",\"price\":\"83.81\",\"info\":\"!!!\",\"date\":\"2007-07-01\",\"id\":null},{\"company\":\"Microsoft\",\"price\":\"100.10\",\"info\":\"testing\",\"date\":\"2007-08-01\",\"id\":null},{\"company\":\"IBM\",\"price\":\"120.81\",\"info\":\"autogrid\",\"date\":\"2007-08-10\",\"id\":null},{\"company\":\"NOVELL\",\"price\":\"211.15\",\"info\":\"paging\",\"date\":\"2007-09-03\",\"id\":null},{\"company\":\"PHP Group\",\"price\":\"453.11\",\"info\":\"and\",\"date\":\"2007-09-05\",\"id\":null},{\"company\":\"MySQL Group\",\"price\":\"233.41\",\"info\":\"more\",\"date\":\"2007-10-01\",\"id\":null},{\"company\":\"BOTECH\",\"price\":\"843.81\",\"info\":\"testing...\",\"date\":\"2007-11-04\",\"id\":null}],\"totalCount\":9}";


                    #region test data

                    //        result = "{\"items\" : ["

            //                + "{\"id\" : \"TRIST\" , \"port_id\" : \"TRIST\" , \"port_name\" : \"ISTANBUL\" , \"region_id\" : \"MED\" , \"country_id\" : \"TR\"},"
            //                + "{\"id\" : \"TRISTTR\" , \"port_id\" : \"TRISTT\" , \"port_name\" : \"ISTANBULUYT\" , \"region_id\" : \"MEDRTYTR\" , \"country_id\" : \"TRRYT\"},"
            //                + "{\"id\" : \"TRIZM\" , \"port_id\" : \"TRIZM\" , \"port_name\" : \"IZMIR\" , \"region_id\" : \"MED\" , \"country_id\" : \"TR\"}],"
            //                + " \"metaData\" : { "

            //   + " \"fields\" : ["
            //   + " {\"name\" : \"id\", \"type\" : \"string\" } , {\"name\" : \"port_id\", \"type\" : \"string\" } , {\"name\" : \"port_name\", \"type\" : \"string\" } ,{\"name\" : \"region_id\", \"type\" : \"string\" } ,{\"name\" : \"country_id\", \"type\" : \"string\" }],"

            //   + "  \"columns\" : ["
            //   + " {\"header\" : \"#id\", \"dataIndex\" : \"id\", \"width\" : 75, \"editable\" : true, \"editor\" : new Ext.form.TextField({allowBlank: false}), \"sortable\" : true, \"hidden\" : true  } ,"
            //   + " {\"header\" : \"#port_id\", \"dataIndex\" : \"port_id\", \"width\" : 75, \"editable\" : true, \"editor\" : new Ext.form.TextField({allowBlank: false}), \"sortable\" : true, \"hidden\" : false  } ,"
            //   + " {\"header\" : \"#port_name\", \"dataIndex\" : \"port_name\", \"width\" : 75, \"editable\" : true, \"editor\" : new Ext.form.TextField({allowBlank: false}), \"sortable\" : true, \"hidden\" : false  } ,"
            //   + " {\"header\" : \"#region_id\", \"dataIndex\" : \"region_id\", \"width\" : 75, \"editable\" : true, \"editor\" : new Ext.form.TextField({allowBlank: false}), \"sortable\" : true, \"hidden\" : false  } ,"
            //   + " {\"header\" : \"#country_id\", \"dataIndex\" : \"country_id\", \"width\" : 75, \"editable\" : true, \"editor\" : new Ext.form.TextField({allowBlank: false}), \"sortable\" : true, \"hidden\" : false  } ],"

            //+ "\"scope\" : \"demoserver\","
            //+ "\"entity\" : \"port_mast\","
            //+ " \"sort\" : \"port_name\","
            //+ "\"dir\" : \"ASC\","
            //+ " \"start\" : \"0\","
            //+ " \"limit\" : \"25\","
            //+ " \"id\" : \"port_id\","
            //+ " \"root\" : \"items\","
            //+"  \"totalProperty\" : \"totalCount\", "
            //+ " \"totalCount\" : \"3\"}"
                    //+ "} ";
                    #endregion
                }
                return result;
            }
    这个和基本的grid 是有所不同的,不用定义ComlumnModal,只要在jason数据中定义就可以根据数据自动生成grid header 等等的,比较有用的啊,AutoGridPanel 是在gridpanel 的基础扩展的,对这个ext javascript 比较感兴趣的朋友可以研究,我最近正在看源代码,正在学习的朋友可以多谢交流
    主站 http://extjs.com/
    可以在论坛发帖子,这个论坛是很活跃的。

  • 相关阅读:
    Azure产品目录
    AWS产品目录
    BD
    Cloud Resource
    do-release-upgrade升级笔记
    Gluster vs Ceph:开源存储领域的正面较量
    OpenStack大规模部署详解
    SECURITY ONION:防御领域的kali
    vue非父子组件间传参问题
    vue源码之响应式数据
  • 原文地址:https://www.cnblogs.com/jfliuyun/p/1018447.html
Copyright © 2020-2023  润新知