ColumnListGrid.js (7760B)
1 Ext.define("PartKeepr.Components.Widgets.ColumnConfigurator.ColumnListGrid", { 2 extend: "Ext.grid.Panel", 3 layout: 'fit', 4 columns: [ 5 { 6 header: "Title", 7 dataIndex: 'text', 8 menuDisabled: true, 9 resizable: false, 10 flex: 1 11 }, { 12 header: "Field", 13 menuDisabled: true, 14 resizable: false, 15 dataIndex: 'dataIndex', 16 flex: 1 17 }, { 18 header: "index", 19 dataIndex: "index", 20 width: 20 21 } 22 ], 23 viewConfig: { 24 markDirty: false 25 }, 26 27 sortableColumns: false, 28 store: { 29 model: 'PartKeepr.Models.ColumnConfiguration', 30 sorters: [{ 31 property: 'index', 32 direction: 'ASC' 33 }] 34 }, 35 bind: { 36 selection: '{column}' 37 }, 38 initComponent: function () 39 { 40 this.dockedItems = [ 41 { 42 xtype: 'toolbar', 43 dock: 'bottom', 44 items: [{ 45 iconCls: 'web-icon accept', 46 itemId: "apply", 47 disabled: false, 48 text: i18n("Apply") 49 }, { 50 iconCls: 'web-icon cancel', 51 itemId: "cancel", 52 disabled: false, 53 text: i18n("Cancel") 54 }, '-', { 55 iconCls: 'fugue-icon table-insert-column', 56 itemId: "addField", 57 disabled: false, 58 tooltip: i18n("Add new field") 59 }, { 60 iconCls: 'fugue-icon table-delete-column', 61 itemId: "deleteField", 62 disabled: true, 63 tooltip: i18n("Delete field") 64 }, '-',{ 65 iconCls: 'fugue-icon arrow-stop-090', 66 itemId: "move-top", 67 disabled: true, 68 tooltip: i18n("Move to top") 69 }, { 70 iconCls: 'fugue-icon arrow-090', 71 tooltip: i18n("Move up"), 72 disabled: true, 73 itemId: "move-up" 74 }, { 75 iconCls: 'fugue-icon arrow-270', 76 itemId: "move-down", 77 disabled: true, 78 tooltip: i18n("Move down") 79 }, { 80 iconCls: 'fugue-icon arrow-stop-270', 81 itemId: "move-bottom", 82 disabled: true, 83 tooltip: i18n("Move to bottom") 84 },'-', { 85 iconCls: 'fugue-icon arrow-return-180', 86 itemId: "restoreDefaults", 87 tooltip: i18n("Restore Defaults") 88 }] 89 }, { 90 xtype: 'toolbar', 91 dock: 'bottom', 92 items: { 93 xtype: 'presetcombo', 94 model: 'PartKeepr.FrontendBundle.Entity.GridPreset', 95 itemId: 'gridPresetCombo', 96 allowMarkAsDefault: true, 97 markedAsDefaultProperty: 'gridDefault', 98 displayField: 'name', 99 blankConfiguration: [ 100 { 101 102 } 103 ], 104 width: 300 105 106 } 107 }]; 108 this.callParent(); 109 110 this.down("#move-top").on("click", this.moveTop, this); 111 this.down("#move-up").on("click", this.moveUp, this); 112 this.down("#move-down").on("click", this.moveDown, this); 113 this.down("#move-bottom").on("click", this.moveBottom, this); 114 115 this.down("#deleteField").on("click", this.deleteField, this); 116 this.down("#addField").on("click", this.addField, this); 117 118 this.getStore().on("update", this.updateButtonState, this); 119 this.on("selectionchange", this.updateButtonState, this); 120 121 this.on("select", this.updateButtonState, this); 122 }, 123 addField: function () 124 { 125 var i, max = 0; 126 127 for (i = 0; i < this.getStore().getCount(); i++) 128 { 129 if (this.getStore().getAt(i).get("index") > max) 130 { 131 max = this.getStore().getAt(i).get("index"); 132 } 133 } 134 var j = Ext.create("PartKeepr.Models.ColumnConfiguration", { 135 index: max + 1, 136 widthMode: "flex", 137 flex: 1 138 }); 139 140 this.getStore().add(j); 141 142 this.ensureVisible(j); 143 this.setSelection(j); 144 }, 145 deleteField: function () 146 { 147 var oldIdx = this.getStore().indexOf(this.getSelection()[0]); 148 this.getStore().remove(this.getSelection()[0]); 149 150 this.setSelection(this.getStore().getAt(oldIdx)); 151 }, 152 updateButtonState: function () 153 { 154 var record; 155 156 if (this.getSelection().length !== 1) 157 { 158 this.down("#deleteField").disable(); 159 this.down("#move-top").disable(); 160 this.down("#move-up").disable(); 161 this.down("#move-bottom").disable(); 162 this.down("#move-down").disable(); 163 164 return; 165 } 166 167 record = this.getSelection()[0]; 168 this.down("#deleteField").enable(); 169 170 if (this.getStore().indexOf(record) === 0) 171 { 172 this.down("#move-top").disable(); 173 this.down("#move-up").disable(); 174 } else 175 { 176 this.down("#move-top").enable(); 177 this.down("#move-up").enable(); 178 } 179 180 if (this.getStore().indexOf(record) === this.getStore().getCount() - 1) 181 { 182 this.down("#move-bottom").disable(); 183 this.down("#move-down").disable(); 184 } else 185 { 186 this.down("#move-bottom").enable(); 187 this.down("#move-down").enable(); 188 } 189 }, 190 moveTop: function () 191 { 192 var record, sort; 193 194 if (this.getSelection().length === 1) 195 { 196 for (sort = this.getStore().getCount() - 1; sort > -1; sort--) 197 { 198 this.getStore().getAt(sort).set("index", sort + 1); 199 } 200 record = this.getSelection()[0]; 201 record.set("index", 0); 202 } 203 204 this.ensureVisible(record); 205 }, 206 moveBottom: function () 207 { 208 var record, sort; 209 210 if (this.getSelection().length === 1) 211 { 212 record = this.getSelection()[0]; 213 record.set("index", this.getStore().getCount()); 214 215 for (sort = 0; sort < this.getStore().getCount(); sort++) 216 { 217 this.getStore().getAt(sort).set("index", sort); 218 } 219 } 220 221 this.ensureVisible(record); 222 }, 223 moveDown: function () 224 { 225 var record, nextRecord, sort, myIndex; 226 227 if (this.getSelection().length === 1) 228 { 229 record = this.getSelection()[0]; 230 myIndex = this.getStore().indexOf(record); 231 nextRecord = this.getStore().getAt(myIndex + 1); 232 sort = nextRecord.get("index"); 233 nextRecord.set("index", record.get("index")); 234 record.set("index", sort); 235 } 236 237 this.ensureVisible(record); 238 }, 239 moveUp: function () 240 { 241 var record, previousRecord, sort, myIndex; 242 243 if (this.getSelection().length === 1) 244 { 245 record = this.getSelection()[0]; 246 myIndex = this.getStore().indexOf(record); 247 previousRecord = this.getStore().getAt(myIndex - 1); 248 sort = previousRecord.get("index"); 249 previousRecord.set("index", record.get("index")); 250 record.set("index", sort); 251 } 252 253 this.ensureVisible(record); 254 } 255 });