extjs 常见的小问题

今天，小白就来总结下extjs的使用的时候的各种小问题或者说是小技巧。希望能够给各位刚接触extjs的朋友一点帮助。

1.当存在store的各种组件的store的autoload属性为false的时候，在某个事件进行（例如容器的展开事件expand或者某个按钮的点击事件)的情况下，需要手动的去加载store即xxx.store.load(),会发现请求的数据什么都一切正常，但是就是页面上就是不显示，经过很长时间的请教与琢磨，才知道是因为Load事件的异步照成的，解决办法是在store.load的回调函数中加入组件的刷新操作。下面的代码即是 treePanel在展开的情况下才去刷新数据源。

 1 'beforeexpand' : function(node, deep, animal) {       
 2                                     if (node != null || node.id != "top_root")   
 3                                     {  
 4                                         var panel = this;
 5                                         if(!this.getRootNode().hasChildNodes())
 6                                         {
 7                                             panel.store.load({
 8                                                 callback:function(records, operation, success){
 9                                                     panel.expandAll();
10                                                 }
11                                             });
12                                         }                    
13                                     }  
14                                 } 

View Code

2.combobox插入一条无或者原来不存在数据库中的记录，可以通过在store的监听Load事件中添加。并且可以通过在加载的时候传递参数，在proxy属性下的extraParams定义参数并且传值，实例如下：

var AuditIDsStore = Ext.create('Ext.data.JsonStore', {
        autoLoad:true,
        proxy: {
            type: 'ajax',
            url: path+'SysUser/GetAllUser',
            reader: {
                type: 'json',
                root: 'result',
                idProperty: 'ID'
            },
            extraParams: { "uid":uid}
        },
        fields: ['ID', 'NickName'],
        listeners: {  
            'load':function(){
                this.insert(0,{"ID":0,"NickName":"无"});
            }
        }
    });

需要注意的地方： 
1.minChars：如果没有为该属性赋值，则默认是4，即在输入4个字符时，才会触发自动完成（即动态查询） 
2.forceSelection：只能从下拉框中任选一个值，如果输入的值不存在下拉框中，将会被自动清空。 
3.queryParam：当在输入框输入1个字符时，将会把“singer.singerName=输入值”传递到服务端。 
4.triggerAction : 'all'：当值为all时，不传递queryParam参数，即不会会把“singer.singerName=输入值”传递到服务端，当值为“query”时，则传递queryParam参数。 
5.hideTrigge：这个属性当为true时，会隐藏掉combobox的下拉按钮。（在这里不采用，已注释） 

3.当存在某个动作操作的时候要改变store的参数，即改变store的数据源的时候，可以通过在store加载赋值之前，去改变store的参数。实例如下:

PreNodeIDStore.getProxy().setExtraParam('参数',参数值);  

在form里面可以通过下面的方法去通过name去定位到某个组件:form.findField("yourName")，也可以通过js的方法:document.getElementsByName("xxx")[0]

1. 解决查询条件分页问题（当点击分页工具栏下一页上一页按钮的时候，会导致查询条件消失的解决办法）          
2.     abStore.on('beforeload', function(store, options) {  
3.                        
4.                 var apply = Ext.getCmp('applytime').getValue();  
5.                 var end2 = Ext.getCmp('endtime').getValue();  
6.                 var start = Ext.util.Format.date(apply, 'Y-m-d');  
7.                 var stop = Ext.util.Format.date(end2, 'Y-m-d');  
8.       
9.         var new_params = {  
10.                 applytime : start,  
11.                 endtime : stop  
12.                         };  
13.         Ext.apply(store.proxy.extraParams, new_params);  
14.  }); 

4.当下拉框的某个元素被动态移除的时候，会造成下拉框不存在这个选项，也就是说会显示不了显示项，而是会显示成数字，针对这种选项可能因为其他界面缺失，而照成修改的时候显示不了中文的情况，小白自己发现，可以通过以下方式解决。

        var AuditIDs = null;
        AuditIDsStore.each(function(record){
            if(record.get('ID')==records.get("AuditIDs"))
            {
                AuditIDs = records.get("AuditIDs");
            }
        });
//即是用来判断原来的值在现在的下拉框的选项中还是否存在的，如果不存在，则是null，当Null这个值作为值赋值给下拉框的时候，则会显示为空，然后就可以用来判断逻辑操作了

5.当extjs 下是store 需要在全局使用的时候，可以通过给store 赋值，然后通过 Ext.data.StoreManager.lookup('id')的方法锁定到store.

6.界面无故错乱的原因:

　　1,id的错误,首先要查看 ,在同一个页面中，是否有重复的id 属性，如果有，会照成渲染问题，导致界面的错乱。

　　2.当子组件使用layout:fit布局的时候，而他的父容器却没有指定宽高，会照成容器的填充失败。

　　当动态添加或者其他因素导致界面上各个组件的显示混乱掉的时候，这个极大的原因是因为在各个组件中设置了id，导致id的重复，然后导致extjs下的渲染失败，就会形成界面混乱，因此，在遇到无缘无故的界面混乱时，首先检查下id的重复，最后说一句，尽量不要给控件使用id，可以通过使用name来给组件标示。

7.store读取json数据源显示数据的问题  明明json里面有多条数据，但是总是显示的一条数据，不知道为什么。后来才知道，原来是自己的json数据的问题，id重复，导致了只读取了一条json数据，（一般情况下是不会出现这个问题的）!

8:监听控件的keypress,keyup等事件的时候，需要加上enableKeyEvents: true 配置项，否则监听不了。

 

转载于:https://www.cnblogs.com/wangqc/p/extjsStore.html