ExtJS 与后台的XML格式的数据交互代码示例

<!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>表格面板</title>
<link rel="stylesheet" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext-2.3.0/adapter/ext/ext-base.js" ></script>
<script type="text/javascript" src="../ext-2.3.0/ext-all.js"></script>
<script type="text/javascript" src="../ext-2.3.0/source/locale/ext-lang-zh_CN.js"></script>

<script type="text/javascript">
	Ext.onReady(function(){
		
		var _grid = new Ext.grid.GridPanel({
			renderTo:Ext.getBody(),
			id:'view_grid',
			height:200,
			width:350,
			enableColumnMove:false,
			colModel:new Ext.grid.ColumnModel(
							{
								header:'姓名',
								align:'center',
								width:50,
								id:'name',
								menuDisabled:true
							},
							{
								header:'年龄',
								dataIndex:'age',
								align:'center',
								menuDisabled:true
							},
							{
								header:'性别',
								dataIndex:'sex',
								align:'center',
								menuDisabled:true
							},
							{
								header:'是否在职',
								dataIndex:'isOnJob',
								align:'center',
								menuDisabled:true
							}
						),
			columns: [
				{id:'name', header: "姓名", width: 80, sortable: true,align:'center', dataIndex: 'name'},
				{header: "年龄", width: 80, sortable: true, align:'center', dataIndex: 'age'},
				{header: "性别", width: 80, sortable: true,align:'center', dataIndex: 'sex'},
				{header: "是否在职", width: 80, sortable: true,align:'center', dataIndex: 'isOnJob'},
			],
			store:new Ext.data.Store({
						autoLoad:true,
						url:'http://localhost/extjs/xml/contacts.xml',
						reader:new Ext.data.XmlReader({record:'contact'},Ext.data.Record.create(["name",'sex',{name:'age',type:'int'},{name:'isOnJob',type:'boolean'}])),
						listeners:{
							//'load':function(){alert(this.getAt(0).get('name'));}
						}
					}),
			sm:new Ext.grid.RowSelectionModel({
					singleSelect:true,
					listeners:{
						'rowselect':function(_sm,_index,_record){
							//alert("测试");
							Ext.getCmp('view_form').getForm().loadRecord(_record);
						}
					}
			})
		});//end of grid
						 
		
		var _form = new Ext.form.FormPanel({
			renderTo:Ext.getBody(),
			frame:true,
			id:'view_form',
			height:200,
			width:350,
			defaultType:'textfield',
			items:[
				{
					fieldLabel:'姓名',
					name:'name'
				},
				{
					fieldLabel:'年龄',
					name:'age'
				},
				{
					fieldLabel:'性别',
					name:'sex'
				}
			],
			buttonAlign:'right',
			buttons:[
				{
					text:'修改',
					handler:function(){
						
						if(Ext.getCmp('view_grid').getSelectionModel().getCount() <= 0){
							return ;
						}
						
						var _rs = Ext.getCmp('view_grid').getSelectionModel().getSelected();
						var _values = this.ownerCt.getForm().getValues() ;
						_rs.set('name',_values['name']);
						_rs.set('sex',_values['sex']);
						_rs.set('age',_values['age']);
					}
				}
			]
		});//end of _form
	});
</script>
</head>

<body>
</body>
</html>

知识共享许可协议
《ExtJS 与后台的XML格式的数据交互代码示例》常伟华 创作。
采用 知识共享 署名-相同方式共享 3.0 中国大陆 许可协议进行许可。
相邻依据:发表时间
  • 多说评论
  • 签名
  • 新浪微博
  • 默认评论
  • Tab Header 5

0 条评论 / 点击此处发表评论

Tab Content 5

开发技术


开发平台和工具

sitemap     152.50ms