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

  • 0
    点赞
  • 0
    收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值