Are there any color picker for extjs (such as photo shop color picker) that developed only on extjs (not in jQuery).
I’m using (Ext.ux.ColorPicker) ux.colorpicker but, it can’t fill my requirement.
Thanks,
Thanuja.
ExtJS has a simple colorpicker.
xtype: 'colorpicker'
From the help:
Ext.create('Ext.picker.Color', {
value: '993300', // initial selected color
renderTo: Ext.getBody(),
listeners: {
select: function(picker, selColor) {
alert(selColor);
}
}
});
You can also look at this one which is more Photoshop-esque and works with Ext JS 4x+, but does require canvas support.
I realize this is an old question. but nevertheless for people looking to have these two libraries play nice... here is what I did. The problem lay in that jscolor expects all the inputs with class "color" to be available on window.load, which is called via jscolor.install(). Of course, ExtJs elements are not available at that time. Try this:
Ext.create("Ext.form.field.Text",{
renderTo: Ext.getBody(),
fieldCls:"color",
name:"TestPost",
listeners: {
afterrender: {
delay:200,
fn:function(item){
jscolor.init();
}
}
}
});
Running jscolor.init() will start it all up. If you like, you can comment out the jscolor.install() call at the bottom of the jscolor.js file, so long as you call jscolor.init() as a listener that runs after the rendering of the textfield you want to be your color picker.
Related
I'm ExtJs 6.0 framework developer.
I want to develop a component like date that when user click it, It open a window and this window have some textfields and other Extjs components. My problem is when I want to use this component as a grid cell editor. it does not show the component. In other words, I want to develop a custom picker.
How do I do?
You can extend Ext.form.field.Picker and implement createPicker:
An abstract class for fields that have a single trigger which opens a
"picker" popup below the field, e.g. a combobox menu list or a date
picker. It provides a base implementation for toggling the picker's
visibility when the trigger is clicked, as well as keyboard navigation
and some basic events. Sizing and alignment of the picker can be
controlled via the matchFieldWidth and pickerAlign/pickerOffset config
properties respectively.
You would not normally use this class directly, but instead use it as
the parent class for a specific picker field implementation.
Subclasses must implement the createPicker method to create a picker
component appropriate for the field.
It can look like:
Ext.define('Fiddle.view.FooPicker', {
extend: 'Ext.form.field.Picker',
xtype: 'foo-picker',
createPicker: function(){
return Ext.widget('container',{
padding: 20,
floating: true,
items: [
{
xtype: 'textfield'
},
{
xtype: 'box',
html: 'Foo'
}
]
})
}
});
https://fiddle.sencha.com/#fiddle/1139
I'm using Extjs 4.2.1, and i just want to change all LOADING message from my grids.
What should i do? I had read something about mask, but in other version(Extjs 3.0).
Thank you so much
If you really want all grids to display this new loading message (ones that are already created and all ones you will create in the future), you should override the main gridview class like this using the loadingText property:
Ext.define("NameDoesntMatterView", {
override: "Ext.grid.View",
loadingText: "I'm loading or something..."
});
If you only want it on a single grid, use the viewConfig:
var myGrid = Ext.create("Ext.grid.Panel", {
viewConfig: {
loadingText: "I'm loading or something..."
}
});
I'am trying to display Sencha Touch 2 selectfield with very long option text but text gets truncated with Ellipsis, like Very long option t....
How to display couple lines in one option?
Code:
{
xtype: 'selectfield',
options:[
{
text: 'Very long option I wish to splint into two separate lines',
value: 0
},
{
text: 'Another very long option I wish to splint into two separate lines',
value: 1
}
]
}
I've tried using \n and <br/> but is not working.
There are 3 two ways to do this.
use labelWrap config option set to true.
This will avoid truncating text that appears on selectfield initially. Later when you tap on selectfield; you've two choices. Using picker or list. picker will be used only if you set it to true in usePicker config. If you are on tablet, desktop or mobile default list will be shown containing options. Using labelWrap config will not be usefull if options are displayed in list after tap on selectfield.
Use following CSS override to avoid truncating.
.x-list-item-label{
height: 100% !important;
}
.x-list-label{
white-space: pre-wrap !important;
}
This override along with above mentioned labelWrap config set to true will make both list and selectfield display whole text neatly. But this will override styles that may affect appearance of other lists in your app.
Third approach that can be is to override Ext.field.Select and create custom select field. In this style, you need to just override following method - getTabletPicker that generated the list displayed on tap of selectfield. Code from ST source is as fallows -
getTabletPicker: function() {
var config = this.getDefaultTabletPickerConfig();
if (!this.listPanel) {
this.listPanel = Ext.create('Ext.Panel', Ext.apply({
centered: true,
modal: true,
cls: Ext.baseCSSPrefix + 'select-overlay',
layout: 'fit',
hideOnMaskTap: true,
items: {
xtype: 'list',
store: this.getStore(),
itemTpl: '<span class="x-list-label">{' + this.getDisplayField() + ':htmlEncode}</span>',
listeners: {
select : this.onListSelect,
itemtap: this.onListTap,
scope : this
}
}
}, config));
}
return this.listPanel;
}
Check out the line itemTpl and cls config. Here both options set styles that are defined for list. These will decide the appearance of list displayed on tap of selectfield. This approach might sound dirty. But it's useful, if you want to make some drastic changes in appearance and behaviour.
In extjs, is there any way to change a property for a specific type of control across the entire project from one place, essentially making it the default value for this property on all new instances of that class?
In particular, I want to change all the msgTarget's on all field controls from 'qtip' to 'side'.
This should work:
Ext.onReady( function() {
Ext.override( Ext.form.Labelable, {
msgTarget: 'side'
});
});
See this answer for more info.
The only thing that is working for me is something like this:
Ext.define('FooMsgTargetOverride', {
override: 'Ext.form.field.Base',
msgTarget: 'under'
});
I'm trying my hands on extjs 4 by trying to recreate some component I have in an old extjs 2 project.
One of the component was creating a floating toolbox (like you get with photoshop) with a thin border and no title or min/max/close buttons. Like so..
In ext4 , I can't seem to be able to reproduce that same result. Here's what the same code looks like in ext 4:
This is the code I had:
app.Toolbox = Ext.extend(Ext.Window, {
,initComponent : function()
{
Ext.apply(this,{
closable:false,
border:false,
width:345,
height:60,
onEsc:Ext.emptyFn,
resizable:false,
x:20,
y:20,
items:[
/* icons (a html items) */
]
});
app.Toolbox.superclass.initComponent.call(this, arguments);
}
/* handlers, methods, etc */
});
Is there any way to get a similar result in ext 4?
I tried using some css to hide some elements like the title bar, but ext 4 always calculates the height of the window as if the element was visible, which looks even weirder.
Any idea?
Ext.panel.Header is just an extended Ext.container.Container so you can do as you wish to it.
I think the closest you're going to get is by applying frame: true which kind of forces the content to fill the window frame.
However, it doesn't seem to work if you have a Close button in the top right.
Ext.create('Ext.window.Window', {
height: 60,
width: 345,
closable: false,
layout: 'fit',
frame: true,
items: {
html: '<p>hello</p>'
}
}).show();
You're still going to have to style it a little, but its far closer to what you need.