Extjs 开发笔记【持续更新】

1、Extjs 定制边框

style:'border-left: 1px solid #8db2e3;', 

2、Extjs可视化组件在火狐浏览器中显示小字体的解决方法

1. <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">  
2. <link rel="stylesheet" type="text/css" href="css/ext-patch.css">  

ext-patch.css可在网上搜索下载。

请一定注意ext-patch.css一定要在ext-all.css后面引入,最好放到最后引入! 

感谢原作者，一点一滴的汗水啊！

3、ExtJs combobox 自定义过滤、模糊过滤

combobox添加监听事件：

listeners :{

     beforequery : queryByKey

}

实现监听方法：

     var q = qe.query.toLocaleLowerCase();  

    forceAll = qe.forceAll;  

    if(forceAll === true || (q.length >= combo.minChars)){  

        if(combo.lastQuery !== q){  

            combo.lastQuery = q;  

            if(combo.mode == 'local'){  

                combo.selectedIndex = -1;  

                if(forceAll){  

                    combo.store.clearFilter();  

                }else{  

                    combo.store.filterBy(function(record,id){  

                        var text = record.get(combo.displayField).toLocaleLowerCase();  

                        //在这里写自己的过滤代码  

                        return (text.indexOf(q)!=-1);  

                    });  

                }  

                combo.onLoad();  

            }else{  

                combo.store.baseParams[combo.queryParam] = q;  

                combo.store.load({  

                    params: combo.getParams(q)  

                });  

                combo.expand();  

            }  

        }else{  

            combo.selectedIndex = -1;  

            combo.onLoad();  

        }  

    }  

    return false;  

}

3、form标签中使用xtype : 'textfield'，正则表达式

regex : /^[^*\\?'"%<>/]*$/,

regexText : '不能输入下列特殊字符：*\\/?\'"%<>',

若要提示 regexText  信息，就需要在formpanel后添加代码

Ext.QuickTips.init();

效果：

 

4、Extjs网iframe中赋值html

Extjs获取了Dom元素

<iframe id="iframe1"></iframe>

现在我要通过代码往这个iframe中写入一段html，比如

<p>Hello World!</p>

实现：

JavaScript code

?

1	Ext.get( 'iframe1' ).dom.contentWindow.document.body.innerHTML=html;

5、让布局中的面板容器默认收起或者展开

使用配置：

   
   

    
    collapsible:true, //必须有
   
   
   
   

    
    collapsed:true, //true为收起，flase为展开(
    
    默认
    
    )
   
   

如果业务中需要动态改变此状态，可以这样，如 grid

   
   

    
    grid.expand(true); //展开
   
   
   
   

    
    grid.collapse(true);//收起
   
   

6、Ext.form.ComboBox() 每条记录中存放并获取多个值

var reader = new Ext.data.JsonReader(
	{root:'list'},
	[
	    {name : 'id'},    //真实值
	    {name : 'name'},  //显示值
	    {name : 'status'} //新增的状态值，用于判断的，可以自己添加多个
	]
);
var store=new Ext.data.Store({
	proxy : new Ext.data.HttpProxy({
	  url : 'url.json'
	}),
	baseParams : {
		varName:'varValue',
		varName:'varValue',
	},
	reader: reader
});
store.load();

var comboBox = new Ext.form.ComboBox ({
	fieldLabel : "==请选择==",
	id: "comboBox",
	anchor: '40%',
	store: store,
	displayField: 'name',
        valueField: 'id',
        triggerAction: 'all',
        mode: 'local',
        typeAhead: true,
        editable: true,
        selectOnFocus: true,
        listeners :{
    	    select: function(record){
    		console.log(record);
		//对于Ext.form.ComboBox的属性:selectedIndex在API中并不存在,不过此属性的确存在于源码中;
 		comboBox.getStore().getAt(comboBox.selectedIndex).data.status;
    	    }
    }
});

7、动态隐藏Grid的列

grid.getColumnModel().setHidden(8,true); //8：列序号；true：隐藏；false：显示 

8、 json串多了 标签<pre>，ext报错

返回的json串前面多出了<pre style="word-wrap: break-word; .....></pre>的东西，导致转js对象时报错，查看后台也没见到添加<pre>标签，应该是浏览器添加的。 

解决办法，把response的contentType设置为text/html即可： 
this.getResponse().setContentType("text/html;charset=UTF-8"); 
Content-Type对浏览器解析的一些影响 

也可以这样，在stuts.xml里面配置：

<result type="json">

<param name="root">action</param>

<param name="contentType">text/html</param>

</result>

9、Grid的分页组件要显示成中文，要引入以下文件。

adapter/ext/ext-lang-zh_CN.js

10、Extjs 给iframe传参

var  searchtitle=document.getElementById( 'search_text_2' ).value;      Ext.getCmp( "mainPanel" ).add({          title:searchtitle,          id:searchtitle,                     closable: true ,          bodyStyle: "background:url(img/xuancai2.jpg); border-width: 0px 2px 0px 0px;" ,                    html: '<iframe  scrolling="auto" frameborder="0" width="100%" height="100%" src=second.jsp?fortitle=' +searchtitle+ '></iframe>' });

　

mainPanel是个tabPanel，增加个子panel，并在子panel中嵌入iframe，search_text_2是个搜索框，iframe的src属性直接把搜索框的值传给下一个页面。下一个页面通过下面一行代码得到上一个界面搜索框的值。

String sendtitle=request.getParameter( "fortitle" );

11 、不包含特殊字符的正则表达

 /^[^*,\\?'"%<>/]*$/

表示不含有*.,/\'"%<>等特殊字符，如需增加就在[]里面加即可

12、对于EditorGridPanel 再次提交仍然存在臧数据问题，添加如下配置

pruneModifiedRecords:true

13、实现局部定时刷新

var t
function timedCount()
 {
 	t=setTimeout("timedCount()",600000);
	store.reload();
  }

14、FormPanel重置。显示窗口要写在formpael加载当前record之前，不然addForm.getForm().reset();无效，窗口中会仍有你加载的record。

addWindow.show(); // 显示窗口 
addForm.getForm().loadRecord(record);

15、遍历Tree并且高亮显示节点(递归)
var rootnodes = areaTree.getRootNode().childNodes;
findchildnode(areaTree.getRootNode().childNodes,textValue);
function findchildnode(nodes,textValue){
        for(var i=0;i<nodes.length;i++){
            var rootnode = nodes[i];
            rootnode.expand();
            console.log(rootnode.text.toLowerCase());
            var el = rootnode.getUI().getEl();
            Ext.id(el);
            var eldoc = Ext.Element.fly(el);
            if(rootnode.text.toLowerCase().indexOf(textValue)>=0){
            	console.log(el);
            	eldoc.highlight('CCFF66',{
                	attr: 'background-color', 
                	duration: 60
                });
            }else{
            	eldoc.highlight('FFFFFF',{
                	attr: 'background-color', 
                	duration: 60
                });
            }
            if(rootnode.childNodes.length>0){
                findchildnode(rootnode.childNodes,textValue);
            }   
        }
    }

---

天使女宝 全场包邮
83.00 ￥88.00 9.43 ￥5.0