Mashiki's javascript note: ExtJSのStoreにデータダウンロードの機能を追加する PART2

前回、時間の無い中作った「ExtJSのGridやChartにデータダウンロードの機能を追加する」を利用したアプリケーションで、追加要望が出たので拡張について少し考えてみた。

前回、拡張の方法としてはGridに特化して、Gridで表示されているカラムやrendererを利用して、見えているものが、タブ区切りでダウンロードできる事を検討した。が、見えているものとは別に列やフォーマットを指定できる方が汎用性が高いことが分かり、その方向で拡張を実施することとした。

拡張したdownloadメソッド

 /**
  * Download store data
  * @param {Object} opt (optional) Specifies download filename and columns.
  */
 Ext.data.Store.prototype.download = function(opt){
  opt = opt||{};
  var output=[],o=[],
   columns = opt.columns||(function(st){
    var cs=[], i=0;
    st.fields.eachKey(function(k) {cs.push(k);});
    return cs;
   })(this),
   fn = opt.filename||opt.fn||'download.txt';
  for (var i=0,col; col=columns[i]; ++i) {
   if (typeof col === 'string') {
    columns[i] = col = {field: col}
   }
   if (!col.header) col.header = col.field;
   if (!col.format) col.format = function(v,r){return v;};
   o.push(col.header);
  }
  output.push(o.join('\t'));
  this.each(function(rec) {
   var o=[];
   for (var i=0,col; col=columns[i]; ++i) {
    o.push(col.format(rec.get(col.field), rec));
   }
   output.push(o.join('\t'));
  });
  var form = Ext.DomHelper.append(document.body, {
   tag: 'form',
   style: 'display:none',
   action: 'download.php',
   method: 'post',
   cn:[{
    tag:'textarea',
    name:'body',
    html:output.join('\n')
   },{
    tag:'input',
    name:'Content-Disposition',
    value:'attachment;filename='+'"'+fn+'"'
   },{
    tag:'input',
    name:'Content-Type',
    value:'text/tab-separated-values'
   }]
  });
  form.submit();
  document.body.removeChild(form);
 }

呼出しサンプル１

http://www123.ddo.jp/grid/reload-chart.html