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,
                width: 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/
能够在论坛发帖子,这么些论坛是很活泼的。

网站地图xml地图