ExtJs4常用代码__转载
一、如何取TreePanel中节点的父节点
//树注册右键监听
tree.addListener('itemcontextmenu',treeContextmenu);
//树注册单击监听
tree.addListener('itemclick', treeClick);
//右键菜单事件
function treeContextmenu(his, record, item,index, e) {
//节点的值
record.parentNode.raw.id;
//节点的父节点的值
record.parentNode.raw.id;
}
二、如何GridPanel刷新
//取grid组件
var grid=Ext.getCmp('typeStardard');
//刷新grid
grid.store.loadPage(1);
三、如何获取树节点的深度
function treeContextmenu(his, record, item,index, e) {
//节点的度
record.getDepth()
}
四、为Extjs textfiled文本框设置焦点
Ext.getCmp('userName').focus(false, 100);
System.out.println(sql+"->"+sid+"->"+mid+"->"+fid);
五、ExtJs button 位置居中
var win = new Ext.Window({
buttonAlign:'center',
buttons: [{
text : "确定添加",
type : 'submit',
handler : function() {
}
}]
});
六、ExtJs弹出窗口
var _window=Ext.create('Ext.Window',{
width:525,
height:480,
plain: true,
layout:'column',
headerPosition: 'top',
items: [zzjgPanelByThemeSearch,userPanelByThemeSearch],
title: '功能权限分配'
});
_window.show();//显示窗口
_window.hidden();//隐藏窗口
_window.close();//关闭窗口
七、ExtJs删除确认对话框
Ext.Msg.confirm('确认', '您将删除用户'+userName+'与专题的关联,确认删除吗?', function(btn, text){
//确认删除
if(btn=='yes'){
self.removeUserTheme(userName,themeId);
grid.store.loadPage(1);
}else{//取消删除
Ext.Msg.alert('提示','终止删除操作!');
return;
}
});
八、ExtJs创建面板
var userPanel =Ext.create('Ext.panel.Panel',{
id:'userPanelByThemeSearch',
items:grid,
collapsible:true,//面板可收缩
columnWidth:.6,
height:450,
collapseMode:'mini',//小箭头折叠
});
九、ExtJs grid创建
Components.JManager.User.prototype.getUserGridPanel=function(organizationCode){
varself=this;
varstore=Ext.create('Ext.data.Store',{
autoLoad:true,
id:'UserStore',
fields:['id','name','userName','idCard','organization'],
proxy:{
type:'ajax',
url:'UserServlet?type=queryByOrganization',
extraParams:{
standardName:code,
id:'id',
offset:0,
limit:10,
where:'',
order:'',
orderType:'',
type:0,
coordinate:'',
bufferSize:'',
bufferUnit:'',
operateType:1,
operate:'getResponseJsonByStandardName'
},//请求参数对象
actionMethods: {
read: 'POST'
},//参数传递方式
reader:{
type:'json',
root:'root',
totalProperty:'totoalProperty'
}
}
});
vargrid= new Ext.create('Ext.grid.Panel',{
title:'用户资料',
id:'UserGrid',
simpleSelect:true,//启用简单选择
multiSelect:true,//启用多选模式
width:document.body.clientWidth-300,
height:'100%',
tbar:[{text:'添加',handler:function(){
self.buildAddUserForm(organizationCode);
}},{text:'删除',handler:function(){
//self.removeUserEvent(organizationCode);
varuserName='';
varrows=grid.getSelectionModel().getSelection();
for(vari=0;i<rows.length;i++){
userName=rows[i].get('userName');
Ext.Msg.confirm('确认', '删除用户'+userName+',确认删除吗?', function(btn, text){
//确认删除
if(btn=='yes'){
self.removeUser(userName);
//刷新grid
grid.store.loadPage(1);
}else{//取消删除
return;
}
});
}
}}],
viewConfig:{
forceFit:true,
stripeRows:true//在表格中显示斑马线
},
selType:'rowmodel',
store:store,
columns:[//配置表格列
Ext.create('Ext.grid.RowNumberer',{text:'序',width:35}),
{header:"用户名",width:80,dataIndex:'userName',sortable:true},
{header:"姓名",width:80,dataIndex:'name',sortable:true},
] ,
//分页功能
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
pageSize:pageSize,
displayInfo:true,
displayMsg:'显示{0}-{1}条,共计{2}条',
emptyMsg: "没有数据"
}
),listeners:{//前置事件侦听
'itemclick':function(his, record, item, index, e){
alert(record.raw.dwmc);
},
}
});
//注册单击事件
grid.addListener('itemclick', this.gridClick);
returngrid;
};
十、获取面板的宽度与高度
varcenter=Ext.getCmp('center-region-container');
var width=center.getWidth();
var height=center.getHeight();
十一、Extjs4 formPanel与fieldSet示例
var form=Ext.create('Ext.form.Panel',{
title:'查询系统',
lableWidth:40,//标签宽度
width:240,
height:300,
frame:true,
bodyPadding:1,
items:[{
title:'图层',
xtype:'fieldset',
collapsible:true,//显示切换展开收缩状态的切换按纽
bodyPadding:0,
defaults:{
labelSeparator:":",//分隔符
labelWidth:50,
width:160//字段宽度
},
defaultType:'textfield',//设置表单字段的默认类型
items:[tree]
}]
});
十二、面板展开与收缩事件
//获取结果面板
var left=Ext.getCmp('west-region-container');
left.on('expand',function(){
alert('展开');
});
left.on('collapse',function(){
alert('收缩');
});
十三、Extjs4布局layout为accordion显示不出来()
Components.IntegratedQuery.prototype.build=function(){
//清除面板内容
removeLeftPanelContent();
//组织机构树内容
varorganzation=this.getOrganzationTree();
//获取专题权限树内容
vartreePanel=this.getThemeTree();
varcondition= Ext.create('Ext.panel.Panel',{
id:'conditionPanel',
layout:'accordion',
items:[treePanel,organzation],
height:500
});
condition.doLayout();
//添加左面板
this.rightPanel.add(condition);
};
十四、Extjs4创建树
Components.JManager.Theme.prototype.getThemeTree=function(){
//数据源store
varstore=new Ext.create('Ext.data.TreeStore',{
proxy:{
type:'ajax',
url:'ThemeServlet?type=queryThemeJsonByUserNameModuleName',
extraParams:{userName:'zhangsan',systemName:'Jportal',moduleName:'Jquery',functionName:'JMapQuery'}
},
//如果不添加fields,只能识别text及id字段
fields:['id','code','name','pid']
});
//创建树
vartree= new Ext.create('Ext.tree.Panel',{
id:'themeTreePanel',
store:store,
rootVisible:false,//隐藏根节点
userArrows:true,//在树节点中使用箭头
frame:true,
title:'数据专题',
width:290,
height:'100%',
columns:[{
xtype:'treecolumn',//树状表格列
text:'名称',//显示的列名
width:200,
dataIndex:'name'//显示的名称
},{
text:'代码',//显示的列名
dataIndex:'code',//显示的名称
width:75,
flex: 1
}],
viewConfig:{
plugins:{
ptype:'treeviewdragdrop'
}
}
});
//为树添加单击事件
tree.addListener('itemclick',this.themeTreeClick);
//注册右键事件
tree.addListener('itemcontextmenu', this.organizationTreeMenu);
returntree;
};
十五、Extjs4使用Ajax请求
/**
*检查用户名是否存在
*@paramuserName
*/
function checkUserName (userName){
var requestConfig={
//请求url服务器地址
params:{userName:userName,type:'checkUserName'},
//请求参数对象
callback:function(options,success,response){
if(success){
var flag=response.responseText;
if(flag==1){
alert('用户名已存在,请重新输入用户名!');
Ext.getCmp('userName').focus(false, 100);
}else{
Ext.getCmp('password').focus();
}
}else{
alert('传输过程中出现错误');
}
}
};
Ext.Ajax.request(requestConfig);
};
十六、Extjs4中Grid组件store装载json数据
Components.IntegratedQuery.prototype.createGridPanel=function(tableName,code){
var self=this;
var requestConfig={
url:'RequestXMLToResultJsonServlet',//请求url服务器地址
params:{
standardName:code,
offset:0,
limit:8,
where:'',
order:'',
orderType:'',
type:0,
coordinate:'',
bufferSize:'',
bufferUnit:'',
operateType:1
},//请求参数对象
callback:function(options,success,response){
if(success){
if(response.responseText!=""){
var store=newExt.data.JsonStore({
data:Ext.decode(response.responseText).root,
autoLoad:true,
root:'root',
totalProperty: 'totoalProperty',
fields:['mc','lxr','lxdh','dz']
});
//store.loadRawData(Ext.decode(response.responseText).root);
var grid= new Ext.create('Ext.grid.Panel',{
title:tableName,
id:'resultSetPanel'+new Date().getTime(),
store:store,
columns:[//配置表格列
Ext.create('Ext.grid.RowNumberer',{text:'序',width:35}),
{header:"名称",width:80,dataIndex:'mc',sortable:true},
{header:"地址",width:80,dataIndex:'dz',sortable:true},
]
});
self.leftPanel.add(grid);
//self.leftPanel.doLayout();
}
}else{
Ext.Msg.alert('提示','删除失败!');
}
}
};
Ext.Ajax.request(requestConfig);
};
十七、Extjs4中Grid的Event
itemclick( Ext.view.Viewthis, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObjecte ) //鼠标的单击事件
itemcontextmenu( Ext.view.Viewthis, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObjecte ) //鼠标的右键事件
itemdblclick( Ext.view.Viewthis, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObjecte ) //鼠标的双击事件
itemmousedown( Ext.view.Viewthis, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObjecte )
itemmouseenter( Ext.view.Viewthis, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObjecte )
itemmouseleave( Ext.view.Viewthis, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObjecte )
itemmouseup( Ext.view.Viewthis, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObjecte )
//后续添加
grid.addListener('itemclick',click,this);
function click(view,record,item,index,e){
if (typeof (record.raw) != 'undefined') {
name=record.raw.NAME; //获取单击行的相应数据
path=record.raw.PATH;
num = index;
}
}
十八、javaScript 定时器的使用
setInterval 定时触发
用法：timerID =setInterval(codeStr, milliSeconds);
timerID 是 setInterval 的返回值，返回定时器的 ID，当然也可以不要返回值。
codeStr 是要执行的代码。
milliSeconds 是触发的间隔时间，单位为毫秒。
示例
setInterval("alert('您好！');", 2000); //每 2 秒钟弹出一个对话框。
第一个参数也可以是函数，比如：
setInterval(function () { alert("您好！"); }, 2000); //每 2 秒钟弹出一个对话框。function () 是个匿名函数。
clearInterval 取消定时器
用法：clearInterval(timerID);
timerID 就是 setInterval 的返回值
十九、Extjs4 时间格式化
Ext.util.Format.date(new Date(), "Y-m-d H:i:s")
二十、JavaScript 中使用 replace 达到 replaceAll的效果
orgStr.replace(newRegExp(findStr, 'g'), replaceStr)
二十一、slice()、substring()、substr()的区别
stringObject.slice（startIndex，endIndex）
返回字符串 stringObject 从 startIndex 开始（包括 startIndex ）到 endIndex 结束（不包括 endIndex ）为止的所有字符。
1）参数 endIndex 可选，如果没有指定，则默认为字符串的长度 stringObject.length 。
var stringObject = "hello world!";
alert(stringObject.slice(3)); // lo world!
alert(stringObject.slice(3,stringObject.length)); // lo world!
【注1】字符串中第一个字符的位置是从【0】开始的，最后一个字符的位置为【stringObject.length-1】，所以slice（）方法返回的字符串不包括endIndex位置的字符。
2）startIndex 、endIndex 可以是负数。如果为负，则表示从字符串尾部开始算起。即-1表示字符串最后一个字符。
var stringObject = "hello world!";
alert(stringObject.slice(-3)); // ld!
alert(stringObject.slice(-3,stringObject.length)); // ld!
alert(stringObject.slice(-3,-1)); // ld
【注2】合理运用负数可以简化代码
3）startIndex、endIndex 都是可选的，如果都不填则返回字符串 stringObject 的全部，等同于slice(0)
var stringObject = "hello world!";
alert(stringObject.slice()); // hello world!
alert(stringObject.slice(0)); // hello world!
4）如果startIndex、endIndex 相等，则返回空串
【注3】String.slice() 与 Array.slice() 相似
stringObject.substring(startIndex、endIndex)
返回字符串 stringObject 从 startIndex 开始（包括 startIndex ）到 endIndex 结束（不包括 endIndex ）为止的所有字符。
1）startIndex 是一个非负的整数，必须填写。endIndex 是一个非负整数，可选。如果没有，则默认为字符串的长度stringObject.length 。
var stringObject = "hello world!";
alert(stringObject.substring(3)); // lo world!
alert(stringObject.substring(3,stringObject.length)); // lo world!
alert(stringObject.substring(3,7)); // lo w,空格也算在内[l][o][ ][w]
2）如果startIndex、endIndex 相等，则返回空串。如果startIndex 比 endIndex 大，则提取子串之前，调换两个参数。即stringObject.substring（startIndex，endIndex）等同于stringObject.substring（endIndex，startIndex）
var stringObject = "hello world!";
alert(stringObject.substring(3,3)); // 空串
alert(stringObject.substring(3,7)); // lo w
alert(stringObject.substring(7,3)); // lo w
【注4】与substring（）相比，slice（）更灵活，可以接收负参数。
stringObject.substr（startIndex，length）
返回字符串 stringObject 从 startIndex 开始（包括 startIndex ）指定数目（length）的字符字符。
1）startIndex 必须填写，可以是负数。如果为负，则表示从字符串尾部开始算起。即-1表示字符串最后一个字符。
2）参数 length 可选，如果没有指定，则默认为字符串的长度 stringObject.length 。
var stringObject = "hello world!";
alert(stringObject.substr(3)); // lo world!
alert(stringObject.substr(3,stringObject.length)); // lo world!
alert(stringObject.substr(3,4)); // lo w
3）substr（）可以代替slice（）和substring（）来使用，从上面代码看出 stringObject.substr(3,4) 等同于stringObject.substring(3,7)
二十二、Javascript Math ceil()、floor()、round()三个函数的区别
ceil()：将小数部分一律向整数部分进位。
如：
Math.ceil(12.2)//返回13
Math.ceil(12.7)//返回13
Math.ceil(12.0)// 返回12
floor()：一律舍去，仅保留整数。
如：
Math.floor(12.2)// 返回12
Math.floor(12.7)//返回12
Math.floor(12.0)//返回12
round()：进行四舍五入
如：
Math.round(12.2)// 返回12
Math.round(12.7)//返回13
Math.round(12.0)//返回12
二十三、JS四舍五入为指定小数位数的数字
JavaScript toFixed() 方法
toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。
<scripttype="text/javascript">
varnum = new Number(13.37);
document.write(num.toFixed(1))
</script>
