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布局,那样调试了好久单个可以显示,整合在一起的时候就一个都不出来了!!!郁闷!