extjs的form表单对象怎么复用

buzhou111 2017-03-09 01:32:13

我用extjs做了一个grid，有增删改查功能，增加和修改是点击表格某一行获取该行数据，然后显示在弹出框的表单里的，但是修改的表单和增加的表单内容都一样，但是我代码里却要创建两次表单，一个增加，一个修改。能不能在代码里只写一个form对象啊，不行的话只写一次form的items 也行啊，求大神指导下

...全文

126 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

buzhou111 2017-03-11

打赏
举报

引用 3 楼 showbo 的回复:

看ext-4.1.1a/examples/form/form-grid.html 这个示例，只需要调用formPanel的loadRecord加载数据就行了，新建的就加载空数据集


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="ext-4.2.1.883/resources/css/ext-all.css">
  <script type="text/javascript" src='ext-4.2.1.883/ext-all.js'></script>
  <script type="text/javascript" src='ext-4.2.1.883/ext-lang-zh_CN.js'></script>
  <script type="text/javascript">
  Ext.onReady(function() {
	  Ext.require
	  var store = Ext.create('Ext.data.Store', {
		    storeId:'simpsonsStore',
		    fields:['name', 'email', 'phone'],
		    data:{'items':[
		        { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
		        { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
		        { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
		        { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
		    ]},
		    autoLoad: true,
		    proxy: {
		        type: 'memory',
		        reader: {
		            type: 'json',
		            root: 'items'
		        }
		    }
		});
	  store.load();
     var grid = new Ext.grid.GridPanel({
        title: 'DEMO',
        bbar: new Ext.PagingToolbar({
            pageSize: 10,
            store: store,
            displayInfo: true,
            displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
            emptyMsg: "没有记录"
        }),
        tbar: [
            { 
            	xtype: 'button', 
            	text: '新增',
            	handler: function() {
            		//这个form和修改中的form 是一样的，那么能不能只创建一个form ,能够在新增和修改中使用
            		var form = Ext.create('Ext.form.Panel', {
            		    bodyPadding: 5,
            		    width: 350,
            		    items: [
            		        {
            		         	xtype: 'textfield',
           		        		fieldLabel: 'Name',
            		        	name: 'Name'
            		    	},
            		    	{
            		         	xtype: 'textfield',
           		        		fieldLabel: 'Email',
            		        	name: 'Email'
            		    	},
            		    	{
            		         	xtype: 'textfield',
           		        		fieldLabel: 'Phone',
            		        	name: 'Phone'
            		    	}
            		    ],
            		    buttons: [{
            		        text: '提交',
            		        handler: function() {
            		            
            		        }
            		    }]
            		});
            		var win = Ext.create('Ext.window.Window',{
            			title: "新增",
            			items: [form],
            			width: 350,
            			layout: 'fit',
            			bodyPadding: 10
            		}).show();
            		
            	}
           	},
            { 
           		xtype: 'button', 
           		text: '修改',
            	handler: function() {
            		var rec = grid.getSelectionModel().getSelection();
            		//console.log(data);
            		var form = Ext.create('Ext.form.Panel', {
            		    bodyPadding: 5,
            		    width: 350,
            		    items: [
            		        {
            		         	xtype: 'textfield',
           		        		fieldLabel: 'Name',
            		        	name: 'Name'
            		    	},
            		    	{
            		         	xtype: 'textfield',
           		        		fieldLabel: 'Email',
            		        	name: 'Email'
            		    	},
            		    	{
            		         	xtype: 'textfield',
           		        		fieldLabel: 'Phone',
            		        	name: 'Phone'
            		    	}
            		    ],
            		    buttons: [{
            		        text: '提交',
            		        handler: function() {
            		            
            		        }
            		    }]
            		});
            		var win = Ext.create('Ext.window.Window',{
            			title: "新增",
            			items: [form],
            			width: 350,
            			layout: 'fit',
            			bodyPadding: 10
            		});
            		form.getForm().loadRecord(rec);
            		win.show();
            	}
        	},
        ],
        store: store,
        columns: [
            { text: 'Name',  dataIndex: 'name' },
            { text: 'Email', dataIndex: 'email', flex: 1 },
            { text: 'Phone', dataIndex: 'phone' }
        ],
        height: 200,
        width: 400,
        renderTo: Ext.getBody()
    });

  })
    
  </script>
</head>
<body>
  
</body>
</html>

这个是代码

buzhou111 2017-03-09