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:'UserServlet',

//请求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>