解决extjs下拉框可全选,store的load方法里insert——extjs JSONStore的load事件/insert,add方法应用 如何动态改变显示数据

1.场景/功能描述
   1.1产品分类管理(增加,修改,删除,查询)
   1.2产品查询界面,查询下拉条件有:产品分类。
   
2.分析
    业务数据存储在数据库。界面显示时请求web服务器,再而从数据库中读取数据。
    相同:场景中1.1查询所有产品分类与1.2加载所有产品分类作为条件,这两部分的数据集一样
    不同:场景1.2的数据集需要多一项,“全部”,即用户可选“全部”项,查询所有分类的产品
3.实现
    只描述关键代码
    
    方法1:
            前台:
            Ext.Ajax.request({
                extraParams:{'from':'1.1'}//from表示界面源,1.1表示场景1.1
            });
            
            后台:
                
                IList<ProductCate> listCate = db.getList("select cateid,catename from tbProductCate ");//读取数据
                
                string _from = Request.From["from"].ToString();
                if( _from == "1.2")
                {
                    listCate.insert(0, new ProductCate("-1","全部"));
                }
                
                Respone.Write(listCate.toJSON());
                Respone.End();
            
    方法2:
            在场景1.2部分js代码中,在 productCateJsonStore增加load事件的监听。
            var productCateJsonStore  = new Ext.data.JSONStore(
                ...//其他配置简略
                listeners :  {
                    load : function()
                    {
                         this.insert(0,{cateid:-1,catename:'全部'});
                         //this.add({cateid:-1,catename:'全部'});是加载到最后面
                    }
                }
            );
    
    方法3:
        在场景1.2中将下拉框单选改为列表多选。

    对比分析:
    方法1:比较土,修改代码量少,扩展性中等。
    方法2:实现当前需求最简单做法。
    方法3:修改代码量大,但用户体验好。

4.扩展
    在JSONStore的load事件里,可get某一条数据,然后修改某一项的值,或者remove

原文地址:https://www.cnblogs.com/mike-mei/p/13208509.html