`

ProductGridPanel 那个rowselect的事件那样用会照成死循环吗

    博客分类:
  • Ext
阅读更多
见一下代码 那个rowselect的事件那样用会照成死循环吗
/********创建FormPanel*******/
ProductFormPanel = Ext.extend(Ext.form.FormPanel,{
	constructor:function(){
		ProductFormPanel.superclass.constructor.call(this,
			{
				labelWidth:45,
				defaultType:'textfield',
				defaults:{anchor:'90%'},
				baseCls:'x-plain',
				items:[
					{fieldLabel:'姓名',name:'name'},
					{fieldLabel:'年龄',name:'age'},
					{
						fieldLabel:'性别',
						hiddenName:'sex',
						xtype:'combo',
						mode:'local',
						displayField:'sex',
						readOnly:true,
						triggerAction:'all',
						value:'男',
						store:new Ext.data.SimpleStore({
							fields:['sex'],
							data:[['男'],['女']]
						})
					}
				]
			})
	},
	reset:function(){
		this.getForm().reset();
	},
	getValue:function(){
		if(this.getForm().isValid()){
			return new Ext.data.Record(this.getForm().getValues());
		}else{
			throw Error('表单未能通过!');
		}
	},
	setValue:function(_r){
		this.getForm().loadRecord(_r);
		
	}
});
/*******创建Windows*********/
ProductWindows = Ext.extend(Ext.Window,{
	form: new ProductFormPanel(),
	constructor:function(){
		this.form = new ProductFormPanel();
		 ProductWindows.superclass.constructor.call(this,
			{
				plain:true,
				width:300,
				modal:true,
				items:this.form,
				closeAction:'hide',
				buttons:[
				{
					text:'确定',
					handler:this.onSubmitClick,
					scope:this
				},
				{
					text:'取消',
					handler:this.onCancelClick,
					scope:this
				}]
			}
		 );
		 this.addEvents('submit');
	},
	close:function(){
		this.form.reset();
		this.hide();
	},
	onCancelClick:function(){
		this.close();
	},
	onSubmitClick:function(){
		try{
			
			this.fireEvent('submit',this,this.form.getValue());
			this.close();
		}catch(_err){
			return;
		}
	}
});
/*******创建InsertWin*******/
InsertProductWin = Ext.extend(ProductWindows,{
	title:'添加产品'
});
/*******创建UpdateWin*******/
UpdateProductWin = Ext.extend(ProductWindows,{
	load:function(_r){this.form.setValue(_r);},
	title:'修改产品'
});
/*******创建GridPanel*******/
var data = [{name:'张三',sex:'男',age:18},{name:'李四',sex:'女',age:20}];
var store = new Ext.data.JsonStore({
	data:data,
	autoLoad:true,
	fields:['name','age','sex']
});
var cm = new Ext.grid.ColumnModel([
{dataIndex:'name',header:'姓名',sortable:true},
{dataIndex:'sex',header:'性别',sortable:true},
{dataIndex:'age',header:'年龄',sortable:true}
]);
ProductGridPanel = Ext.extend(Ext.grid.GridPanel,{
	insertwin:new InsertProductWin(),
	updatewin:new UpdateProductWin(),
	constructor:function(){
		ProductGridPanel.superclass.constructor.call(this,{
			cm:cm,
			region:'center',
			height:300,
			store:store,
			border:false,
//这个地方这样用是死循环了吗
			sm:new Ext.grid.RowSelectionModel({
				 singleSelect:true,
				 listeners:{
				 	'rowselect':{
				 		fn:function(_sel,_index,_r){this.fireEvent('rowselect',_r)},
				 		scope:this
				 	}
				 }
			}),
			title:'测试',
			tbar:[
				{
					text:'添加记录',
					handler:function(){this.insertwin.show();},
					scope:this
				},
				'-',
				{
					text:'修改记录',
					handler:function(){
//								this.updatewin.show();
//								var r = this.getSelected();
								try{
									this.updatewin.show();
										this.updatewin.load(this.getSelected());
								}catch(_err){
									alert(_err.description);
								}
							},
					scope:this
				}]
		}),
		this.insertwin.on('submit',this.onInsertWinSubmit,this);
		this.addEvents('rowselect');
	},
	getSelected:function(){
			var _sm = this.getSelectionModel();
			if(_sm.getCount()==0)
			{
				throw Error('请选择一条记录!');
			}
			return _sm.getSelected();
		},
	onRowSelect:function(_sel,_index,_r){
			this.fireEvent('rowselect',_r);
		},
	insert:function(_r){
			alert(Ext.util.JSON.encode(_r));
		
			this.getStore().add(_r);
		},
	onInsertWinSubmit:function(_win,_r){
			
			this.insert(_r);
	}
});


Ext.onReady(function(){
	var grid = new ProductGridPanel();
	var view = new Ext.Viewport({
		renderTo:Ext.getBody(),
		items:[grid]
	});
});



如何能把ToolBar也封装成一个类呀!
分享到:
评论

相关推荐

    dejo_rowselect_map sample

    dejo_rowselect_map sample dejo_rowselect_map sample dejo_rowselect_map sample

    pb所有函数、常用事件用法

    数据窗口事件如`RowSelect`(行选择事件)和`Fetch`(数据获取事件)是处理数据交互的关键。 5. **数据库访问**: PB通过ADO.NET、OLE DB或ODBC等方式连接到各种数据库。函数如`SQLExecute()`用于执行SQL语句,`...

    使用Ext的Grid,Form,Dialog来实现分页列表,创建,修改,删除功能

    这可以通过监听Grid的行选择事件(`rowselect`)来实现,获取选中行的数据,填充到Form中,然后显示Dialog。保存按钮的处理函数会更新选定记录的信息。 6. **删除功能**:删除操作通常涉及从Grid中选择一行,然后...

    Gridview 72绝技

    18. 脚本事件:使用RowCreated和RowDataBound事件处理JavaScript事件,增强交互性。 19. 点击事件:通过定义ButtonField或HyperLinkField,配合CommandName和CommandArgument属性,实现行级别的点击事件。 20. ...

    Ext面向对象开发实践代码第1/2页

    在GridPanel的配置中,我们看到了`sm`(SelectionModel)的设置,它允许用户选择单行数据,并在选择时触发自定义事件 `rowSelect`。`store` 是一个 `JsonStore`,用于存储数据,这里包含两个人物的信息。`colModel` ...

    PB12.5选中行变色_数据窗口技术

    例如,可以添加`dw_1.RowSelect`事件,当用户点击某行时,这个事件会被触发。 4. **编程逻辑**:在事件处理函数内,可以获取选中行的索引,并使用数据窗口对象的API方法来改变行的背景色。例如,可以使用`...

    Gridview72绝技

    5. 行选择:通过设置RowSelect事件,实现单行或多行选择功能,方便进一步的数据操作。 6. 表格样式:利用CSS自定义GridView的外观,包括表格样式、交替行颜色、表头样式等,提升用户体验。 7. 鼠标事件:通过...

    EasyUI的小案例

    例如,可以在按钮的“click”事件上绑定删除操作,或者在表格的“rowselect”事件上绑定编辑功能。 7. **数据绑定和模型** EasyUI结合JSON对象和JavaScript数据模型,使得数据与视图的同步变得简单。通过"data...

    GridView的应用

    GridView还提供了行选择功能,用户可以设置SingleSelect或MultiSelect模式,通过设置RowSelect事件处理用户的选择操作。 5. 自定义模板字段 GridView的灵活性体现在其模板字段上,允许开发者自定义列的显示样式和...

    GridView 高级扩展应用

    5. 行选择:`GridView.RowSelect`事件可用于响应用户选择某行的操作。同时,可以设置`GridSelectionMode`属性来改变选择行为,如单选或多选。 6. 分页:默认的分页功能可通过设置`AllowPaging`为`true`开启,然后...

    PB9多选行.rar

    3. **事件处理**:为了响应用户的多选操作,开发者需要编写事件处理程序,如`ItemSelect`或`RowSelect`事件。这些事件在用户选择或取消选择行时触发,使应用程序能够根据选择的行执行相应的操作。 4. **数据窗口...

    gridview 多选

    在Windows Forms中,使用`DataGridView.SelectionMode`属性,可设置为全选(`FullRowSelect`)、单元格选择(`CellSelect`)或行选择(`RowSelect`)。ASP.NET中没有直接的属性设置,但可以通过JavaScript或jQuery在...

    treePanel与gridPanel技术实现页面的增删改查

    - 表格中的行可以被选中,通过监听`cellclick`或`rowselect`事件,可以响应用户的选择操作。 - GridPanel的编辑功能通常通过`EditorGridPanel`实现,允许用户直接在单元格内进行修改,支持单行编辑和多行编辑模式...

    extjs把数据导出至excel

    你可以监听Grid的`cellclick`或`rowselect`事件,当用户触发导出时调用这些方法。 3. **生成CSV字符串**:使用`getRowsData`方法获取Grid中的所有数据行,并转换为CSV格式。这个过程包括遍历每一行,获取每个单元格...

    jmesa的源码解读(共五部分)

    在`limit`包中,`Limit`接口的实现通常是简单的,但其组合了`RowSelect`、`FilterSet`和`SortSet`等组件,通过`Factory`模式将这些元素组装起来,以实现复杂的查询逻辑。例如,`RowSelect`处理分页算法,`FilterSet`...

    IGrid数据表格控件及其例子

    IGrid提供了丰富的事件,如CellClick、RowSelect、ColumnResize等,开发者可以通过监听这些事件来实现用户交互逻辑。例如,当用户点击某个单元格时,可以触发一个自定义的事件处理函数,执行特定的操作。 4. **...

    ADF实现多选框及分页

    ADF提供了`pageChange`和`rowSelect`等事件,可以用来更新后台数据或执行其他业务逻辑。 ```xml <af:commandActionListener action="#{controller.rowSelected}" event="rowSelect"/> <!-- 表格列定义 --> ``...

    ExtJS4.0下的gridPanel组建完全版

    例如,可以通过监听`rowselect`事件来实现在行被选中时触发的自定义操作。 7. **插件扩展**:GridPanel可以与其他ExtJS组件和插件结合使用,如行选择器(RowSelectionModel)、检查列(CheckColumn)和拖放排序...

    sigma_grid_with_csharp

    5. **事件处理**:AJAX网格控件通常有许多可触发的事件,如RowSelect、DataBound等,开发者可以通过C#代码处理这些事件,实现特定的业务逻辑或用户交互反馈。 6. **性能优化**:在处理大量数据时,可能会采用分页和...

    ADF Table popup弹出编辑和添加

    ADF 提供了`rowSelect`事件,可以在JavaScript或后台Bean中进行处理。在Bean中,可以通过`setRowKey`方法获取选定行的数据键值,然后根据需求加载该行的详细信息。 2. **弹出窗口(Popup)创建**:ADF 提供了`AFW_...

Global site tag (gtag.js) - Google Analytics