tabpanel 通过 autoload 加载 gridpanel 显示的表头，分页

0 0

tabpanel 通过 autoload 加载 gridpanel 显示的表头，分页10

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>再探TabPanel和Tree控件搭配测试</title>
<link rel="stylesheet" type="text/css" media="all" href="js/ext2/resources/css/ext-all.css" />
</head>
<body>
<script type="text/javascript" src="js/ext2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext2/ext-all.js"></script>
<script type="text/javascript" src="js/ext2/ext-grails.js"></script>
<script type="text/javascript" src="js/ext2/build/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';</script>
<script type="text/javascript">
//左边功能树
var menuTree = new Ext.tree.TreePanel({
	region:'west',
	title:'功能菜单',
	width:180,
	minSize:150,
	maxSize:200,
	split:true,
	autoScroll:true,
	autoHeight:false,
	collapsible:true,
	rootVisable:false, //不显示根节点
	root:new Ext.tree.TreeNode({
		id:'root',
		text:'功能菜单',
		draggable:false,
		expanded:true
	})
});

//添加第一个节点(autoLoad)
menuTree.root.appendChild(new Ext.tree.TreeNode({
	id:'autoLoadPanel',
	text:'通过autoLoad打开',
	listeners:{
		'click':function(node, event) {
			event.stopEvent();
			var n = contentPanel.getComponent(node.id);
			if (!n) { //判断是否已经打开该面板
				n = contentPanel.add({
					'id':node.id,
					'title':node.text,
					closable:true,
					//通过autoLoad属性载入目标页,如果要用到脚本,必须加上scripts属性
					autoLoad:{url:'list.gsp', scripts:true}
				}).show();
			}
            alert(n)
            contentPanel.setActiveTab(n);
		}
	}
}));

//添加第二个节点(function)
menuTree.root.appendChild(new Ext.tree.TreeNode({
	id:'functionPanel',
	text:'通过函数打开',
	listeners:{
		'click':function(node, event) {
			event.stopEvent();
			var n = contentPanel.getComponent(node.id);
			if (!n) {
				var p = new fnPanel();
				p.id = node.id;
				p.title = node.text;
				n = contentPanel.add(p);
				n.show().doLayout(); //关键地方,重新刷新布局
			}
			contentPanel.setActiveTab(n);
		}
	}
}));

//通过扩展来构建要创建的面板
fnPanel = Ext.extend(Ext.Panel, {
	closable:true,
	autoScroll:true,

	//创建面板内容
	createFormPanel:function() {
		return new Ext.form.FormPanel({
			buttonAlign:'center',
			labelAlign:'right',
			labelWidth:36,
			frame:false,
			border:false,
			//指定为绝对定位,可以让控件布局随意确定位置
			style:'position:absolute;top:30%;left:30%;width:422px;',
			items:[{
				xtype:'textfield',
				fieldLabel:'姓名',
				width:350
			},{
				xtype:'textfield',
				fieldLabel:'性别',
				width:350
			}],
			buttons:[{text:'确定'}, {text:'取消'}]
		});
	},

	//重装控件初始化函数,在该函数中完成面板中内容的初始化
	initComponent:function() {
		fnPanel.superclass.initComponent.call(this);
		this.fp = this.createFormPanel();
		this.add(this.fp);
	}
});

//右边具体功能面板区
var contentPanel = new Ext.TabPanel({
	region:'center',
	enableTabScroll:true,
	activeTab:0,
	items:[{
		id:'homePage',
		title:'首页',
		autoScroll:true,
		html:'<div style="position:absolute;color:#ff0000;top:40%;left:40%;">Tree控件和TabPanel控件结合功能演示</div>'
	}]
});

Ext.onReady(function(){
	new Ext.Viewport({
		layout:'border', //使用border布局
		defaults:{activeItem:0},
		items:[menuTree, contentPanel]
	});
});
</script>
</body>
</html>

list.gsp

<div id="message">
      
</div>
<script type="text/javascript">
    var ds = new Ext.ux.GrailsStore({
        url: 'psclzd/listData',
        reader: new Ext.data.XmlReader({
            id: 'id',
            record: 'psclzd',
            totalRecords: 'count'
        }, new Ext.data.Record.create([

            {name: 'id'},
            {name: 'clbh'},
            {name: 'clmc'},
            {name: 'note'}
        ])
                )
    });
    var body = new Ext.grid.GridPanel({
        renderTo:'psclzd_grid',
        store: ds,
        stripeRows: true,
        loadMask: true,
        border: false,
        //        autoShow:true,
        autoHeight:true,
        //        viewConfig:{forceFit:true},
        cm: new Ext.grid.ColumnModel([

            {header: 'Id', dataIndex: 'id', sortable: true},
            {header: 'Wlbh', dataIndex: 'clbh', sortable: true},
            {header: 'Wlmc', dataIndex: 'clmc', sortable: true},
            {header: 'Note', dataIndex: 'note', sortable: true}
        ]),
        bbar: new Ext.ux.GrailsPagingToolbar({
            store: ds,
            displayInfo: true
        })
    });
    body.on('rowdblclick', function(body, rowIndex, e) {
             Ext.get("message").update("successful")
    });
//    body.doLayout();
    ds.load();

</script>
<div id="psclzd_grid"></div>

这个gridPanel在 tabPanel 中显示后，表头和分页不固定，如果让表头和分页标签固定下来

JavaScript EXT

2008年7月01日 20:33

dellsoft
35
0 0 0

1个答案按时间排序按投票排序

0 0

在你的list.gsp 的script最后面加入下面两句试一下：
Ext.getCmp(node.id).add(body);

Ext.getCmp(node.id).doLayout();
node.id可在加载的时候传入：
params : {param1: node.id},
autoLoad : {url:'list.gsp', scripts:true}

2008年7月02日 11:53