PDA

View Full Version : GridFieldPlugin [textfield ,numberfield ,combo]



ziwenzeng
22 Jul 2010, 7:41 PM
21604

<html>
<head>
<title>GridFieldPlugin</title>
</head>
<link rel="stylesheet" type="text/css" href="./bip/tp/ext-3.1.0/resources/css/ext-all.css" />
<script type="text/javascript" src="./bip/tp/ext-3.1.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./bip/tp/ext-3.1.0/ext-all-debug.js"></script>

<script type="text/javascript" src="./GridFieldPlugin.js"></script>
<body>
</body>
<script type="text/javascript">
Ext.onReady(function(){
var temp = '';
var reader = new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange'},
{name: 'industry'},
{name: 'desc'}
]);
var simpleStore = new Ext.data.SimpleStore({
fields:['value','label'],
data:[['aa','a'],['bb','b'],['cc','c']]
});
var simpleStore2 = new Ext.data.SimpleStore({
fields:['value','label'],
data:[['一','一'],['二','二'],['三','三']]
});
var simpleStore3 = new Ext.data.SimpleStore({
fields:['value','label'],
data:[['1','1'],['2','2'],['3','3']]
});
var combox ={xtype:'combo',editable:false ,store:simpleStore,shadow: false,valueField:'value',displayField:'label',mode: 'local',triggerAction: 'all'};

var grid = new Ext.grid.EditorGridPanel({
store: new Ext.data.Store({
reader: reader,
data: Ext.grid.dummyData
}),
columns: [
{id:'company',header: "Company", width: 60, sortable: true, dataIndex: 'company'},
{header: "Price", width: 20, sortable: true, dataIndex: 'price',editor:{xtype:'numberfield'}},
{header: "Change", width: 20, sortable: true, dataIndex: 'change', renderer: Ext.util.Format.usMoney},
{header: "Industry", width: 30, sortable: true, dataIndex: 'industry',editorable:true},
{header: "Checkbox", width: 20, dataIndex: 'lastChange'},
{header: "desc", width: 10, dataIndex: 'desc'}
],
viewConfig: { forceFit: true},
//sm: new Ext.grid.RowSelectionModel(),
selModel : new Ext.grid.CellSelectionModel({
listeners:{
cellselect: function(){
}
}
}),
width:600,
enableColLock:false,
clicksToEdit:1,
height:300,
frame:true,
title:'BipGridFieldPlugin',
plugins: [
new Ext.ux.form.GridFieldPlugin({columnsToEdit:
[
//{xtype:'link',name:'company',link:['<a href="{0}">{1}{2}{1}</a>','dd','kk','xx']},
//{xtype:'textfield',name:'industry',isOff:'"industry"=="industry"',offText:'',
{xtype:'label',name:'company',style:[{isOn:'"price"=="51"',style:'color:red'}]},//styoe:'color:red'
{xtype:'textfield',name:'industry', readOnly:[{isOn:'"price"=="51"'}],
changCond:[{xtype:'numberfield',name:'industry',unit:'¥',unitColor:'red',isOn:'price==51',align:'left'},
{xtype:'combo',name:'industry',isOn:'"price"=="59.89"',store:simpleStore2}
]} ,
{xtype:'numberfield',name:'change',unit:'¥',unitColor:'red',format:'0.00',maxLength:10,minValue:'0',isOff:'change<1',offText:'off',nullValue:''} ,
{xtype:'combo',name:'lastChange',store:simpleStore , blankText:'select..',
changCond:[{xtype:'numberfield',name:'lastChange',isOn:'price==51',unit:'&',unitColor:'red'},
{xtype:'combo',name:'lastChange',isOn:'price==81.72',store:simpleStore3}
]}
]})
],
iconCls:'icon-grid',
buttonAlign:'center',
listeners:{
afteredit :function(value,grid,row,col,record,cancel){
alert('afteredit:value,grid,row,col,record,cancel');
}
},
buttons:[{text:'test',handler:function(){
var data = grid.store.data.items;
var xf = Ext.util.Format;
Ext.each(data,function(v){
alert('test:'+v.get('industry'));
});
}}]
});
var viewprot = new Ext.Viewport({
autoScroll:false,
layout:'fit',
items:grid
});
});
// Array data for the grids
Ext.grid.dummyData = [
[' 3m Co ',51,0.02,11,'101', null,1] ,
['3m Co',null,12,0.03,'bb', '2',2],
['Walt Disney Company (The) (Holding Company)',59.89,24,0.81,'cdc', '2',3],
['3m Co',81.72,0.02,0.03,'bb', '3',4]
];
</script>
</html>



