ext form入门的练习

最新推荐文章于 2014-03-29 09:58:00 发布

原创最新推荐文章于 2014-03-29 09:58:00 发布 · 109 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #PHP #工作

ajax相关专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个使用ExtJS框架创建的应用实例，包括表单面板及网格面板的实现方式。通过具体的代码示例展示了如何构建带有不同字段的表单，并将数据展示在一个可动态调整高度的网格中。此外，还实现了添加数据的功能，点击按钮后弹出窗口以输入新数据。

Ext.onReady(function(){
	var form = new Ext.form.FormPanel({
		baseCls: 'x-plain',
		labelWidth: 55,
		url:'save-form.php',
		defaultType: 'textfield',

		items: [{
		fieldLabel: '姓名',
		name: 'to',
		anchor:'50%' // anchor width by percentage
		},{
		fieldLabel: '职位',
		name: 'subject',
		anchor: '50%' // anchor width by percentage
		},{
		fieldLabel:'备注',
		name:'ps',
		anchor:'90'
		}]
		});
	var data=[[1,'james','manager'],
	          [2,'falk','engine'],
	          [3,'d','www'],
	          [4,'s','fff']];
	var vstore=new Ext.data.ArrayStore({data:data,fields:["id","name","job"]});

	var grid=new Ext.grid.GridPanel({
		title:"asus",
		store:vstore,
		autoHeight:true,
		tbar : [{
			text : '添加',
			iconCls:'tianjia',
			handler : function(){
			var win=new Ext.Window({
				title:"sssdsdsdfds",
				width:300,
				height:400,
				items:[form]
			});
			win.show();
		}
		}],
		columns:[{header:"编号",dataIndex:'id'},{header:"姓名",dataIndex:'name'},{header:"工作",dataIndex:"job"}]
	});
	new Ext.Viewport({layout:"border",items:[{region:"north",height:100,title:"顶部"},{region:"west",width:150,title:"菜单栏"},{region:"center",title:"内容部分",items:[grid]}]});
});