亚洲国产成人片在线观看无码,国产成人久久精品亚洲小说,亚洲av无码专区青青草原

Ext动态加载JS文�g

艾�L — Tue, 31 Aug 2010 01:59:00 GMT

下面�?�U�动态加载js的方法，�q?�U�方法都很好用，速度上感觉不出差别，当加载了一�ơ之后，�W?�ơ以

后都不会重复加蝲�Q�这��L��话就不会每次点击都向服务器下载js�Q?br />
     �q?�U�方法中�Q�我个�h觉得�W?�U�是比较好用�Q�它可以在callback里直接��用刚加蝲的js�?br />
//�W?�U�动态加载js
function GetHttpRequest()
{
if ( window.XMLHttpRequest )

     return new XMLHttpRequest() ;
else if ( window.ActiveXObject ) // IE
     return new ActiveXObject("MsXml2.XmlHttp") ;
}

function loadJS(jsName) {
var oXmlHttp = GetHttpRequest() ;
oXmlHttp.onreadystatechange = function()
{
     if ( oXmlHttp.readyState == 4 )
     {
   if ( oXmlHttp.status == 200 || oXmlHttp.status == 304 )
   {
    txt = oXmlHttp.responseText;
    var scriptTag = document.getElementById(id);
    var oHead = document.getElementsByTagName('HEAD').item(0);
    var oScript= document.createElement("script");
    if (scriptTag)
    oHead.removeChild(scriptTag );
    oScript.id = "loadJS_id";
    oScript.type = "text/javascript";
    oScript.src= jsName+".js" ;
    oHead.appendChild(oScript);
   }
   else
   {
      alert('操作��p�|:' + oXmlHttp.statusText + '(' + oXmlHttp.status + ')' ) ;
   }
     }
}
url = '' + jsName + '.js';
oXmlHttp.open('GET', url, true);
oXmlHttp.send(null);
}

//使用�Q?/span>

if(true)
{
   tbar.push({
      text : '新增',
      tooltip : '新增一条记�?,
      iconCls : _addIco,
      handler : function()
      {
          var el = Ext.get("loadJS_id");
           if(!el)
           {
               loadJS("addTest");   //addTest,js文�g�?/span>
           }
          add();
      }
   }, '-');
}

//�W?�U�动态加载js

ScriptLoader = function() {
    this.timeout = 30;
    this.scripts = [];
    this.disableCaching = false;
    this.loadMask = null;
};

ScriptLoader.prototype = {
    showMask: function() {
      if (!this.loadMask) {
        this.loadMask = new Ext.LoadMask(Ext.getBody());
        this.loadMask.show();
      }
    },

    hideMask: function() {
      if (this.loadMask) {
        this.loadMask.hide();
        this.loadMask = null;
      }
    },

    processSuccess: function(response) {
      this.scripts[response.argument.url] = true;
      window.execScript ? window.execScript(response.responseText) : window.eval(response.responseText);
      if (response.argument.options.scripts.length == 0) {
        this.hideMask();
      }
      if (typeof response.argument.callback == 'function') {
        response.argument.callback.call(response.argument.scope);
      }
    },

    processFailure: function(response) {
      this.hideMask();
      Ext.MessageBox.show({title: 'Application Error', msg: 'Script library could not be loaded.', closable: false, icon: Ext.MessageBox.ERROR, minWidth: 200});
      setTimeout(function() { Ext.MessageBox.hide(); }, 3000);
    },

    load: function(url, callback) {
      var cfg, callerScope;
      if (typeof url == 'object') { // must be config object
          cfg = url;
          url = cfg.url;
          callback = callback || cfg.callback;
          callerScope = cfg.scope;
          if (typeof cfg.timeout != 'undefined') {
            this.timeout = cfg.timeout;
          }
          if (typeof cfg.disableCaching != 'undefined') {
            this.disableCaching = cfg.disableCaching;
          }
      }

      if (this.scripts[url]) {
        if (typeof callback == 'function') {
          callback.call(callerScope || window);
        }
        return null;
      }

      this.showMask();

      Ext.Ajax.request({
          url: url,
          success: this.processSuccess,
          failure: this.processFailure,
          scope: this,
          timeout: (this.timeout*1000),
          disableCaching: this.disableCaching,
          argument: {
            'url': url,
            'scope': callerScope || window,
            'callback': callback,
            'options': cfg
          }
      });
    }
};

ScriptLoaderMgr = function() {
    this.loader = new ScriptLoader();

    this.load = function(o) {
      if (!Ext.isArray(o.scripts)) {
        o.scripts = [o.scripts];
      }

      o.url = o.scripts.shift();

      if (o.scripts.length == 0) {
        this.loader.load(o);
      } else {
        o.scope = this;
        this.loader.load(o, function() {
          this.load(o);
        });
      }
    };
};

ScriptMgr = new ScriptLoaderMgr();

//使用�Q?/span>
{
id : "d_m_sub3",
xtype : "tbbutton",
text : "完成��d��",
iconCls : "sub2",
handler : function(){
ScriptMgr.load({
scripts: ['/baoa/oaTask/oaTask_task7/oaTask_task7_browse.js','/baoa/oaTask/oaTask_task8/oaTask_task8_browse.js'],
callback: function() {
var n = Ext.getCmp("rightPanelId").getComponent("d_m_sub3");
if (!n)
{   // 判断是否已经打开该面�?nbsp;
   n = Ext.getCmp("rightPanelId").add
   ({
          id:"d_m_sub3",
     title:'完成��d��',
     closable : true,
     items :[ {autoScroll : true,border:false,layout:'form',items:[Lbo_oaTask_task7_browse(param).prop.grid,Lbo_oaTask_task8_browse(param).prop.grid]} ]
    });
   }
   Ext.getCmp("rightPanelId").setActiveTab(n);
   Ext.getCmp("rightPanelId").doLayout();
    }
   });
}
}