/*
* desc:本插件主要解决的问题:是在grid表格里的在同一列里不能同时存在多种控件(如: textfield,numberfield,label,combo),以及在combo中的不同数据store。(如上图所示)
*GridFieldPlugin.js
* author:zengzw ziwenzeng@163.com
* date: 2010-7-13
* type: Ext.ux.form.GridFieldPlugin
*
* use:
* <code>
* plugins: [
* new Ext.ux.form.GridFieldPlugin({columnsToEdit:
* [{xtype:'link',name:'company',link:['<a href="{0}">{1}{2}</a>','dataIndex','dd','xx']},
* {xtype:'textfield',name:'industry',isOff:'price==81.72',
* changCond:[{xtype:'numberfield',name:'industry',unit:'¥',unitColor:'red',isOn:'price==51'},
{xtype:'combo',name:'industry',isOn:'price==59.89',store:simpleStore2}
]} ,
{xtype:'numberfield',name:'change',unit:'¥',unitColor:'red',format:'0.00',maxLength:10,minValue:'0',isOff:'change<1'} ,
{xtype:'combo',name:'lastChange',store:simpleStore ,isOff:'price<10',
changCond:[{xtype:'numberfield',name:'lastChange',isOn:'price==51',unit:'¥',unitColor:'red'},
{xtype:'combo',name:'lastChange',isOn:'price==81.72',store:simpleStore3}
]}
]})
],
* </code>
* if you use this plugin in editorgridpanel, the afteredit method params:(value,grid,row,col,record cancel)
* eg.
* <code>
* afteredit :function(value,grid,row,col,record,cancel)
* </code>
*/
Ext.ns('Ext.ux.form');
Ext.ux.form.GridFieldPlugin = Ext.extend(Ext.Panel, {
columnsToEdit:[],//need to edit column name eg:[{xtype:'textfield',name:'columnName',width:'100'}]
initComponent: function(){
Ext.ux.form.GridFieldPlugin.superclass.initComponent.call(this);
},
init: function(grid){
this.grid = grid;
this.store = grid.store;
this.view = grid.getView();
var cm=grid.getColumnModel();
var clength = cm.config.length;
var temp ='';
var handL = String.format('Ext.getCmp(&quot;{0}&quot;).getSelectionModel().select=function(rowIndex, colIndex, preventViewNotify, preventFocus, r){ if(this.fireEvent(&quot;beforecellselect&quot;, this, rowIndex, colIndex) !== false){ this.clearSelections(); r = r || this.grid.store.getAt(rowIndex); this.selection = { record : r, cell : [rowIndex, colIndex] }; if(!preventViewNotify){ var v = this.grid.getView(); v.onCellSelect(rowIndex, colIndex); if(preventFocus !== true){ v.focusCell(rowIndex, colIndex); } } this.fireEvent(&quot;cellselect&quot;, this, rowIndex, colIndex); this.fireEvent(&quot;selectionchange&quot;, this, this.selection); } };',grid.getId());
var handC = 'Ext.getCmp(this.gridId).getSelectionModel().select=function(){ this.clearSelections(); return false;};';
var handV = 'Ext.getCmp(this.gridId).store.getAt(this.rIndex).set(this.cName,this.value);';
var xf = Ext.util.Format;
var sthis=this;
var countRunTime =0;
Ext.each(this.columnsToEdit,function(a){
for(var z =0;z<clength;z++){
var c = cm.config[z];
if(c.dataIndex==a.name){
temp += a.name+',';
/***-----------------------label---------------------------------*/
if(a.xtype=='label'){
c.renderer=function (v,metadata,cedata,rIndex,cIndex,store){
if(v==null)v ='';

var change = sthis.changerendertype(a,v,metadata,cedata,rIndex,cIndex,store,sthis,this,grid,a,xf,handL,handC,handV);
if(change.length>0)return change;

var off = sthis.offrenderer(a,rIndex,store,handL,v);

if(off.length>0)return off;

var lab =sthis.rendererlabel(a,v,metadata,cedata,rIndex,cIndex,store,sthis,this,grid,a,xf,handL,handC,handV);
return lab;
};}
/***-----------------------textfield---------------------------------*/
else if(a.xtype=='textfield'){
c.renderer=function (v,metadata,cedata,rIndex,cIndex,store){
if((Ext.isEmpty(v))&&Ext.isDefined(a.nullValue)){
v = a.nullValue;
}
if(v==null)v ='';

var readOnly = sthis.onrenderreadonly(a,store,rIndex);

var change = sthis.changerendertype(a,v,metadata,cedata,rIndex,cIndex,store,sthis,this,grid,a,xf,handL,handC,handV,readOnly);
if(change.length>0)return change;

var off = sthis.offrenderer(a,rIndex,store,handL,v);

if(off.length>0)return off;
var txt =sthis.renderertxtfield(a,v,metadata,cedata,rIndex,cIndex,store,sthis,this,grid,a,xf,handL,handC,handV,readOnly);
return txt;
};}
/***-----------------------numberfield---------------------------------*/
else if(a.xtype=='numberfield'){
c.renderer=function (v,metadata,cedata,rIndex,cIndex,store){
if((Ext.isEmpty(v))&&Ext.isDefined(a.nullValue)){
v = a.nullValue;
}
if(v==null)v ='';

var readOnly = sthis.onrenderreadonly(a,store,rIndex);

var change = sthis.changerendertype(a,v,metadata,cedata,rIndex,cIndex,store,sthis,this,grid,a,xf,handL,handC,handV,readOnly);
if(change.length>0)return change;

var off = sthis.offrenderer(a,rIndex,store,handL,v);
if(off.length>0)return off;
var unm=sthis.rendernumfield(a,v,metadata,cedata,rIndex,cIndex,store,sthis,this,grid,a,xf,handL,handC,handV,readOnly);
return unm;
};}
/***-----------------------combo------------------------------------*/
else if(a.xtype=='combo'){
c.renderer=function (v,metadata,cedata,rIndex,cIndex,store){
if((Ext.isEmpty(v))&&Ext.isDefined(a.nullValue)){
v = a.nullValue;
}
var label = v;
Ext.each(a.store.data.items,function(r){
if(v==r.data.value) { label=r.data.label;}
});
var readOnly = sthis.onrenderreadonly(a,store,rIndex);

var change = sthis.changerendertype(a,v,metadata,cedata,rIndex,cIndex,store,sthis,this,grid,a,xf,handL,handC,handV,readOnly);
if(change.length>0)return change;

var off = sthis.offrenderer(a,rIndex,store,handL,label);
if(off.length>0)return off;

var box =sthis.rendercombo(a,v,metadata,cedata,rIndex,cIndex,store,sthis,this,grid,a,xf,handL,handC,handV,readOnly);

return box;
};}
else if (a.xtype=='link'){
c.renderer=function (v,metadata,cedata,rIndex,cIndex,store){
if((Ext.isEmpty(v))&&Ext.isDefined(a.nullValue)){
v = a.nullValue;
}
var readOnly = sthis.onrenderreadonly(a,store,rIndex);

if(!Ext.isEmpty(a.link)){
var link = a.link[0];
var fm ='';
var re = store.getAt(rIndex);

var args = Ext.toArray(a.link, 1);
link = link.replace(/\{(\d+)\}/g, function(m, i){
var vl = re.get(args[i]);
if(Ext.isEmpty(vl))
vl = args[i];
return vl;
});
}
return String.format('<div onmouseenter="javascript:{0};">{1}',handL,link);
};
}
}/***-----------------------unknow---------------------------------*/

else{
if(temp.indexOf(c.dataIndex)==-1)
c.renderer=function (v,metadata,cedata,rIndex,cIndex,store){
var style = sthis.onrenderstyle(a,store,rIndex);
if(v==null)v ='';
return String.format('<div onmouseenter="javascript:{0};" >{1}',handL,v);
};
}
}
});
this.addEvents('offrenderer','rendercombo');

},
offrenderer : function(a,rIndex,store,handL,v){
//判断 a.isOff是否关闭组件
var isOff = a.isOff;
var xf = Ext.util.Format;
if(Ext.isEmpty(isOff))return '';
var nmarr = isOff.match(/[a-z|A-Z|0-9|_]+\b/g);
if(nmarr!=null&&nmarr.length>0){
var t = isOff;
for(var i=0;i<nmarr.length;i++){
var vr = store.getAt(rIndex).get(nmarr[i]);
if(vr!=undefined) t=t.replace(nmarr[i],vr);
}
try{
if(eval(t)){
if(Ext.isDefined(a.isOff)&&Ext.isDefined(a.offText)){
v = a.offText;
}
return String.format('<div onmouseenter="javascript:{0};">{1}',handL,xf.number(v,xf.defaultValue(a.format,'')));
}
}catch(e){return '';}
}
return '';
},
changerendertype : function(a,v,metadata,cedata,rIndex,cIndex,store,sthis,rthis,grid,a,xf,handL,handC,handV,readOnly){
if(!Ext.isEmpty(a.changCond)){
for(var z =0;z<a.changCond.length;z++){
var r = a.changCond[z];
var rr = Ext.isDefined(r.isOn)?r.isOn:r.isOff;
var nmarr = rr.match(/[a-z|A-Z|_|0-9]+\b/g);
if(nmarr!=null&&nmarr.length>0){
var t = Ext.isDefined(r.isOn)?r.isOn:r.isOff;
for(var i=0;i<nmarr.length;i++){
var vr = store.getAt(rIndex).get(nmarr[i]);
if(vr!=undefined) t=t.replace(nmarr[i],vr);
}
try{
if(eval(t)){

if(r.xtype=='numberfield'){
return sthis.rendernumfield(r,v,metadata,cedata,rIndex,cIndex,store,sthis,rthis,grid,r,xf,handL,handC,handV,readOnly);
}
if(r.xtype=='combo'){
return sthis.rendercombo(r,v,metadata,cedata,rIndex,cIndex,store,sthis,rthis,grid,r,xf,handL,handC,handV,readOnly);
}
if(r.xtype=='textfield'){
return sthis.sthis.renderertxtfield(r,v,metadata,cedata,rIndex,cIndex,store,sthis,rthis,grid,a,xf,handL,handC,handV,readOnly);
}
if(r.xtype=='label'){
return sthis.rendererlabel(r,v,metadata,cedata,rIndex,cIndex,store,sthis,rthis,grid,a,xf,handL,handC,handV,readOnly);
}
}
}catch(e){}
}
}
}
return '';
}
,
renderertxtfield: function(a,v,metadata,cedata,rIndex,cIndex,store,sthis,rthis,grid,aa,xf,handL,handC,handV,readOnly){
var off = sthis.offrenderer(a,rIndex,store,handL,v);
if(off.length>0)return off;
var style = sthis.onrenderstyle(a,store,rIndex);
style = style==undefined?'':style;

var s=[
'<input type="text" value="{0}" autocomplete="off" ',
'size="20" class=" x-form-text x-form-field x-form-focus" ',
'style=" font-size:11px;width: 100%; {1};height: 20px;{5};" gridId="{2}" rIndex="{3}" cName="{4}" ',
String.format(' onmouseenter=" javascript:{0} ;" ',handC),
String.format(' onmouseout=" javascript:{0} ;" ',handL),
'onclick="javascript:this.focus();" ondblclick ="javascript:this.focus();" onselectstart="javascript:this.focus();"',
String.format(' onchange=" javascript: var gfire = Ext.getCmp(this.gridId); var rIndex = this.rIndex;var grecord = gfire.store.getAt(rIndex); gfire.fireEvent(&quot;afteredit&quot;,this.value,gfire,this.rIndex,cIndex,grecord,false) ;"'),
String.format('onblur="javascript:{0};{1};" cIndex="{2}" {3}>',handV,handL,cIndex,readOnly==true?'readonly':'')
];
return String.format(s.join(''),v,'',grid.getId(),rIndex,rthis.dataIndex,style);
}
,
rendernumfield : function(a,v,metadata,cedata,rIndex,cIndex,store,sthis,rthis,grid,aa,xf,handL,handC,handV,readOnly){

v = xf.number(v,xf.defaultValue(a.format,''));
var valid='';
var oldValue='';

if(v!=null){
if(xf.number(v,'0.0').length==0&&v.length!=0){valid='x-form-invalid';}
else {oldValue=v;}
}
var style = sthis.onrenderstyle(a,store,rIndex);
style = style==undefined?'':style;
var offset = xf.defaultValue(a.unit,'')==0?13:0;
var maxLength =xf.defaultValue(a.maxLength,'')-xf.defaultValue(a.format,'').length;
if(maxLength>0&&xf.defaultValue(a.format,'').length>0) maxLength= maxLength+1;
if(Ext.isEmpty(a.maxLength))maxLength='';
var s=[
String.format(' <input type="text" value="{0}" autocomplete="off" maxlength="{1}" minvalue="{2}"',v,xf.defaultValue(maxLength,''),xf.defaultValue(xf.number(a.minValue,a.format),'')),
String.format(' class=" x-form-text x-form-field x-form-num-field x-form-focus {0}" ',valid),
String.format(' style=" font-size:11px;width:{0}; height: 20px;text-align:{1};{6};" gridId="{2}" rIndex="{3}" cName="{4}" oldValue="{5}" ',Ext.isDefined(a.unit)==true?'92%':'100%;',xf.defaultValue(a.align,'right'),grid.getId(),rIndex,rthis.dataIndex,oldValue,style),
String.format(' onchange=" javascript:;this.value=Ext.util.Format.number(this.value,&quot;{2}&quot;); if(this.minvalue.length>0&&this.value-this.minvalue<0){this.value=this.minvalue;};{0};{1}; var gfire = Ext.getCmp(this.gridId); var rIndex = this.rIndex;var grecord = gfire.store.getAt(rIndex); gfire.fireEvent(&quot;afteredit&quot;,this.value,gfire,this.rIndex,cIndex,grecord,false) ;" ',handV,handL,xf.defaultValue(a.format,'')),
String.format(' onmouseenter=" javascript:{0} ;" cIndex="{1}"',handC,cIndex),
String.format(' onmouseout=" javascript:{0} ;" ',handL),
' onclick ="javascript:this.focus();" onselectstart="javascript:this.focus();"',
String.format('onkeyup="javascript: var xf = Ext.util.Format; var tvalue = this.value; if((tvalue!=&quot;-&quot;&&tvalue.length!=1)&&xf.number(tvalue,&quot;0.0&quot).length==0&&tvalue.length!=0){var t=xf.number(this.oldValue,&quot;{0}&quot;);this.value=t;}else { if(tvalue==&quot;-&quot;&&tvalue.length==1){}} "',xf.defaultValue(a.format,'')),
' onkeydown ="javascript: var xf = Ext.util.Format; var tvalue = this.value; if(!(xf.number(tvalue,&quot;0.0&quot).length==0&&tvalue.length!=0)) this.oldValue=tvalue;"',
String.format('onblur="javascript: {0};{3};" {4} /><font color="{1}" >{2}</font>',handV,xf.defaultValue(a.unitColor,''),xf.defaultValue(a.unit,''),xf.defaultValue(a.format,'0.00'),readOnly==true?'readonly':'')//handL,readOnly==true?'readonly':''
];
return String.format(s.join(''));
}
,
rendercombo: function(a,v,metadata,cedata,rIndex,cIndex,store,sthis,rthis,grid,aa,xf,handL,handC,handV,readOnly){
var citems = undefined;
if(Ext.isDefined(a.store))
citems = a.store.data.items;

metadata.css = ' ';
var s ='<select id="mainId" class=" x-form-text x-form-field x-trigger-noedit x-form-focus" style="font-size:11px;width:100%;{0};heigth:100px;"';
s+= String.format(' onchange="javascript: this.ischange = true;{4} {3} ; var gfire = Ext.getCmp(this.gridId); var rIndex = this.rIndex;var grecord = gfire.store.getAt(rIndex); gfire.fireEvent(&quot;afteredit&quot;,this.value,gfire,this.rIndex,cIndex,grecord,false) ;" gridId="{0}" rIndex="{1}" cName="{2}" cIndex="{5}" isEnter=false ',grid.getId(),rIndex,rthis.dataIndex,handL,handV,cIndex);
s+= String.format(' onmouseenter=" javascript: {0}" ',handC);
s+= String.format(' onblur=" javascript:{0}" ',handL);
s+= String.format(' onfocusout="javascript: {0}" ',handL);
s+=' {2}>{1}';
var isSelected=false;
var blankSel= String.format('<option value= "" >{0}</option>',a.blankText);
if(Ext.isEmpty(a.blankText))blankSel='';
if(Ext.isDefined(a.store))
Ext.each(citems,function(r){
var selected='';
if(v==r.data.value) {selected ='selected';isSelected=true; label=r.data.label;}
s += String.format('<option value= "{0}" {1}>{2}</option>',r.data.value,selected,r.data.label);
});

if(Ext.isDefined(a.dataName)){
var da = store.getAt(rIndex).get(a.dataName).inputData;
Ext.each(da,function(r){
var selected='';
if(v==r[0]) {selected ='selected';isSelected=true;}
s += String.format('<option value= "{0}" {1}>{2}</option>',r[0],selected,r[1]);
});
}
s +='</select>';
return String.format(s,'',blankSel,readOnly==true?'disabled':'');
},
rendererlabel: function(aa,v,metadata,cedata,rIndex,cIndex,store,sthis,rthis,grid,a,xf,handL,handC,handV){
var style = sthis.onrenderstyle(aa,store,rIndex);
style = style==undefined?'':style;
if(v==null)v ='';
if(Ext.isDefined(aa.offText)){
v = aa.offText;
}

return String.format('<div onmouseenter="javascript:{0};" style="{1}">{2}</div>',handL,style,xf.number(v,xf.defaultValue(aa.format,'')));
},
onrenderstyle : function(a,store,rIndex){
if(Ext.isDefined(a.style)){
if(!Ext.isArray(a.style)) return a.style;
for(var i=0;i<a.style.length;i++){
var nmarr = a.style[i].isOn.match(/[a-z|A-Z|0-9|_]+\b/g);
if(nmarr!=null&&nmarr.length>0){
var t = a.style[i].isOn;
var ts=t;
for(var j=0;j<nmarr.length;j++){
var vr = store.getAt(rIndex).get(nmarr[j]);
if(vr!=undefined) t=t.replace(nmarr[j],vr);
}
try{
if(eval(t)){
return a.style[i].style;
}
}catch(e){
alert('isOn:'+ts+' error:'+e.message);
return undefined;
}
}
}
}
return undefined;
},
onrenderreadonly: function(a,store,rIndex){
if(Ext.isDefined(a.readOnly)){
for(var i=0;i<a.readOnly.length;i++){
var nmarr = a.readOnly[i].isOn.match(/[a-z|A-Z|0-9|_]+\b/g);
if(nmarr!=null&&nmarr.length>0){
var t = a.readOnly[i].isOn;
var ts=t;
for(var j=0;j<nmarr.length;j++){
var vr = store.getAt(rIndex).get(nmarr[j]);
if(vr!=undefined) t=t.replace(nmarr[j],vr);
}
try{
if(eval(t)){
return true;
}
}catch(e){
alert('[readOnly]:isOn:'+ts+' error:'+e.message);
return false;
}
}
}
}
return false;
}
});