Ext.create('Ext.form.field.Picker', {
renderTo: Ext.getBody(),
id: 'colorpicker',
createPicker: function() {
return Ext.create('Ext.picker.Color', {
resizable: true,
floating: true,
select: function(selColor) {
Ext.getCmp('colorpicker').setValue("#" + selColor);
var x = Ext.getCmp('colorpicker').getValue();
alert(x);
Ext.getCmp('colorpicker').setFieldStyle('background-color:x ;background-image: none;');
}
});
}
});
In above sample of code I created a color picker by implementing create picker method of EXt.form.field.Picker as per ExtJS 4.0.7 sencha docs.
First Question
I am able to get the output only when I specify floating config to true (as mentioned in above sample). If I remove the config or made it false I am not able to see the color picker in the output so what is the reason behind that can anyone explain why floating config should be true?
Second Question
By using above sample code, I am getting the output but the color picker rendering has some problem one time it will display correctly while clicking on picker field drop down but sometimes color picker will appear above the field or somewhere on the page when drop down is clicked. So how to avoid this? I want to show it below when picker drop down is clicked.
Third Question
I want to apply background of the picker filed with the selected color value so I added the following line of code:
Ext.getCmp('colorpicker')
.setFieldStyle('background-color:x ;background-image: none;');`
Where x is the selected color value (say #000000 is color value when we select black color from color picker) but it is not applying color to text filed
When I replace x value with #000000 in that line of code say:
Ext.getCmp('colorpicker')
.setFieldStyle('background-color:#000000 ;background-image: none;');
Then it is showing black color for filed background but i want the color to be changed to selected color so I can't give the static color value.
Regarding the second question:
Instead of passing the string 'x' to the function ...
Ext.getCmp('colorpicker').setFieldStyle('background-color:x ;background-image: none;');
you should try something like:
Ext.getCmp('colorpicker').setFieldStyle('background-color:' + x + ' ;background-image: none;');
Related
The essence of the problem is that I want to write my own version of the AppBar that would include content as another Compose function. After looking at the source code of the current CollapsingTopAppBar implementation, I saw the following lines:
#Composable
private fun TwoRowsTopAppBar(
...
scrollBehavior: TopAppBarScrollBehavior?
) {
...
val pinnedHeightPx: Float = 64.dp
val maxHeightPx: Float = 152.dp
LocalDensity.current.run {
pinnedHeightPx = pinnedHeight.toPx()
maxHeightPx = maxHeight.toPx()
}
// Sets the app bar's height offset limit to hide just the bottom title area and keep top title
// visible when collapsed.
SideEffect {
if (scrollBehavior?.state?.heightOffsetLimit != pinnedHeightPx - maxHeightPx) {
scrollBehavior?.state?.heightOffsetLimit = pinnedHeightPx - maxHeightPx
}
}
...
Surface(...) {
Column {
TopAppBarLayout(
...
heightPx = pinnedHeightPx
...
)
TopAppBarLayout(
...
heightPx = maxHeightPx - pinnedHeightPx + (scrollBehavior?.state?.heightOffset
?: 0f),
...
)
}
}
}
As I understand it, scrollBehavior is used to handle the collapse and expansion behavior. In the current implementation, just constant values are put in heightOffsetLimit. And since I need my appbar implementation to be able to contain content of any size, I need to somehow know the size of this content in advance and put this value in heightOffsetLimit.
I have already written the code for my AppBar, so that it also contains content. But since I can't pass the height value of the content to scrollBehavior, the AppBar doesn't collapse to the end.
you need to calculate the height that the appbar will have before drawing it into the screen. I have followed this issue and solved my problem with the last solution. hope it helps:
Get height of element Jetpack Compose
use the content you can put (ex. an image or a huge text) as the MainContent
use your appbar as the DependentContent and use the size given in lambda to give the height to your appbar
finally set placeMainContent false as I believe you don't need to draw the image (or any other composable) directly in a box
and you will good to go
There is a good tutorial on how to achieve this in Odoo-8 here:
Tutorial , but it doesn't work on Odoo-12.
Odoo natively allows you to set a field of your model as a basis for color differentiation in calendar view.
<calendar ... color="your_model_field">
The problem is that he will decide automagically what color to assign to every value.
I need to be able to decide what color mapping to use.
Doing some diving in the web module js files, more specifically on
web/static/src/js/views/calendar/calendar_renderer.js on line 266
I found a promising function which appears to be the one responsible for deciding which color to set.
getColor: function (key) {
if (!key) {
return;
}
if (this.color_map[key]) {
return this.color_map[key];
}
// check if the key is a css color
if (typeof key === 'string' && key.match(/^((#[A-F0-9]{3})|(#[A-F0-9]{6})|((hsl|rgb)a?\(\s*(?:(\s*\d{1,3}%?\s*),?){3}(\s*,[0-9.]{1,4})?\))|)$/i)) {
return this.color_map[key] = key;
}
var index = (((_.keys(this.color_map).length + 1) * 5) % 24) + 1;
this.color_map[key] = index;
return index;
},
This function is fed the value of your field (for every calendar event) and returns the color to be used "supposedly" as background for the calendar event square.
According to the second if statement, if you manage to instantiate the CalendarRenderer class with a color_map object which has the possible values of your field as keys and color codes as values you should be ok.
According the the third if statement, if the values of your field are strings with color codes (#FFF, rgb(x, y, z) , etc) they will be set in the color_map object and returned to be used as background colors.
The last part I guess is how odoo decides on a color when no mapping is provided.
I tried both approaches with the same efect:
Image displaying the calendar view
Namely, all the calendar events are rendered with the default color taken from the fullcalendar.css stylesheet (line 529), but the color reference displays correctly on the sidebar to the right.
I would appreciate any light shed on this matter, It has to be possible to make this work!.
Thanks.
I want to create a Ti.UI.TextArea object which would dynamically adjust its height to content but would have default height set (if no content). In Appcelerator if you don't specify height then it will automatically adjust its size to content but if there is no text then its size will be similar to textField. This is to small for me.
If you specify height property, then TextArea height won't change even if text will be longer than editable region.
I would like to have something like this:
var textArea = Ti.UI.createTextArea({
minHeight: 30,
});
or like this:
var textArea = Ti.UI.createTextArea({
minLines: 3,
});
I am looking for solution both for Android and iOS.
Is there any workaround for that?
You can change the height of the textField dynamically.
Add onChange event handler and change the height of the textField dynamically according to the number of lines in the text field.
Starting with 7.5.0.GA you can use maxLines on Android to be able to extend the TextArea to when pressing return. For iOS you have to create a work-around since there is no parity at the moment.
I am using Sketch option of vue-color for color picking. It uses v-model to communicate color change as follows:
<sketch-picker v-model="colors" />
where colors is a data initialised as below:
colors: {hex: "#c0392b", a: 1}
When page is loaded color-picker is at expected position i.e. (hex: #c0392b). On changing picker position, colors value changed as expected.
Issue comes when I change colors value in a method like below:
this.colors.hex = "#ff00ff";
this.colors.a = 0.5;
In this case even though data colors value is changed(this is confirmed), color-picker is still pointing at old location i.e. #c0392b.
I don't think this is an expected behavior and possibly a bug. What should be way-around this issue?
Detecting changes in objects is a bit nuanced in Vue/JavaScript. See https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats and the deep option of watch https://v2.vuejs.org/v2/api/#vm-watch
You may simply need to use
this.colors = Object.assign({}, this.colors, { a: 0.5, hex: "#ff00ff" })
I want to change the font color of a row after a cell in that row has been edited and set to a certain value.
myStore is the dojo.data.ItemFileWriteStore associated to the dojox.grid.DataGrid dataGrid.
I have written this:
myStore.onSet = function(item, attribute, oldValue, newValue) {
if (item.myField == myValue) {
var index = dataGrid.selection.selectedIndex;
dojo.style(dataGrid.getRowNode(index), "color" , "red");
}
}
but unfortunately this doesn't make any effect...
UPDATE: I added the following style property: "backgroundColor" : "red". Well, the background color of the row changes to red, but when the mouse moves away from the row, the color changes back to the default! It might be that some default event handlers restore the default styles...
The dojo.style line works if you call it by itself. Either your function isn't being called at all, the if's condition false or there is no row selected and you are getting an invalid number for the index. (You can put some console.logs there to check)