ScriptMgr.load
({
scripts: ['/baoa/oaTask/oaTask_task/oaTask_task_add.js'],
callback: function() {
    showAddForm();
}
});

艾�L 2010-08-31 09:59 发表评论

艾�L — Sun, 29 Aug 2010 16:01:00 GMT

CJ_StarHtmlEditor.js的代码如下，使用�Ҏ��Q�直接复�Ӟ��保存成CJ_StarHtmlEditor.js��可以用了�?/p>

/**
* 作者：陈杰
* QQ : 710782046
* Email:ovenjackchain@gmail.com
* Blog :http://hi.baidu.com/jackvoilet
*/
var HTMLEditor = Ext.extend(Ext.form.HtmlEditor, {
addImage : function() {
   var editor = this;
   var imgform = new Ext.FormPanel({
    region : 'center',
    labelWidth : 55,
    frame : true,
    bodyStyle : 'padding:5px 5px 0',
    autoScroll : true,
    border : false,
    fileUpload : true,
    items : [{
       xtype : 'textfield',
       fieldLabel : '选择文�g',
       name : 'userfile',
       id : 'userfile',
       inputType : 'file',
       allowBlank : false,
       blankText : '文�g不能为空',
       height : 25,
       anchor : '98%'
      }],
    buttons : [{
     text : '上传',
     type : 'submit',
     handler : function() {
      var furl="";
      furl=imgform.form.findField('userfile').getValue();
      var type=furl.substring(furl.length-3).toLowerCase();
      var filename=furl.substring(furl.lastIndexOf("\\")+1);
      if (furl==""||furl==null) {return;}
      if(type!='jpg'&&type!='bmp'&&type!='gif'&&type!='png'){
       alert('仅支持jpg、bmp、gif、png格式的图�?);
       return;
      }
      imgform.form.submit({
       url : '/newsinfo.mvc/AddFiles_newsinfo',
       waitMsg : '正在上传......',
       waitTitle : '��L��?,
       method : 'POST',
       success : function() {
        var element = document.createElement("img");
        element.src = "../UploadFile/"+filename;
        element.style.width="300px";
             element.style.height="200px";
        if (Ext.isIE) {
         editor.insertAtCursor(element.outerHTML);
        } else {
         var selection = editor.win.getSelection();
         if (!selection.isCollapsed) {
          selection.deleteFromDocument();
         }
         selection.getRangeAt(0).insertNode(element);
        }
        win.close();
       },
       failure : function(form, action) {
        form.reset();
        if (action.failureType == Ext.form.Action.SERVER_INVALID)
         Ext.MessageBox.alert('警告',
           '上传��p�|�Q�仅支持jpg、bmp、gif、png格式的图�?);

       }

      });
     }
    }, {
     text : '关闭',
     type : 'submit',
     handler : function() {
      win.close(this);
     }
    }]
   })

   var win = new Ext.Window({
      title : "上传囄��",
      id : 'picwin',
      width : 400,
      height : 120,
      modal : true,
      border : false,
      iconCls:'icon-uploadpic',
      layout : "fit",
      items : imgform

     });
   win.show();

},//上传囄��的扩�?br /> addFile : function() {
   var editor = this;
   var fileform = new Ext.FormPanel({
    region : 'center',
    labelWidth : 55,
    frame : true,
    bodyStyle : 'padding:5px 5px 0',
    autoScroll : true,
    border : false,
    fileUpload : true,
    items : [{
       xtype : 'textfield',
       fieldLabel : '选择文�g',
       name : 'userfile_F',
       id : 'userfile_F',
       inputType : 'file',
       allowBlank : false,
       blankText : '文�g不能为空',
       height : 25,
       anchor : '98%'
      }],
    buttons : [{
     text : '上传',
     type : 'submit',
     handler : function() {
      var furl="";//文�g物理地址
      var fname="";//文�g名称
      furl=fileform.form.findField('userfile_F').getValue();
      var type=furl.substring(furl.length-3).toLowerCase();
      if (furl==""||furl==null) {return;}
      if(type!='doc'&&type!='xls'){
       alert('仅支持上传doc、xls格式的文�?');
       return;
      }
      fname=furl.substring(furl.lastIndexOf("\\")+1);
      fileform.form.submit({
       url : '/newsinfo.mvc/AddFiles_newsinfo',
       waitMsg : '正在上传......',
       waitTitle : '��L��?,
       method : 'POST',
       success : function() {
        var element = document.createElement("a");
        element.href = "../UploadFile/"+fname;
        element.target = '_blank';
        element.innerHTML = fname;
        if (Ext.isIE) {
         editor.insertAtCursor(element.outerHTML);
        } else {
         var selection = editor.win.getSelection();
         if (!selection.isCollapsed) {
          selection.deleteFromDocument();
         }
         selection.getRangeAt(0).insertNode(element);
        }
        winFile.close();
       },
       failure : function() {
        form.reset();
        if (action.failureType == Ext.form.Action.SERVER_INVALID)
         Ext.MessageBox.alert('警告',
           '上传��p�|�Q�仅支持上传doc、xls格式的文�?');

       }

      });
     }
    }, {
     text : '关闭',
     type : 'submit',
     handler : function() {
      winFile.close(this);
     }
    }]
   })

   var winFile = new Ext.Window({
      title : "上传附�g",
      id : 'picwin',
      width : 400,
      height : 120,
      modal : true,
      border : false,
      layout : "fit",
      iconCls : 'icon-uploadfile',
      items : fileform

     });
   winFile.show();

},//上传附�g的扩�?br /> addflash : function() {
   var editor = this;
   var flashform = new Ext.FormPanel({
    region : 'center',
    labelWidth : 55,
    frame : true,
    bodyStyle : 'padding:5px 5px 0',
    autoScroll : true,
    border : false,
    items : [{
       xtype : 'textfield',
       fieldLabel : 'flash地址',
       name : 'userflash',
       id : 'userflash',
       allowBlank : false,
       blankText : 'http://',
       emptyText : 'http://',
       height : 25,
       anchor : '98%'
      }],
    buttons : [{
     text : '��d��',
     type : 'submit',
     handler : function() {
      var furl="";//文�g物理地址
      furl=flashform.form.findField('userflash').getValue();
      var type=furl.substring(furl.length-3).toLowerCase();
      if (furl==""||furl==null) {return;}
      if(type!='swf'&&type!='flv'){
       alert('非法格式�Q�请��查！');
       return;
      }
      var element = document.createElement("embed");
      element.src = furl;
      element.type="application/x-shockwave-flash";
      element.quality="high";
      element.style.width="300px";
      element.style.height="200px";
      if(Ext.isIE) {
       editor.insertAtCursor(element.outerHTML);
      } else {
        var selection = editor.win.getSelection();
        if (!selection.isCollapsed) {
            selection.deleteFromDocument();
        }
        selection.getRangeAt(0).insertNode(element);
      }
      winflash.close();
     }
    }, {
     text : '关闭',
     type : 'submit',
     handler : function() {
      winflash.close(this);
     }
    }]
   })

   var winflash = new Ext.Window({
      title : "插入flash",
      id : 'flashwin',
      width : 400,
      height : 120,
      modal : true,
      border : false,
      layout : "fit",
      iconCls : 'icon-swf',
      items : flashform

     });
   winflash.show();

},//插入flash的扩�?br /> addfilm : function() {
   var editor = this;
   var filmform = new Ext.FormPanel({
    region : 'center',
    labelWidth : 70,
    frame : true,
    bodyStyle : 'padding:5px 5px 0',
    autoScroll : true,
    border : false,
    items : [{
       xtype : 'textfield',
       fieldLabel : '多媒体地址',
       name : 'userfilm',
       id : 'userfilm',
       allowBlank : false,
       blankText : 'http://',
       emptyText : 'http://',
       height : 25,
       anchor : '98%'
      }],
    buttons : [{
     text : '��d��',
     type : 'submit',
     handler : function() {
      var furl="";//文�g物理地址
      var regImg = new RegExp(/\.(mp3|wav|wma|wmv|avi|mpg|asf|rm|rmvb)$/);
      var regrm=new RegExp(/\.(rm|rmvb)$/);
      furl=filmform.form.findField('userfilm').getValue();
      //var type=furl.substring(furl.length-3).toLowerCase();
      if (furl==""||furl==null) {return;}
      if(!furl.match(regImg)){
       alert('非法格式�Q�请��查！�pȝ��支持�Q�mp3,wav,wma,wmv,avi,mpg,asf,rm,rmvb');
       return;
      }
      var element = document.createElement("embed");
      element.src = furl;
      element.style.width="300px";
      element.style.height="200px";
      if(furl.match(regrm))
         element.type="audio/x-pn-realaudio-plugin";
      else
         element.type="video/x-ms-asf-plugin";
      element.loop="true";
      element.autostart="true";
      if(Ext.isIE) {
       editor.insertAtCursor(element.outerHTML);
      } else {
        var selection = editor.win.getSelection();
        if (!selection.isCollapsed) {
            selection.deleteFromDocument();
        }
        selection.getRangeAt(0).insertNode(element);
      }
      winfilm.close();
     }
    }, {
     text : '关闭',
     type : 'submit',
     handler : function() {
      winfilm.close(this);
     }
    }]
   })

   var winfilm = new Ext.Window({
      title : "插入多媒�?,
      id : 'filmwin',
      width : 410,
      height : 120,
      modal : true,
      border : false,
      layout : "fit",
      iconCls : 'icon-film',
      items : filmform

     });
   winfilm.show();

},//插入�q�媒体的扩展
createToolbar : function(editor) {
   HTMLEditor.superclass.createToolbar.call(this, editor);
   this.tb.insertButton(16, {
      cls : "x-btn-icon",
      iconCls : "icon-uploadpic",
      handler : this.addImage,
      tooltip : "��d��囄��",
      scope : this
     });
   this.tb.insertButton(17, {
      cls : "x-btn-icon",
      iconCls : 'icon-uploadfile',
      handler : this.addFile,
      tooltip : "��d��文�g",
      scope : this
     });
     this.tb.insertButton(18, {
      cls : "x-btn-icon",
      iconCls : 'icon-swf',
      handler : this.addflash,
      tooltip : "��d��flash文�g",
      scope : this
     });
     this.tb.insertButton(19, {
      cls : "x-btn-icon",
      iconCls : 'icon-film',
      handler : this.addfilm,
      tooltip : "��d��多媒体文�?,
      scope : this
     });
  this.tb.insertButton(20, {//插入层的扩展�Q�即插入div
      cls : "x-btn-icon",
      iconCls : 'icon-div',
      handler : function() {
         var element = document.createElement("div");
         element.id="InsertDiv";
         element.style.backgroundColor="#FAFAFB";
         element.style.borderWidth="1px";
         element.style.borderStyle="solid";
         element.style.borderColor="#AECBE7";
         element.innerHTML="在此插入内容�Q?lt;BR>";
         if(Ext.isIE) {
       editor.insertAtCursor(element.outerHTML);
      } else {
        var selection = editor.win.getSelection();
        if (!selection.isCollapsed) {
            selection.deleteFromDocument();
        }
        selection.getRangeAt(0).insertNode(element);
      }
      },
      tooltip : "��d��div�?,
      scope : this
     });
     this.tb.insertButton(21, { //插入横线的扩�?br />       cls : "x-btn-icon",
      iconCls : 'icon-hr',
      handler :function() {
         var element = document.createElement("HR");
         if(Ext.isIE) {
       editor.insertAtCursor(element.outerHTML);
      } else {
        var selection = editor.win.getSelection();
        if (!selection.isCollapsed) {
            selection.deleteFromDocument();
        }
        selection.getRangeAt(0).insertNode(element);
      }
      },
      tooltip : "��d��横线",
      scope : this
     });
}
});
Ext.reg('CJ_starthtmleditor', HTMLEditor);

