From c7974c52e83d4c73f82aee046575dd611586e62c Mon Sep 17 00:00:00 2001 From: Jason Denney Date: Sun, 26 May 2013 13:31:52 -0400 Subject: [PATCH 1/3] Adding color picker for bikes view/forms --- .../javascripts/custom_netzke_helpers.js | 341 ++++++++++++++++++ app/components/bikes.rb | 21 +- 2 files changed, 361 insertions(+), 1 deletion(-) 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 ] From 7f029f2a83eb86e23d70a842844fac5e42df4e76 Mon Sep 17 00:00:00 2001 From: Jason Denney Date: Sun, 26 May 2013 13:33:35 -0400 Subject: [PATCH 2/3] Removing commented js --- .../javascripts/custom_netzke_helpers.js | 194 ------------------ 1 file changed, 194 deletions(-) diff --git a/app/assets/javascripts/custom_netzke_helpers.js b/app/assets/javascripts/custom_netzke_helpers.js index 38b5850..443ea9e 100644 --- a/app/assets/javascripts/custom_netzke_helpers.js +++ b/app/assets/javascripts/custom_netzke_helpers.js @@ -150,197 +150,3 @@ Ext.define('Ext.ux.form.field.ColorCombo', { 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(); - } -});*/ From 687cb3397469a15c0066d33cae00d27efcf77ac6 Mon Sep 17 00:00:00 2001 From: Jason Denney Date: Sun, 26 May 2013 19:52:40 -0400 Subject: [PATCH 3/3] Added color blocks to grid view --- app/components/bikes.rb | 3 +-- app/components/bikes/javascripts/init_component.js | 3 +++ 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/app/components/bikes.rb b/app/components/bikes.rb index 64169fd..225c70d 100644 --- a/app/components/bikes.rb +++ b/app/components/bikes.rb @@ -17,8 +17,7 @@ class Bikes < Netzke::Basepack::Grid } }, #needs to have type :action or else won't work in grid, because... netzke - { :name => "color", :type => :action, :editor => { :xtype => "xcolorcombo"}}, - #{ :name => :color }, + { :name => "color", :text => "Frame Color", :type => :action, :editor => { :xtype => "xcolorcombo"}, :renderer => :color_block}, { :name => :bike_style__style, :text => 'Style' }, { :name => :seat_tube_height, :text => 'Seat Tube (in)'}, { :name => :top_tube_length, :text => 'Top Tube (in)'}, diff --git a/app/components/bikes/javascripts/init_component.js b/app/components/bikes/javascripts/init_component.js index 402ef15..e152db1 100644 --- a/app/components/bikes/javascripts/init_component.js +++ b/app/components/bikes/javascripts/init_component.js @@ -9,5 +9,8 @@ // The beauty of using Ext.Direct: calling 3 endpoints in a row, which results in a single call to the server! this.selectBikeBrand({bike_brand_id: record.get('bike_brand__brand')}); }, this); + }, + colorBlock: function(value){ + return Ext.String.format('
{1}
', value, value); } }