diff --git a/app/assets/javascripts/custom_netzke_helpers.js b/app/assets/javascripts/custom_netzke_helpers.js index b46baa7..38b5850 100644 --- a/app/assets/javascripts/custom_netzke_helpers.js +++ b/app/assets/javascripts/custom_netzke_helpers.js @@ -3,3 +3,344 @@ Ext.Ajax.on('requestexception', function(conn, response, options) { if (response.status === 401) { window.location = '/users/sign_in'; } }, this); +Ext.define('Ext.ux.form.field.ColorCombo', { + extend:'Ext.form.FieldContainer', + mixins:{ + field:'Ext.form.field.Field' + }, + alias: 'widget.xcolorcombo', + + //configurables + combineErrors: true, + msgTarget: 'under', + layout: 'hbox', + readOnly: false, + + // properties + colorValue: null, + /** + * @property dateField + * @type Ext.form.field.Date + */ + colorField: null, + + initComponent: function(){ + var me = this + ,i = 0 + ,key + ,tab; + + me.items = me.items || []; + + me.colorField = Ext.create('Ext.form.field.Trigger', { + flex:1, + isFormField:false, //exclude from field query's + submitValue:false, + readOnly: me.readOnly, + onTriggerClick: function() { + //needs to be called twice because? + me.picker.alignTo(me.colorField.inputEl); + me.picker.show(); + me.picker.alignTo(me.colorField.inputEl); + me.picker.show(); + } + }); + me.items.push(me.colorField); + + me.picker = Ext.create('Ext.picker.Color', { + renderTo: document.body, + floating: true, + hidden: true, + style: { + backgroundColor: "#fff" + }, + listeners: { + scope:this, + select: function(field, value, opts){ + me.setValue(value); + me.picker.hide(); + } + } + }); + me.items.push(me.picker); + + for (; i < me.items.length; i++) { + me.items[i].on('focus', Ext.bind(me.onItemFocus, me)); + me.items[i].on('blur', Ext.bind(me.onItemBlur, me)); + me.items[i].on('specialkey', function(field, event){ + key = event.getKey(); + tab = key == event.TAB; + + if (tab && me.focussedItem == me.dateField) { + event.stopEvent(); + me.timeField.focus(); + return; + } + + me.fireEvent('specialkey', field, event); + }); + } + + me.callParent(); + + // this dummy is necessary because Ext.Editor will not check whether an inputEl is present or not + this.inputEl = { + dom: document.createElement('div'), + swallowEvent:function(){} + }; + + me.initField(); + }, + focus:function(){ + this.callParent(arguments); + this.colorField.focus(); + var me = this; + }, + + onItemFocus:function(item){ + if (this.blurTask){ + this.blurTask.cancel(); + } + this.focussedItem = item; + }, + + onItemBlur:function(item, e){ + var me = this; + if (item != me.focussedItem){ return; } + // 100ms to focus a new item that belongs to us, otherwise we will assume the user left the field + me.blurTask = new Ext.util.DelayedTask(function(){ + me.picker.hide(); + me.fireEvent('blur', me, e); + }); + me.blurTask.delay(100); + }, + + getValue: function(){ + var value = null + ,color = this.colorField.getSubmitValue(); + + if (color){ + value = this.colorField.getValue(); + } + return value; + }, + + getSubmitValue: function(){ +// var value = this.getValue(); +// return value ? Ext.Date.format(value, this.dateTimeFormat) : null; + + var me = this + ,value = me.getValue(); + + return value; + }, + + setValue: function(value){ + this.colorField.setValue(value); + }, + // Bug? A field-mixin submits the data from getValue, not getSubmitValue + getSubmitData: function(){ + var me = this + ,data = null; + + if (!me.disabled && me.submitValue && !me.isFileUpload()) { + data = {}; + data[me.getName()] = '' + me.getSubmitValue(); + } + return data; + } +}); + +/** +Ext.define('Ext.ux.ColorPickerCombo', { + extend: 'Ext.form.field.Trigger', + alias: 'widget.colorcbo', + initComponent: function(){ + console.log("INIT"); + this.my_value = "pee"; + console.log(this.getValue); + console.log(this.rawToValue(this.processRawValue(this.getRawValue()))); + console.log("hmmm"); + }, + getSubmitValue: function(){ + console.log("GETTING SUBMIT VALUE"); + }, + getSubmitData: function(){ + console.log("GETTING SUBMIT DATA VALUE"); + } +}); +*/ +/** +Ext.define('Ext.ux.ColorPickerCombo', { + extend: 'Ext.form.field.Trigger', + mixins: { + field:'Ext.form.field.Field' + }, + alias: 'widget.colorcbo', + triggerTip: 'Please select a color.', + picker: null, + initComponent: function(){ + console.log("INIT"); + var me = this; + console.log(me); + me.picker = Ext.create('Ext.picker.Color', { + renderTo: document.body, + floating: true, + hidden: false, + style: { + backgroundColor: "#fff" + } , + listeners: { + scope:this, + select: function(field, value, opts){ + console.log(me.originalValue); + console.log(value); + me.setValue(value); + me.setRawValue(value); + me.setFieldStyle("background-color:#"+value+";"); + me.picker.hide(); + console.log("input el"); + console.log(me.inputEl); + //$("#"+me.getInputId()).val(value); + console.log("owner"); + console.log(me.picker.ownerCt); + console.log(me.getValue()); + me.my_value = value; + console.log("my_value"); + console.log(this.my_value); + console.log(this.getValue); + }, + show: function(field,opts){ + console.log("show"); + //field.getEl().monitorMouseLeave(500, field.hide, field); + } + } + }); + //me.picker.hide(); + console.log(me.picker.ownerCt); + }, + onTriggerClick: function() { + var me = this; + me.picker.alignTo(me.inputEl, 'tl-bl?'); + //me.picker.show(me.inputEl); + }, + getValue: function(){ + console.log("GETTING VALUE"); + var me = this, + val = me.rawToValue(me.processRawValue(me.getRawValue())); + me.value = val; + return val; + } +});*/ + + +/** +Ext.define('Ext.ux.ColorPickerCombo', { + extend: 'Ext.form.field.Trigger', + alias: 'widget.colorcbo', + triggerTip: 'Please select a color.', + myvalue: null, + initComponent: function(){ + console.log("INIT"); + console.log(this); + }, + onTriggerClick: function() { + var me = this; + picker = Ext.create('Ext.picker.Color', { + pickerField: this, + ownerCt: this, + renderTo: document.body, + floating: true, + hidden: true, + focusOnShow: true, + style: { + backgroundColor: "#fff" + } , + listeners: { + scope:this, + select: function(field, value, opts){ + me.setRawValue(value); + me.resetOriginalValue(value); + me.myvalue = value; + me.inputEl.setStyle({backgroundColor:value}); + picker.hide(); + me.focus(true); + }, + show: function(field,opts){ + field.getEl().monitorMouseLeave(500, field.hide, field); + } + } + }); + picker.alignTo(me.inputEl, 'tl-bl?'); + picker.show(me.inputEl); + picker.on('on', function(){ + var me = this; + me.fireEvent('blur', me, e); + }, me); + }, + getValue: function(){ + console.log("GETTING VALUE"); + console.log(this.myvalue); + console.log(this.inputEl.getValue()); + var me = this, + val = this.myvalue || me.rawToValue(me.processRawValue(me.getRawValue())); + me.value = val; + return val; + } +});*/ +/** +Ext.define('Ext.ux.ColorPickerCombo', { + extend: 'Ext.form.FieldContainer', + mixins:{ + field:'Ext.form.field.Field' + }, + alias: 'widget.colorcbo', + + //configurables + combineErrors: true, + msgTarget: 'under', + layout: 'hbox', + readOnly: false, + + initComponent: function() { + var me = this; + console.log(me); + me.picker = Ext.create('Ext.picker.Color', { + pickerField: this, + ownerCt: this, + renderTo: document.body, + floating: true, + hidden: true, + focusOnShow: true, + style: { + backgroundColor: "#fff" + }, + listeners: { + scope:this, + select: function(field, value, opts){ + me.setValue(value); + me.inputEl.setStyle({backgroundColor:value}); + me.picker.hide(); + }, + show: function(field,opts){ + field.getEl().monitorMouseLeave(500, field.hide, field); + } + } + }); + me.callParent(); + //picker.alignTo(me.inputEl, 'tl-bl?'); + //picker.show(me.inputEl); + // this dummy is necessary because Ext.Editor will not check whether an inputEl is present or not + this.inputEl = { + dom: document.createElement('div'), + swallowEvent:function(){} + }; + + me.initField(); + }, + + focus:function(){ + this.callParent(arguments); + this.picker.focus(); + } +});*/ diff --git a/app/components/bikes.rb b/app/components/bikes.rb index 9897742..64169fd 100644 --- a/app/components/bikes.rb +++ b/app/components/bikes.rb @@ -16,7 +16,9 @@ class Bikes < Netzke::Basepack::Grid end } }, - :color, + #needs to have type :action or else won't work in grid, because... netzke + { :name => "color", :type => :action, :editor => { :xtype => "xcolorcombo"}}, + #{ :name => :color }, { :name => :bike_style__style, :text => 'Style' }, { :name => :seat_tube_height, :text => 'Seat Tube (in)'}, { :name => :top_tube_length, :text => 'Top Tube (in)'}, @@ -32,6 +34,23 @@ class Bikes < Netzke::Basepack::Grid ] end + def default_fields_for_forms + [ + { :name => :shop_id, :field_label => 'Shop ID'}, + :serial_number, + { :name => :bike_brand__brand, :field_label => 'Brand' }, + { :name => :bike_model__model, :field_label => 'Model'}, + { :name => "color", :xtype => "xcolorcombo"}, + { :name => :bike_style__style, :field_label => 'Style' }, + { :name => :seat_tube_height, :field_label => 'Seat Tube (in)'}, + { :name => :top_tube_length, :field_label => 'Top Tube (in)'}, + { :name => :wheel_size, :field_label => 'Wheel Size (in)'}, + :value, + { :name => :bike_condition__condition, :field_label => 'Condition'}, + { :name => :bike_status__status, :field_label => 'Status'} + ] + end + #override with nil to remove actions def default_bbar [ :apply, :add_in_form, :search ]