Browse Source

Adding color picker for bikes view/forms

eperez-timeinput
Jason Denney 12 years ago
parent
commit
c7974c52e8
  1. 341
      app/assets/javascripts/custom_netzke_helpers.js
  2. 21
      app/components/bikes.rb

341
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();
}
});*/

21
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 ]

Loading…
Cancel
Save