大家可以�Ҏ��q�个�Ҏ��l�箋扩展自己惌��的东�ѝ�?/p>

上面上传囄��和附件有一个方法，内容如下�Q?/p>

//上传文�g
        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult AddFiles_newsinfo(FormCollection collection)
        {
            var rdto = new ResultDTO();
            var c = Request.Files[0];
            if (c != null && c.ContentLength > 0)
            {
                string filename = c.FileName;
                string destination = Server.MapPath("/UploadFile/");
                c.SaveAs(destination+ filename);
            }
            return null;
        }

使用的时候，首先在页面中��d��该js的引用，然后�Q�在需要的地方加入以下代码�Q?/p>

                         {
                            border : false,
                            columnWidth : 1,
                            layout : 'form',
                            items : [{
                               fieldLabel : '信息内容',
                               xtype : 'CJ_starthtmleditor',
                               name : 'nr',
                               id : 'nr',
                               allowBlank : false,
                               anchor : '98%'
                              }]

}

转蝲地址�Q?a >http://hi.baidu.com/jackvoilet/blog/item/38551a3dc709d40cbba16717.html

艾�L 2010-08-30 00:01 发表评论

艾�L — Sun, 29 Aug 2010 08:02:00 GMT

Ext里的Ext.form.FileUploadField只是��单包装了一�?nbsp;input type为file的对�?�q�种dom对象是不支持你说的功能的,accept属性不��用.
你说的这个功能目前用flex做最合�?
另外用参照如下方式改写Ext.form.FileUploadField控�g也行(�q�种方式问题很多,推荐用flex,直接�ȝ��上下别�h写好的swf文�g��可以用)
<input type="button" onclick="openfile()" value="Browse" />
function openfile()
{
var fd = new ActiveXObject("MSComDlg.CommonDialog");
fd.Filter = "囑փ�文�g (*.jpg;*.jpeg;*.gif)|*.jpg;*.jpeg;*.gif";
fd.FilterIndex = 2;
fd.MaxFileSize = 128;
fd.ShowOpen();
document.getElementById("txtFileName").value = fd.Filename;
document.getElementById("textImage").src = fd.FileName;
}
script>

艾�L 2010-08-29 16:02 发表评论

extjs 囄��上传

艾�L — Sun, 29 Aug 2010 05:52:00 GMT

上传控�g�Q?nbsp;
var panel3 = new Ext.form.FormPanel({
    labelAlign : 'left',
         labelWidth:60,
    border : false,
    bodyStyle : 'padding:4px;',
    frame : false,
    url : '../ajaxdata/uploadFile.jsp',
    autoHeight : true,
    fileUpload : true,
    items : [{
        id : 'file',
        autoScroll : false,
        xtype : 'textfield'
                  fieldLabel:'本地上传',
        name : 'file',
        hideLabel : true,
        // inputType : 'file'//按照Ext默认的属性将inputType设�ؓfile�Ӟ��始终响应不了onchange事�g�Q�结果就以autoCreate的方式，如下�Q�因��U�方式相当于html里的input,所以也��响应得了啦�Q?nbsp;

        autoCreate : {
            tag : "input",
            type : "file",
            size : "20",
            autocomplete : "off",
            onChange : "browseImages(this.value);"
        }
    }]

    ,
    buttons : [{
        text : '上传',
        handler : function() {
            panel3.getForm().submit({
                // waitTitle : "��L��?,
                waitMsg : "正在上传",
                success : function(form, action){},
                failure : function(form, action) {
                    Global.alert('上传囄��p�|�Q?);
                }
            })
        }
    }]
});

/*
* �~�辑
* @date 2008 July 10
*/
�l�过实践�Q�还存在一�U�可以激发change事�g的方法；
首先说一下获取form里面的field的三�U�方法：
1�Q�Ext.getCmp('id');
2�Q�FormPanel.getForm().findField('id/name');
3�Q�Ext.get('id/name');  //前提是FormPanel在界面上昄��出来�?nbsp;

应用上面的第1和第2�U�方法得到的�l��g均触发不了change事�g�Q�只有第三种�Ҏ��可以
触发�Q�前提是FormPanel要在界面上显�C�出来，所以需要触发show事�g�Q�然后在show
事�g里调用Ext.get('id/name')�Q�由于FormPanel�l�常是放在Ext.Window里的,所
以新的问题又来了�Q?nbsp;
  1�Q�调用FormPanel.on('show',fn);//当Window昄��出来的时候，事�g没有触发
  2�Q�调用FormPanel.getForm().on('show',fn);//情况同上
  3�Q�调用FormPanel.ownerCt.on('show',fn);//OK 一切搞�?nbsp;
其中scope也是需要注意的一��！

   如果再不行的话，可以先调�?
      FormPanel.ownerCt.on('render',function(){
          FormPanel.ownerCt.on('show',fn,this);
      },this);

艾�L 2010-08-29 13:52 发表评论

Extjs常见问题及解��x��案之带参数查询下一��|��据异常解��x��?lt;/font>

艾�L — Tue, 26 Jan 2010 06:40:00 GMT

extjs的pagingtoolbar 点击下一��|��Q�出现store的load旉��Q�但是只有start和limit�q�两个参敎ͼ��q�样��出��C��Q�点��M��一��늚�时候，查询�?br /> 的结果和条�g不符合，��这个属性加入到pagingtoolbar中，��d��自己需要的参数卛_��Q�列入：B['参数的名�U?]='参数的�?

doLoad:function(C){
var B={},
A=this.paramNames;
B[A.start]=C;
B[A.limit]=this.pageSize;
B['name']=Ext.getCmp("queryNam").getValue();
B['isUse']=Ext.getCmp("queryIsUse").getValue();
B['cpcod']=Ext.getCmp("queryfndcc").getValue();
if(this.fireEvent("beforechange",this,B)!==false){
this.store.load({params:B})
}
}

艾�L 2010-01-26 14:40 发表评论

艾�L — Tue, 26 Jan 2010 06:30:00 GMT

�W�一�ơ用Extjs的column布局旉��见了很多问题�Q�记录下来，供大家参考。column布局时常会碰见label不能昄��或者控件显�C�错位等问题�Q�导致这些问题的常见原因如下�Q?/p>

1.formPanel上的控�g昄��不出来，控�g的宽度太大，formpanel的宽度相对太��导致�?/p>

2.为FormPanel讑֮�了defaultType属性，没有为每个控件单独制定xtype属性。正��的做法是不讄��defaultType�?/p>

3.在每个column里再加上form layout�Q�再在form里加textfield�?/p>

4.在新建TabPanel�Ӟ��其属性layoutOnTabChange讄��为true卛_��。（此方法不通用�Q?/p>

艾�L 2010-01-26 14:30 发表评论

Extjs.grid 详解

艾�L — Wed, 20 Jan 2010 11:49:00 GMT

function rowdblclickFn(grid, rowIndex, e){//双击事�g

             var row = grid.store.getById(grid.store.data.items[rowIndex].id);
             alert(row.get("unitcode"));
        }

grid.addListener('rowdblclick', rowdblclickFn);

Ext2.0是一个javascript框架�Q�它的Grid控�g和其它可以显�C�数据的控�g�Q�能够支持多�U�数据类型，如二�l�数�l�、Json数据和XML数据�Q�甚臛_��括我们自定义的数据类型。Ext为我们提供了一个桥梁Ext.data.Store�Q�通过它我们可以把��M��格式的数据�{化成grid可以使用的�Ş式，�q�样��׃��需要�ؓ每种数据格式写一个grid的实��C��?/p>

首先�Q�一个表格应该有列定义，卛_��义表头ColumnModel�Q?br /> // 定义一个ColumnModel�Q�表头中有四�?br /> var cm = new Ext.grid.ColumnModel([
     {header:'�~�号',dataIndex:'id'},
     {header:'性别',dataIndex:'sex'},
     {header:'名称',dataIndex:'name'},
     {header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;
    该ColumnModel定义了表格的四个列，其每列的名称和对应的数据键。请注意defaultSortable属性，即�ؓ每个列都安上一个可以排序的功能。如果只��x��些列举有该功能，可以讄��Q?br /> {header:'�~�号',dataIndex:'id',Sortable:true},

现在��来看看�q�个Ext.data.Store是如何�{换三�U�数据的�?/p>

1.二维数组�Q?br /> // ArrayData
var data = [
     ['1','male','name1','descn1'],
     ['2','male','name1','descn2'],
     ['3','male','name3','descn3'],
     ['4','male','name4','descn4'],
     ['5','male','name5','descn5']
];
// ArrayReader
var ds = new Ext.data.Store({
     proxy: new Ext.data.MemoryProxy(data),
     reader: new Ext.data.ArrayReader({}, [
        {name: 'id',mapping: 0},
         {name: 'sex',mapping: 1},
         {name: 'name',mapping: 2},
         {name: 'descn',mapping: 3}
     ])
});
ds.load();
ds要对应两个部分：proxy和reader。proxy告诉我们从哪里获得数据，reader告诉我们如何解析�q�个数据�?br /> 现在用的是Ext.data.MemoryProxy�Q�它��内存中的数据data作�ؓ参数传递。Ext.data.ArrayReader专门用来解析数组�Q��ƈ且告诉我们它会按照定义的规范�q�行解析�Q�每行按��序��d��四个数据�Q�第一个叫id�Q�第二个叫sex�Q�第三个叫name�Q�第四个descn。这些是�?cm定义中的dataIndex对应的。这样cm��q��道哪列应该显�C�那条数据了�?br /> mapping属性用于标记data中的��d��后的数据与标头的映射关系�Q�一般是不用讄��的。但如果我们惌��sex的数据中name栏中出现�Q�可以设�|�mapping倹{��即id的mapping�?,后者�ؓ0�?br /> 记得要执行一�ơds.load()�Q�对数据�q�行初始化�?/p>

数据的显�C�显得非常简单：
HTML文�g�Q?br />

JS文�g�Q?br /> var grid = new Ext.grid.GridPanel({
     el: 'grid',
     ds: ds,
     cm: cm
});
grid.render();

其显�C�结果�ؓ�Q?/p>

2.如何在表��g��d��CheckBox呢？

var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
    new Ext.grid.RowNumberer(),//自动行号
    sm,//��d��的地�?br />     {header:'�~�号',dataIndex:'id'},
    {header:'性别',dataIndex:'sex'},
    {header:'名称',dataIndex:'name'},
    {header:'描述',dataIndex:'descn'}
]);

var grid = new Ext.grid.GridPanel({
    el: 'grid3',
    ds: ds,
    cm: cm,
    sm: sm,//��d��的地�?br />     title: 'HelloWorld'
});

3. 如何做Grid上触发事件呢�Q?br /> 下面是一个cellclick事�g
grid.addListener('cellclick', cellclick);
function cellclick(grid, rowIndex, columnIndex, e) {
    var record = grid.getStore().getAt(rowIndex);   //Get the Record
    var fieldName = grid.getColumnModel().getDataIndex(columnIndex); //Get field name
    var data = record.get(fieldName);
    Ext.MessageBox.alert('show','当前选中的数据是'+data);
}

4.如何做Grid中做出快捯��单效果：
grid.addListener('rowcontextmenu', rightClickFn);//右键菜单代码关键部分
var rightClick = new Ext.menu.Menu({
    id:'rightClickCont', //在HTML文�g中必��L��个rightClickCont的DIV元素
    items: [
        {
            id: 'rMenu1',
            handler: rMenu1Fn,//点击后触发的事�g
            text: '右键菜单1'
        },
        {
            //id: 'rMenu2',
            //handler: rMenu2Fn,
            text: '右键菜单2'
        }
    ]
});
function rightClickFn(grid,rowindex,e){
    e.preventDefault();
    rightClick.showAt(e.getXY());
}
function rMenu1Fn(){
   Ext.MessageBox.alert('right','rightClick');
}
其Grid如下�Q?/p>

5.如何��一列中的数据根据要求进行改变呢�Q?br /> 比如说性别字段�Ҏ��其male或female改变昄��的颜�Ԍ��q�种ColumnMode中设计：
var cm = new Ext.grid.ColumnModel([
    new Ext.grid.RowNumberer(),
    sm,
    {header:'�~�号',dataIndex:'id'},
    {header:'性别',dataIndex:'sex',renderer:changeSex},
    {header:'名称',dataIndex:'name'},
    {header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;

function changeSex(value){
    if (value == 'male') {
        return "�U�男";
    } else {
        return "�l�女";
    }
}

其它两种数据的Grid昄��是相同的�Q�其不同之处在于数据获取的过�E�：
6.Json数据
至于�q�种数据的类型请大家自己看Ajax的书�c�：
//JsonData
var data = {
    'coders': [
        { 'id': '1', 'sex': 'male', 'name':'McLaughlin', 'descn': 'brett@newInstance.com' },
        { 'id': '2', 'sex': 'male','name':'Hunter', 'descn': 'jason@servlets.com' },
        { 'id': '3', 'sex': 'female','name':'Harold', 'descn': 'elharo@macfaq.com' },
        { 'id': '4', 'sex': 'male','name':'Harolds', 'descn': 'elhaross@macfaq.com' }
    ],
    'musicians': [
        { 'id': '1', 'name': 'Clapton', 'descn': 'guitar' },
        { 'id': '2', 'name': 'Rachmaninoff', 'descn': 'piano' }
    ]
}
//ds使用的MemoryProxy对象和JsonReader对象
var ds = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(data),
        reader: new Ext.data.JsonReader({root: 'coders'}, [
            {name: 'id'},
            {name: 'sex'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });
ds.load();

var grid = new Ext.grid.GridPanel({
    el: 'grid3',
    ds: ds,
    cm: cm,
    sm: sm,
    title: 'HelloWorld',
    autoHeight: true//一定要写，否则昄��的数据会��一�?br /> });
grid.render();

7.使用XML数据�Q?br /> 注意�Q�读取XML数据必须在服务器上进行�?br /> XML数据test.xml的内容：

     2

           1
           male
           Taylor
           Coder

var ds3 = new Ext.data.Store({
    url: 'test.xml',   //XML数据
    reader: new Ext.data.XmlReader({record: 'item'}, [ //使用XmlReader对象
        {name: 'id'},
        {name: 'sex'},
        {name: 'name'},
        {name: 'descn'}
    ])
});

8.从服务器获取数据和数据翻��|��?br /> 从一个服务器文�g�Q�如ASP、JSP或Servlet中获得数据二�l�Array、JSON或XML数据�Q�也可以被Ext��d��Q��ƈ被Grid昄��Q?br /> 服务器文件data.asp:
<%
start = cint(request("start"))
limit = cint(request("limit"))

    dim json
    json=cstr("{totalProperty:100,root:[")

    for i = start to limit + start-1
        json =json + cstr("{'id':'") +cstr(i) + cstr("','name':'name") + cstr(i) + cstr("','descn':'descn") + cstr(i) + cstr("'}")
        if i <> limit + start - 1 then
            json =json + ","
        end if
    next
    json = json +"]}"
    response.write(json)
%>

我们可以看到�Q�这个页面会�Ҏ��传入的start和limit的不同，�q�回不同的数据，其实质是个分��늚�代码。下面是start=0,limit=10的JSON数据�Q?br /> {totalProperty:100,root:[{'id':'0','name':'name0','descn':'descn0'},{'id':'1','name':'name1','descn':'descn1'},{'id':'2','name':'name2','descn':'descn2'},{'id':'3','name':'name3','descn':'descn3'},{'id':'4','name':'name4','descn':'descn4'},{'id':'5','name':'name5','descn':'descn5'},{'id':'6','name':'name6','descn':'descn6'},{'id':'7','name':'name7','descn':'descn7'},{'id':'8','name':'name8','descn':'descn8'},{'id':'9','name':'name9','descn':'descn9'}]}

我们使用分页控�g来控制Grid的数据：
Ext.onReady(function(){
    var sm = new Ext.grid.CheckboxSelectionModel();

    var cm = new Ext.grid.ColumnModel([
        new Ext.grid.RowNumberer(),
        sm,
        {header:'�~�号',dataIndex:'id'},
        {header:'性别',dataIndex:'sex'},
        {header:'名称',dataIndex:'name'},
        {header:'描述',dataIndex:'descn'}
    ]);
    cm.defaultSortable = true;

10.如何在Grid的上�Ҏ��加按钮呢�Q?br /> ��d��按钮的关键之处在于tbar或bbar属性设�|�Toolbar工具条：
var grid = new Ext.grid.GridPanel({
    el: 'grid3',
    ds: ds,
    cm: cm,
    sm: sm,
    title: 'HelloWorld',
    tbar: new Ext.Toolbar({
        items:[
                {
                    id:'buttonA'
                    ,text:"Button A"
                    ,handler: function(){ alert("You clicked Button A"); }
                }
                ,
                new Ext.Toolbar.SplitButton({})
                ,{
                    id:'buttonB'
                    ,text:"Button B"
                    ,handler: function(){ alert("You clicked Button B"); }
                }
                ,
                '-'
                ,{
                    id:'buttonc'
                    ,text:"Button c"
                }
            ]
        })
});

11.��GridPanel攑օ�一个Panel或TabPanel�?br /> var tabs = new Ext.TabPanel({
    collapsible: true
    ,renderTo: 'product-exceptions'
    ,width: 450
    ,height:400
    ,activeTab: 0
    ,items:[
        {
            title: 'Unmatched'
        },{
            title: 'Matched'
        }
    ]
});
tabs.doLayout();

var panel = new Ext.Panel({
    renderTo: 'panel',
    title:'panel',
    collapsible:true,
    width:450,
    height:400,
    items:[grid] //��理grid
});

Panel必须有DIV存在。其包含的Component有items��理�?/p>

本文是在学习Ext2.0的基��上写的，因此�Q�参考了许多�|�上存在的Blog文章。在此表�C��敬！

本文来自CSDN博客�Q��{载请标明出处�Q�http://blog.csdn.net/boy00fly/archive/2009/03/20/4008317.aspx

艾�L 2010-01-20 19:49 发表评论

ExtJs�ȝ��(一)[转]

艾�L — Tue, 19 Jan 2010 10:04:00 GMT

问题�Q��用Grid�Ӟ��如果出现列标题与复选框错位

使用定义样式

.ext-ie7 .x-menu-item-icon,
.ext-ie6 .x-menu-item-icon {left: -24px;}
.ext-ie8 .x-menu-item-icon,
.ext-ie7 .x-menu-item-icon,
.ext-ie6 .x-menu-item-icon {left: -24px;}
解决

使用grid的遮�|�提�C�时�Q�一定要设表格的height和width�?/p>

enableColumnMove和enableColumnResize为false表示��用拖放列和改变列宽度功能�?br /> 默认情况下一�ơ可以选一行或多行�?/p>

stripeRows:true昄��为斑马线�?/p>

问题�Q�自��d��定每列的宽度
1.手动指定
cm(columnmudule)支持�l�每列设�|�宽�?如果不指定则默认的宽度�ؓ100px.

var cm=new Ext.grid.columnModel({
{header:'列头',dataIndex:'数据源烦',width:宽度},....});

2.自动填充
var gird=new Ext.grid.GridPanel({
renderTo:'grid',
store:store,
cm:cm,
viewConfig:{forceFit:true}});

会按照设�|�的宽度之间的比例进行显�C�，而不是按照设�|�的宽度�?/p>

3.指定自动填充剩余�I�间的列
也可以指定一列来完成该操作，但该操作要求该列必须定义时指定id倹{�?br /> var cm=new Ext.grid.columnModel({
{header:'列头',dataIndex:'数据源烦',width:宽度,id:'id标识属�?},....});

接下来设�?br /> Ext.grid.GridPanel({
renderTo:'grid',
store:store,
cm:cm,
autoExpandColumn:'id列标�?});

问题�Q�让列支持排�?br /> 在徏立列模型时指定storable:true

问题�Q�中文排�?br /> 1.为Ext.data.Store讄��一个storeInfo:{field:'列名',direction:'ASC|DESC'}属性�?/p>

2.重写Ext.data.Store的applySort函数
Ext.data.Store.prototype.applySort = function() {
    if (this.sortInfo && !this.remoteSort) {
        var s = this.sortInfo, f = s.field;
        var st = this.fields.get(f).sortType;
        var fn = function(r1, r2) {
            var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
            if (typeof(v1) == "string") {
                return v1.localeCompare(v2);
            }
            return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
        };
        this.data.sort(s.direction, fn);
        if(this.snapshot && this.snapshot != this.data) {
            this.snapshot.sort(s.direction, fn);
        }
    }
};

该函数可以加在ext-all.js文�g的未��。或者放在html��面的最上面�Q�保证在EXT初始化之后，实际代码调用之前执行�?/p>

问题�Q�显�C�日期类型数据列
1.在store的reader属性中增加type和dataFormat两个属�?br /> {name: 'date',type:'date',dateFormat:'Y-j-n H:i:s'}
注意格式化字�W�串必须要与实际日期的内容相对应�?br /> 如日期�ؓ2009-5-2 12:30:58 则格式化字符串�ؓ'Y-j-n H:i:s'
如日期�ؓ2009-05-02 12:30:58 则格式化字符串�ؓ'Y-m-d H:i:s'
详细字符串的含义见ext api doc之Date�c?br /> 以保证能够读取到正确的日期倹{�?/p>

2.在ColumnModel中新加配�|?br /> {header: '日期',dataIndex: 'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y�q�j月n�?)}
其中renderer的格式字�W�串表示昄��的格式是什么�?/p>

问题�Q�如何在单元格时昄��U�色的字或图片，按钮�{?br /> 在ColumnModule的相应列的属性中��d��renderer:渲染函数
�?
var cm=new Ext.grid.ColumnModel([
{head:'列头',dataIndex:'数据源烦',renderer:渲染函数}]);
渲染函数�Q?br /> function 函数�?value){
if(value==��|��?br /> return html+css代码;
}
else
{
return 其它的html+css;
}

}

问题�Q�如何设�|�表格的表头右键提示为汉字内�?/p>

Ext.grid.GridPanel可以看作控制器，Ext.data.Store可以看作模型�Q�Ext.grid.GridView可以看作视图.在构建Ext.grid.GridPanel实例时添加viewConfig属�?br /> var gid=new Ext.grid.GridPanel(
{renderTo:'grid',
store:store,
cm:cm,
viewConfig:{
columnsText:'昄��的列',
scrollOffset:30,
sortAscText:'升序',
sortDescText:'降序'
//forceFit:true
}
});

问题�Q�用grid实现分页昄��
�Q?为Grid��d��分页工具�?br /> 在GridPanel中进行设�|?/p>

                                var grid = new Ext.grid.GridPanel({
                                    renderTo: 'grid',
                                    autoHeight: true,
                                    store: store,
                                    cm: cm,
                                    bbar: new Ext.PagingToolbar({
                                        pageSize:3,
                                        store: store,
                                        displayInfo: true,
                                        displayMsg: '昄��W?{0} 条到 {1} 条记录，一�?{2} �?,
                                        emptyMsg: "没有记录"
                                    })
                                });
                                store.load();

在��用分��工��h��之后�Q�store.load()必须发生在构造GridPanel之后.而且数据源不能��用Ext.data.SimpleStore.Grid每次都会昄��数据源中所有的数据.因此数据一定要先在后台分好.

如果要在Grid的头部显�C�分��工��h��Q�可以将bbar改�ؓtbar�?/p>

�Q?后台分页

后台jsp的做法：

①取得开始页号与��大��?/p>

String start = request.getParameter("start");
String limit = request.getParameter("limit");

②访问数据库取得数据

③将数据输出为json字符�?/p>

格式为：{totalProperty:总记录数,root:[�?....｝，�?....｝，....]),其中root数组存放当前��늚�数据.

前台��面的做法：

①修改Store

var store = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({url:jsp的url'}),
        reader: new Ext.data.JsonReader({
            totalProperty: 'totalProperty',
            root: 'root'
        }, [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });

②向服务器传�?/p>

store.load({params:{start:0,limit:10}});

Grid每次都会昄��全部在root中的数据�Q�而不论totalProperty的值是多少�Q�所以分��|��root数组中的数据由后台jsp控制�?/p>

3.前台分页
EXT中的Grid是把得到的数据一�ơ性显�C�在表格里，�q�没有直接�ؓ我们提供内存分页的功能，但是在Ext的examples/locale/PapingMemoryProxy.js�Q�它可以从本地数据读取数据同�Q��ƈ实现内存分页�?br /> 步骤如下�Q?br /> ①将PagingMemoryProxy.js导入html
②把以前的MemroryProxy换成PagingMemoryProxy
③调用store.load({params:{start:0,limit:3}});昄��最开始的3条记录�?/p>

4.后台排序

在默认的情况下，Grid只能对当前页的数据进行排序，如果�Ҏ��有的数据排序�Q�则需要将排序信息提交到后収ͼ�由后台将信息�l�装到SQL里，然后再由后台��处理好的数据返回给前台�?br />     var store = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({url:'09_01.jsp'}),
        reader: new Ext.data.JsonReader({
            totalProperty: 'totalProperty',
            root: 'root'
        }, [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
        ]),
        remoteSort: true
    });
其中remoteSort: true表示允许后台排序�Q�这样在排序时就会有变化�Q�不会立��x��C�出排序的结果，而是向后台提交两个参敎ͼ�分别是sort和dir�Q�表�C��排序的字�D�与升序或降序�?/p>

jsp则进行相应的处理
String start = request.getParameter("start");
String limit = request.getParameter("limit");

String sort = request.getParameter("sort");
String dir = request.getParameter("dir");
再进行数据库分页�Q��ƈ�q�回json格式的分��|��据�?/p>

本文来自CSDN博客�Q��{载请标明出处�Q�http://blog.csdn.net/hfy211/archive/2009/06/29/4306357.aspx

艾�L 2010-01-19 18:04 发表评论

艾�L — Fri, 15 Jan 2010 07:15:00 GMT

    var sm = grid.getSelectionModel();

    var store = grid.getStore();

    var view = grid.getView();

    for(var i = 0; i < view.getRows().length; i ++){
     if(sm.isSelected(i)){
      var record = store.getAt(i);
      var name = record.get("rec_name");
      var url = record.get("rec_url");
      alert(name + "," + url);
     }
    }

艾�L 2010-01-15 15:15 发表评论

Extjs grid中文排序异常修正[贴]

艾�L — Mon, 14 Dec 2009 03:31:00 GMT

Ext.data.Store.prototype.applySort = function() { // 重蝲 applySort

    if (this.sortInfo && !this.remoteSort) {

        var s = this.sortInfo, f = s.field;

        var st = this.fields.get(f).sortType;

        var fn = function(r1, r2) {

            var v1 = st(r1.data[f]), v2 = st(r2.data[f]);

            // ��d��:修复汉字排序异常的Bug

            if (typeof(v1) == "string") { // 若�ؓ字符�Ԍ��

                // 则用 localeCompare 比较汉字字符�? Firefox 与IE 均支�?/span>
                return v1.localeCompare(v2);

            }

            // ��d��l�束

            return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);

        };

        this.data.sort(s.direction, fn);

        if (this.snapshot && this.snapshot != this.data) {

            this.snapshot.sort(s.direction, fn);

        }

    }

};

艾�L 2009-12-14 11:31 发表评论