exec.js

extjs与Struts整合以及与后台数据库的交互 非常值得学习的一个案例

Ext.BLANK_IMAGE_URL = "images/default/s.gif";
Ext.onReady(function() {
			new Ext.Viewport({
						layout : "border",
						items : [{
									region : "north",
									// title:"头部面板",
									height : 50
								}, {
									region : "east",
									// title:"右边面板",
									width : "15%"
								}, {
									region : "south",
									// title:"下边面板",
									height : 50
								}, tree, grid]
					})
		});
 var root=new Ext.tree.AsyncTreeNode({
                    id:'2',
                    text:'系统菜单'
                });
                var data=new Ext.tree.TreeLoader({url:'dataAction.do?method=showTree'});
                var tree=new Ext.tree.TreePanel({
                	region:"west",
				    margins : '10 10 10 10',
				    width : "20%",
					root:root,
					animate:true,
					enableDD:false,
					border:false,
					rootVisible:true,
					containerScroll: true,
                    loader:data
                });
                data.on('beforeload',function(treeLoader,node){
                    this.baseParams.id=node.attributes.id;
                },data);
var store = new Ext.data.JsonStore({
			url : "dataAction.do?method=showData",
			fields : [{
						name : 'appeId',
						mapping : 'appeId'
					}, {
						name : 'survId'
					}, {
						name : 'location'
					}, {
						name : 'surveyDate'
					}, {
						name : 'surveyTime'
					}, {
						name : 'inputUserId'
					}]
		});
store.load();

// 定义列
var colM = new Ext.grid.ColumnModel([{
			header : 'appeId',
			dataIndex : 'appeId',
			width : 170,
			sortable : true
		},// 生成列，sortable为列排序，不需要设置为false，默认false，renderer为该列增加自定义函数
		{
			header : 'survId',
			dataIndex : 'survId',
			width : 100,
			sortable : true
		}, {
			header : 'location',
			dataIndex : 'location',
			width : 100
		}, {
			header : 'surveyDate',
			dataIndex : 'surveyDate',
			width : 100
		}, {
			header : 'surveyTime',
			dataIndex : 'surveyTime',
			width : 100
		}, {
			header : 'inputUserId',
			dataIndex : 'inputUserId',
			width : 100
		}]);

// 生成表格
var grid = new Ext.grid.GridPanel({
			region : "center",
			title : "我的表格",
			layout : "fit",
			cm : colM,
			store : store
		});