ColumProperties.js (4018B)
1 Ext.define("PartKeepr.Components.Widgets.ColumnConfigurator.ColumnProperties", { 2 extend: 'Ext.form.Panel', 3 4 scrollable: true, 5 items: [{ 6 xtype: 'fieldcontainer', 7 fieldLabel: i18n("Field"), 8 layout: 'hbox', 9 items: [ 10 { 11 flex: 1, 12 xtype: 'textfield', 13 itemId: "field", 14 bind: '{column.dataIndex}', 15 emptyText: i18n("Select a field"), 16 readOnly: true 17 }, 18 { 19 width: 100, 20 xtype: 'button', 21 itemId: "selectField", 22 text: i18n("Select field") 23 } 24 ] 25 }, { 26 xtype: 'textfield', 27 bind: "{column.text}", 28 fieldLabel: i18n("Title") 29 }, { 30 xtype: 'textfield', 31 bind: "{column.tooltip}", 32 fieldLabel: i18n("Tooltip") 33 }, { 34 xtype: 'fieldcontainer', 35 fieldLabel: i18n("Width"), 36 items: [{ 37 xtype: 'fieldcontainer', 38 layout: 'hbox', 39 items: [{ 40 xtype: 'radio', 41 name: 'widthMode', 42 itemId: "widthModeFixed", 43 boxLabel: i18n("Fixed"), 44 bind: { 45 value: "{!isFlex}" 46 } 47 }, { 48 bind: { 49 value: "{column.width}", 50 disabled: "{isFlex}" 51 }, 52 53 xtype: 'numberfield' 54 }] 55 }, { 56 xtype: 'fieldcontainer', 57 layout: 'hbox', 58 items: [{ 59 xtype: 'radio', 60 itemId: "widthModeFlex", 61 name: "widthMode", 62 bind: { 63 value: "{isFlex}" 64 }, 65 boxLabel: i18n("Ratio") 66 }, { 67 xtype: 'numberfield', 68 itemId: 'flexValue', 69 bind: { 70 value: "{column.flex}", 71 disabled: "{!isFlex}" 72 } 73 }] 74 }] 75 76 }, { 77 xtype: 'checkbox', 78 hideEmptyLabel: false, 79 boxLabel: i18n("Hidden"), 80 bind: { 81 value: "{column.hidden}" 82 } 83 }, { 84 xtype: 'fieldcontainer', 85 flex: 1, 86 layout: 'fit', 87 fieldLabel: i18n("Renderers"), 88 itemId: 'renderersContainer', 89 90 items: [{ 91 xtype: 'partkeepr.renderersGrid', 92 itemId: "renderers" 93 }] 94 }], 95 96 sourceModel: null, 97 layout: { 98 type: 'vbox', 99 align: 'stretch', 100 pack: 'start' 101 }, 102 defaults: { 103 anchor: '100%', 104 labelWidth: 80 105 }, 106 107 initComponent: function () 108 { 109 this.callParent(arguments); 110 111 this.down("#selectField").on("click", this.onFieldSelectClick, this); 112 this.down("#widthModeFlex").on("change", this.onWidthModeChanged, this); 113 this.down("#widthModeFixed").on("change", this.onWidthModeChanged, this); 114 this.down("#renderers").setSourceModel(this.sourceModel); 115 }, 116 117 onFieldSelectClick: function () 118 { 119 this.modelFieldSelectorWindow = Ext.create("PartKeepr.Components.Widgets.FieldSelectorWindow", { 120 sourceModel: this.sourceModel 121 }); 122 this.modelFieldSelectorWindow.on("fieldSelect", function (field) 123 { 124 this.down("#field").setValue(field.data.data.name); 125 }, this); 126 this.modelFieldSelectorWindow.show(); 127 }, 128 loadRecord: function (record) 129 { 130 this.callParent(arguments); 131 132 if (record.get("flex") > 0) 133 { 134 record.set("width", 0); 135 } 136 137 this.down("#renderers").bindStore(record.renderers()); 138 }, 139 onWidthModeChanged: function () 140 { 141 if (this.down("#widthModeFixed").getValue()) 142 { 143 this.getRecord().set("widthMode", "fixed"); 144 } else 145 { 146 this.getRecord().set("widthMode", "flex"); 147 } 148 } 149 });