用过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 ;
#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/
可以在论坛发帖子，这个论坛是很活跃的。