/source/Plug-in/ext/ItemSelector.js

http://prosporous.googlecode.com/ · JavaScript · 361 lines · 313 code · 23 blank · 25 comment · 52 complexity · 9545b01711020697a922fcd694d45ce5 MD5 · raw file

  1. /*
  2. * Ext JS Library 2.2
  3. * Copyright(c) 2006-2008, Ext JS, LLC.
  4. * licensing@extjs.com
  5. *
  6. * http://extjs.com/license
  7. */
  8. /*
  9. * Note that this control will most likely remain as an example, and not as a core Ext form
  10. * control. However, the API will be changing in a future release and so should not yet be
  11. * treated as a final, stable API at this time.
  12. */
  13. /**
  14. * @class Ext.ux.ItemSelector
  15. * @extends Ext.form.Field
  16. * A control that allows selection of between two Ext.ux.MultiSelect controls.
  17. *
  18. * @history
  19. * 2008-06-19 bpm Original code contributed by Toby Stuart
  20. *
  21. * @constructor
  22. * Create a new ItemSelector
  23. * @param {Object} config Configuration options
  24. */
  25. Ext.ux.ItemSelector = Ext.extend(Ext.form.Field, {
  26. msWidth:200,
  27. msHeight:300,
  28. hideNavIcons:false,
  29. imagePath:"",
  30. iconUp:"up2.gif",
  31. iconDown:"down2.gif",
  32. iconLeft:"left2.gif",
  33. iconRight:"right2.gif",
  34. iconTop:"top2.gif",
  35. iconBottom:"bottom2.gif",
  36. drawUpIcon:true,
  37. drawDownIcon:true,
  38. drawLeftIcon:true,
  39. drawRightIcon:true,
  40. drawTopIcon:true,
  41. drawBotIcon:true,
  42. fromStore:null,
  43. toStore:null,
  44. fromData:null,
  45. toData:null,
  46. displayField:0,
  47. valueField:1,
  48. switchToFrom:false,
  49. allowDup:false,
  50. focusClass:undefined,
  51. delimiter:',',
  52. readOnly:false,
  53. toLegend:null,
  54. fromLegend:null,
  55. toSortField:null,
  56. fromSortField:null,
  57. toSortDir:'ASC',
  58. fromSortDir:'ASC',
  59. toTBar:null,
  60. fromTBar:null,
  61. bodyStyle:null,
  62. border:false,
  63. defaultAutoCreate:{tag: "div"},
  64. initComponent: function(){
  65. Ext.ux.ItemSelector.superclass.initComponent.call(this);
  66. this.addEvents({
  67. 'rowdblclick' : true,
  68. 'change' : true
  69. });
  70. },
  71. onRender: function(ct, position){
  72. Ext.ux.ItemSelector.superclass.onRender.call(this, ct, position);
  73. this.fromMultiselect = new Ext.ux.Multiselect({
  74. legend: this.fromLegend,
  75. delimiter: this.delimiter,
  76. allowDup: this.allowDup,
  77. copy: this.allowDup,
  78. allowTrash: this.allowDup,
  79. dragGroup: this.readOnly ? null : "drop2-"+this.el.dom.id,
  80. dropGroup: this.readOnly ? null : "drop1-"+this.el.dom.id,
  81. width: this.msWidth,
  82. height: this.msHeight,
  83. dataFields: this.dataFields,
  84. data: this.fromData,
  85. displayField: this.displayField,
  86. valueField: this.valueField,
  87. store: this.fromStore,
  88. isFormField: false,
  89. tbar: this.fromTBar,
  90. appendOnly: true,
  91. sortField: this.fromSortField,
  92. sortDir: this.fromSortDir
  93. });
  94. this.fromMultiselect.on('dblclick', this.onRowDblClick, this);
  95. if (!this.toStore) {
  96. this.toStore = new Ext.data.SimpleStore({
  97. fields: this.dataFields,
  98. data : this.toData
  99. });
  100. }
  101. this.toStore.on('add', this.valueChanged, this);
  102. this.toStore.on('remove', this.valueChanged, this);
  103. this.toStore.on('load', this.valueChanged, this);
  104. this.toMultiselect = new Ext.ux.Multiselect({
  105. legend: this.toLegend,
  106. delimiter: this.delimiter,
  107. allowDup: this.allowDup,
  108. dragGroup: this.readOnly ? null : "drop1-"+this.el.dom.id,
  109. //dropGroup: this.readOnly ? null : "drop2-"+this.el.dom.id+(this.toSortField ? "" : ",drop1-"+this.el.dom.id),
  110. dropGroup: this.readOnly ? null : "drop2-"+this.el.dom.id+",drop1-"+this.el.dom.id,
  111. width: this.msWidth,
  112. height: this.msHeight,
  113. displayField: this.displayField,
  114. valueField: this.valueField,
  115. store: this.toStore,
  116. isFormField: false,
  117. tbar: this.toTBar,
  118. sortField: this.toSortField,
  119. sortDir: this.toSortDir
  120. });
  121. this.toMultiselect.on('dblclick', this.onRowDblClick, this);
  122. var p = new Ext.Panel({
  123. bodyStyle:this.bodyStyle,
  124. border:this.border,
  125. layout:"table",
  126. layoutConfig:{columns:3}
  127. });
  128. p.add(this.switchToFrom ? this.toMultiselect : this.fromMultiselect);
  129. var icons = new Ext.Panel({header:false});
  130. p.add(icons);
  131. p.add(this.switchToFrom ? this.fromMultiselect : this.toMultiselect);
  132. p.render(this.el);
  133. icons.el.down('.'+icons.bwrapCls).remove();
  134. if (this.imagePath!="" && this.imagePath.charAt(this.imagePath.length-1)!="/")
  135. this.imagePath+="/";
  136. this.iconUp = this.imagePath + (this.iconUp || 'up2.gif');
  137. this.iconDown = this.imagePath + (this.iconDown || 'down2.gif');
  138. this.iconLeft = this.imagePath + (this.iconLeft || 'left2.gif');
  139. this.iconRight = this.imagePath + (this.iconRight || 'right2.gif');
  140. this.iconTop = this.imagePath + (this.iconTop || 'top2.gif');
  141. this.iconBottom = this.imagePath + (this.iconBottom || 'bottom2.gif');
  142. var el=icons.getEl();
  143. if (!this.toSortField) {
  144. this.toTopIcon = el.createChild({tag:'img', src:this.iconTop, style:{cursor:'pointer', margin:'2px'}});
  145. el.createChild({tag: 'br'});
  146. this.upIcon = el.createChild({tag:'img', src:this.iconUp, style:{cursor:'pointer', margin:'2px'}});
  147. el.createChild({tag: 'br'});
  148. }
  149. this.addIcon = el.createChild({tag:'img', src:this.switchToFrom?this.iconLeft:this.iconRight, style:{cursor:'pointer', margin:'2px'}});
  150. el.createChild({tag: 'br'});
  151. this.removeIcon = el.createChild({tag:'img', src:this.switchToFrom?this.iconRight:this.iconLeft, style:{cursor:'pointer', margin:'2px'}});
  152. el.createChild({tag: 'br'});
  153. if (!this.toSortField) {
  154. this.downIcon = el.createChild({tag:'img', src:this.iconDown, style:{cursor:'pointer', margin:'2px'}});
  155. el.createChild({tag: 'br'});
  156. this.toBottomIcon = el.createChild({tag:'img', src:this.iconBottom, style:{cursor:'pointer', margin:'2px'}});
  157. }
  158. if (!this.readOnly) {
  159. if (!this.toSortField) {
  160. this.toTopIcon.on('click', this.toTop, this);
  161. this.upIcon.on('click', this.up, this);
  162. this.downIcon.on('click', this.down, this);
  163. this.toBottomIcon.on('click', this.toBottom, this);
  164. }
  165. this.addIcon.on('click', this.fromTo, this);
  166. this.removeIcon.on('click', this.toFrom, this);
  167. }
  168. if (!this.drawUpIcon || this.hideNavIcons) { this.upIcon.dom.style.display='none'; }
  169. if (!this.drawDownIcon || this.hideNavIcons) { this.downIcon.dom.style.display='none'; }
  170. if (!this.drawLeftIcon || this.hideNavIcons) { this.addIcon.dom.style.display='none'; }
  171. if (!this.drawRightIcon || this.hideNavIcons) { this.removeIcon.dom.style.display='none'; }
  172. if (!this.drawTopIcon || this.hideNavIcons) { this.toTopIcon.dom.style.display='none'; }
  173. if (!this.drawBotIcon || this.hideNavIcons) { this.toBottomIcon.dom.style.display='none'; }
  174. var tb = p.body.first();
  175. this.el.setWidth(p.body.first().getWidth());
  176. p.body.removeClass();
  177. this.hiddenName = this.name;
  178. var hiddenTag={tag: "input", type: "hidden", value: "", name:this.name};
  179. this.hiddenField = this.el.createChild(hiddenTag);
  180. this.valueChanged(this.toStore);
  181. },
  182. initValue:Ext.emptyFn,
  183. toTop : function() {
  184. var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
  185. var records = [];
  186. if (selectionsArray.length > 0) {
  187. selectionsArray.sort();
  188. for (var i=0; i<selectionsArray.length; i++) {
  189. record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
  190. records.push(record);
  191. }
  192. selectionsArray = [];
  193. for (var i=records.length-1; i>-1; i--) {
  194. record = records[i];
  195. this.toMultiselect.view.store.remove(record);
  196. this.toMultiselect.view.store.insert(0, record);
  197. selectionsArray.push(((records.length - 1) - i));
  198. }
  199. }
  200. this.toMultiselect.view.refresh();
  201. this.toMultiselect.view.select(selectionsArray);
  202. },
  203. toBottom : function() {
  204. var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
  205. var records = [];
  206. if (selectionsArray.length > 0) {
  207. selectionsArray.sort();
  208. for (var i=0; i<selectionsArray.length; i++) {
  209. record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
  210. records.push(record);
  211. }
  212. selectionsArray = [];
  213. for (var i=0; i<records.length; i++) {
  214. record = records[i];
  215. this.toMultiselect.view.store.remove(record);
  216. this.toMultiselect.view.store.add(record);
  217. selectionsArray.push((this.toMultiselect.view.store.getCount()) - (records.length - i));
  218. }
  219. }
  220. this.toMultiselect.view.refresh();
  221. this.toMultiselect.view.select(selectionsArray);
  222. },
  223. up : function() {
  224. var record = null;
  225. var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
  226. selectionsArray.sort();
  227. var newSelectionsArray = [];
  228. if (selectionsArray.length > 0) {
  229. for (var i=0; i<selectionsArray.length; i++) {
  230. record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
  231. if ((selectionsArray[i] - 1) >= 0) {
  232. this.toMultiselect.view.store.remove(record);
  233. this.toMultiselect.view.store.insert(selectionsArray[i] - 1, record);
  234. newSelectionsArray.push(selectionsArray[i] - 1);
  235. }
  236. }
  237. this.toMultiselect.view.refresh();
  238. this.toMultiselect.view.select(newSelectionsArray);
  239. }
  240. },
  241. down : function() {
  242. var record = null;
  243. var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
  244. selectionsArray.sort();
  245. selectionsArray.reverse();
  246. var newSelectionsArray = [];
  247. if (selectionsArray.length > 0) {
  248. for (var i=0; i<selectionsArray.length; i++) {
  249. record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
  250. if ((selectionsArray[i] + 1) < this.toMultiselect.view.store.getCount()) {
  251. this.toMultiselect.view.store.remove(record);
  252. this.toMultiselect.view.store.insert(selectionsArray[i] + 1, record);
  253. newSelectionsArray.push(selectionsArray[i] + 1);
  254. }
  255. }
  256. this.toMultiselect.view.refresh();
  257. this.toMultiselect.view.select(newSelectionsArray);
  258. }
  259. },
  260. fromTo : function() {
  261. var selectionsArray = this.fromMultiselect.view.getSelectedIndexes();
  262. var records = [];
  263. if (selectionsArray.length > 0) {
  264. for (var i=0; i<selectionsArray.length; i++) {
  265. record = this.fromMultiselect.view.store.getAt(selectionsArray[i]);
  266. records.push(record);
  267. }
  268. if(!this.allowDup)selectionsArray = [];
  269. for (var i=0; i<records.length; i++) {
  270. record = records[i];
  271. if(this.allowDup){
  272. var x=new Ext.data.Record();
  273. record.id=x.id;
  274. delete x;
  275. this.toMultiselect.view.store.add(record);
  276. }else{
  277. this.fromMultiselect.view.store.remove(record);
  278. this.toMultiselect.view.store.add(record);
  279. selectionsArray.push((this.toMultiselect.view.store.getCount() - 1));
  280. }
  281. }
  282. }
  283. this.toMultiselect.view.refresh();
  284. this.fromMultiselect.view.refresh();
  285. if(this.toSortField)this.toMultiselect.store.sort(this.toSortField, this.toSortDir);
  286. if(this.allowDup)this.fromMultiselect.view.select(selectionsArray);
  287. else this.toMultiselect.view.select(selectionsArray);
  288. },
  289. toFrom : function() {
  290. var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
  291. var records = [];
  292. if (selectionsArray.length > 0) {
  293. for (var i=0; i<selectionsArray.length; i++) {
  294. record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
  295. records.push(record);
  296. }
  297. selectionsArray = [];
  298. for (var i=0; i<records.length; i++) {
  299. record = records[i];
  300. this.toMultiselect.view.store.remove(record);
  301. if(!this.allowDup){
  302. this.fromMultiselect.view.store.add(record);
  303. selectionsArray.push((this.fromMultiselect.view.store.getCount() - 1));
  304. }
  305. }
  306. }
  307. this.fromMultiselect.view.refresh();
  308. this.toMultiselect.view.refresh();
  309. if(this.fromSortField)this.fromMultiselect.store.sort(this.fromSortField, this.fromSortDir);
  310. this.fromMultiselect.view.select(selectionsArray);
  311. },
  312. valueChanged: function(store) {
  313. var record = null;
  314. var values = [];
  315. for (var i=0; i<store.getCount(); i++) {
  316. record = store.getAt(i);
  317. values.push(record.get(this.valueField));
  318. }
  319. this.hiddenField.dom.value = values.join(this.delimiter);
  320. this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);
  321. },
  322. getValue : function() {
  323. return this.hiddenField.dom.value;
  324. },
  325. onRowDblClick : function(vw, index, node, e) {
  326. return this.fireEvent('rowdblclick', vw, index, node, e);
  327. },
  328. reset: function(){
  329. range = this.toMultiselect.store.getRange();
  330. this.toMultiselect.store.removeAll();
  331. if (!this.allowDup) {
  332. this.fromMultiselect.store.add(range);
  333. this.fromMultiselect.store.sort(this.displayField,'ASC');
  334. }
  335. this.valueChanged(this.toMultiselect.store);
  336. }
  337. });
  338. Ext.reg("itemselector", Ext.ux.ItemSelector);