`

EXTJS知识经验总结

JavaScriptExtJS 
阅读更多

1、防止用户在提交时进行其他操作

点击提交按钮，弹出对话框，覆盖面板，等待后台反馈信息时再取消覆盖效果

 

function progress(){

      el = grid.getEl();      

      el.mask("数据正在提交中……");    
}

 

 

 

a)  };

b) 提交按钮处调用此函数；

c) 反馈信息处调用此行代码即可:el.unmask();   

 

2、在ExtJS分页，另添加参数传递到后台

 

//store
var _storeSalesPkgClass = new Ext.data.Store({
  id:"_storeSalesPkgClass",  
  proxy : new Ext.data.HttpProxy({url:"salesPkgClassData.jsp"}),
  reader: new Ext.data.JsonReader({
   totalProperty:"totalProperty",
   root:"root"},
   [
    {name:"id"},
    {name:"className"},
    {name:"biId"},
    {name:"biName"},
    {name:"stName"},
    {name:"selected"}
   ]
  )
});


//分页常规参数
_storeSalesPkgClass.load(
  {
   params:
    {
     start:0,
     limit:5
    }
 });

//分页条件参数
_storeSalesPkgClass.on('beforeload',function(){
 Ext.apply(
  this.baseParams,
  {
             salesId:_gridJwSales.getSelectionModel().getSelected().get("id")
        }
 );
});

 

 

 

 

 

2、在已有的数据上进行数据的追加

 

 

<!--EndFragment-->

 

var myRecord = Ext.data.Record.create([   
			{name : 'value',mapping : 'value'}, 
			{name : 'name',mapping : 'name'}
		]);
		var storeAuditObjKey = new Ext.data.Store( {
			proxy : new Ext.data.HttpProxy( {
				url : 'getRuleObjKeys.action'
			}),
			reader : new Ext.data.JsonReader( {
				totalProperty : 'total', // 总记录数
				root : 'auditObjKey'
			}, myRecord)
		});
		// 追加的数据
		//var myNewRerord = new myRecord({ name: 'samb',value: 'samb' });
		//storeAuditObjKey.add(myNewRerord);
		//storeAuditObjKey.load({params:myNewRerord, scope: this,add: true});

 

3、ExtJS中 checkboxgroup组件问题

这问题可真纠结得我够久的，花了不少功夫解决，主要症结在于没清楚html代码表面和ExtJs实际值之间的差异。好了，话不多说，看解决方式：

问题:title : '操作全选', 以上为fieldset的title属性，点击操作全选，则将区域内的checkbox全部选上，onSelectAll()方法代码如下： 

function onSelectAll()
		{
		    var allcheck = document.getElementById("allCheck");
		    if (allcheck.checked) {
				Ext.select('input[name^=type]').each(function() {
						this.dom.checked = true;
				});
			//	flag = 2;
		   } else {
	
				Ext.select('input[name^=type]').each(function() {
						this.dom.checked = false;
				});
				//flag = 3;
		  } 
		}

 这种方法点击全选或取消全选，改变的只是表面上的现象，勾选了而已，而实际上checkboxgroup中的每一个复选框的值还是原来的值，并没改变，自己一直就在纠结什么全选了，取消全选了等等，根本就没抓住本质，自己管他选了没选，反正勾选了，我就记下它的ID不就行咯！（先人的代码未提供ID，乱糟糟的！气愤！），以下方法则是记住勾选的ID，

function judgeSelectAll(){
        	var str = "";
        	Ext.select('input[name^=type]').each(function() {
        		if(this.dom.checked == true){
        			str += this.dom.id + ",";
        		}
        	})
        	return str;
}

 

下面这函数就是得到勾选的值

// 得到选中的值
		function judgeSelect(){
			var totalSelectId = judgeSelectAll().split(',');
			var oper = Ext.getCmp('operateTypeId');
			var total = 0;
			var temp = '';
			var len = oper.items.length;
            for (var i = 0; i < len; i++)   
            {   
            	for(var k = 0 ; k < totalSelectId.length;k++){
	                if (oper.items.itemAt(i).id == totalSelectId[k])   
	                {   
	                    total++; 
	                    if (i != len - 1)
							temp += oper.items.itemAt(i).inputValue + ",";
						else
							temp += oper.items.itemAt(i).inputValue;
						break;
	                }  
            	}
            }   
            //alert("temp--> " + temp);
			if(total == 0){
				Ext.Msg.alert('提示',"未选择操作，请选择操作");
				return;
			}
			return temp;
		}

 

在提交的时候调用这个方法，得到返回值，就是用户勾选的内容的用逗号区分开的拼接字符串咯！

其实真怪自己对ExtJS不熟练，发现有如下方法，可以省事好多

   Ext.get(document.getElementById("allcheck")).on("click",function(){
	   if (this.dom.checked) {
			Ext.select('input[name^=type]').each(function() {
					this.dom.checked = true;
			});
	  } else {

			Ext.select('input[name^=type]').each(function() {
					this.dom.checked = false;
			});
	 } 
   })

 

获取选中的值

var s = Ext.getCmp("daily").getForm().findField('operType').getValue();
var temp = '';
for (i = 0; i < s.length; i++) {
             if (i != s.length - 1)
	temp += s[i].inputValue + ',';
            else
	temp += s[i].inputValue;
}
alert("temp--> " + tymp);

 

5、好坑爹的啊！纠结。。碰上这种问题真让人想死啊！问题是如何让panel面板居中显示，下面是解决方案：

 <body  style="text-align: center; ">
	   <jsp:include page="toolChartBar.jsp" flush="false" />
	   <div id="reportGridSearch" style="margin:0 auto;width:800"></div>
	   <div id="reportGridImage" style="margin:0 auto;width:800"></div>
	   <div id="reportGridTable" style="margin:0 auto;width:800"></div>
  </body>

 body里面的代码是让panel面板在IE浏览器中居中，而具体每一个div里的样式代码则是使其在火狐浏览器中居中显示，

，没有使用panel的border布局，那样调试了好久单个可以显示，整合在一起的时候就一个都不出来了！！！郁闷！

 

分享到：
| MYSQL经验总结
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics