一个联动引发的思考

之前我认为工作都是重复的做某些东西，

感觉没有激情没有新鲜感没有挑战。

但今天我才发现之前的想法是错的。

每个工作都不简单、

越简单越要不简单，越简单越要高回报、

重复做某样工作可以让你有想法。

如果你的客户是挑剔的，那么代表他们有品味。

他们有品味你才有更多的回报！

如果，他们没有品味你有必要指引他们。

今天重复做了一个联动功能，才发现以前做过的都很水。

确实，一个下拉框联动很简单！我以前是这样想的。

没有经大脑经过小脑就噼噼啪啪的把代码写完了。

1，一个下拉联动重要分清谁是“主动”，谁是“被动”，不然联动会很糟糕。

“主动”方控制“被动”方，“被动”方不参与直接取数据，数据都是“主动”方请求的。

2，联动要考虑用户体验。

                                          图1

                                           图2

 

                                          图3

 

                                          图4

 

                                          图5

 

                                          图6

 

                                          图7

 

主要代码片段：

 

{
		    					fieldLabel:'角色',
		    					xtype:'combo',
		    					width:100,
		    					ref : '../roleField',
		    					displayField : 'name',
		    					valueField : 'id',
		    					triggerAction : 'all',
		    					store : new Ext.data.JsonStore({
		    						url : keel.formatUrl('getRoleList'),
		    						fields : ['id','name']
		    					}),
		    					listeners : {
		    						'select':function(me, rec, n){
		    							fp.employeeField.store.removeAll();
		    							fp.employeeField.reset();
		    							fp.employeeField.store.load({
		    								params : {
		    									roleId : rec['id']
		    								}
		    							})
		    						}
		    					}
		    				}

 

{
		    					fieldLabel:'人员',		    					
		    					xtype:'combo',
		    					width:120,
		    					ref : '../employeeField',
		    					displayField : 'userName',
		    					valueField : 'id',
		    					triggerAction : 'all',
		    					listEmptyText : '没有数据',
		    					emptyText : '   请先选择角色',
		    					mode : 'local',
		    					store : new Ext.data.JsonStore({
		    						autoLoad : false,
		    						baseParams : {start:0,limit:10000},
		    						url : keel.formatUrl('getUserList'),
		    						fields : ['id','userName'],		    						
			    					listeners : {
			    						'beforeload':function(){
			    							fp.employeeField.addClass('myloading');
			    						},
			    						'load':function(){
			    							fp.employeeField.removeClass('myloading');
			    						},
			    						'exception':function(){
			    							fp.employeeField.removeClass('myloading');
			    						}
			    					}
		    					})
		    				}

 

评论

3 楼 cryingghost 2011-08-12  

你好，想请教一下你在角色下拉框和人员下拉框中增加的那个加载中的提示信息和图标是如何实现的？只是在你的代码中看到有“ fp.employeeField.addClass('myloading');”，但具体要如何做还不清楚，敬请指教一下啊！

2 楼 chenaha 2011-02-14  

三级联动怎么做呢，并且从xml里读取数据，比如xml为：

<?xml version="1.0" encoding="gb2312" ?>
<address>
<province name="云南">
  <city name="景洪">
   <zipcode name="666100" />
  </city>
  <city name="孟海">
   <zipcode name="666200" />
  </city>
</province >
</address>

1 楼 zhengpei456 2010-12-31  

刚学习extjs，做的联动效果数据不出现，你的功能实现得很漂亮，能把你详细的代码发给我一份吗？谢谢 [e-mail]