I am trying to remove the toolbar from Sencha Picker (I only need the scrolling area with the event 'pick') - but nothing seems to work. The problem is that we must copy the sencha docs code of Picker (WITH slotpicker code) and try to remove it from there. However - this doesn't work and removed the whole slot area.
Can anyone help?
Just set the toolbar invisible
toolbar: {
hidden: true
}
BTW why not just to do
doneButton: false,
cancelButton: false,
toolbar: {
ui: 'light',
title: 'My Picker!'
}
?
Related
I have a grid with two checkcolumns (apart from the rest columns) and I want to make conditional change of cell (adding specific CSS: making thicker borders of this cell if checkcolumn is enabled and default look if it is disabled) in accordance to disable / enable state.
Unfortunately with using Renderer function I end up with strange outcome (displayed object text or true/false values) because of override native Renderer of checkcolumn I presume. Overwriting checkcolumn renderer is also bad practice which I'm not allowed to do.
I've also tried to use listeners like beforeactivate, beforeDisable etc but they seems not being called whenever state of cell change (disabled <> enabled). I thing that it is possible that its because of using specific bind property as seen bellow.
Is there any method to do it clear (without to much of code repetition and without overriding and adding new method to checkcolumn renderer)??
here is code for one of two checkcolumns in my grid:
{
localized: {
text:
'details.tabview.coordination.icccoordination.changepositions.main.view.ebv'
},
dataIndex: 'ebv',
width: 50,
bind: {
disabled: '{!changeContextEditMode.active}'
},
sortable: true,
filter: true,
xtype: 'checkcolumn',
listeners: {
beforecheckchange: 'checkIfCheckChangePossible'
}
}
I will appreciate any help
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.
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.
I have an Ext TabPanel, and I am trying to set the hidden property for one of the Tabs, programmatically. I am able to select the object and call methods such as disable() and enable() but so far have been unable to find a means by which I can manipulate the Tab's 'hidden' property.
The Tab is defined as
{
id: "view-task",
hidden: false,
title: "View"
}
and the code attempting to manipulate it
twin = ( Ext.getCmp('view-task'));
twin.disable();
The above call to disable works, so the component is being correctly selected but I do not know how to manipulate the hidden property.
Any assistance will be much appreciated.
N. Euzebe
Try this:
var tabs = Ext.createWidget('tabpanel', {
items: [{
itemId: 'home',
contentEl:'script',
title: 'Short Text',
closable: true
}]
});
tabs.child('#home').tab.hide();
You can find this code in examples on the API page
You haven't explained which version of ExtJS you're using. But in version 3.x you can do the following (I don't know, but it might also work in ExtJS 4.x):
var tabPanel = Ext.getCmp('myTabPanel');
var tabToHide = Ext.getCmp('myTab');
tabPanel.hideTabStripItem(tabToHide);
To show the tab again:
tabPanel.unhideTabStripItem(tabToHide);
Hope this helps you :)
I want to collapse all the panels in the accordion by default. For me first panel always active.
Guys please suggest how to fix the problem?
In ExtJS 4.2.1 you can add an extra panel, set it as hidden but expanded. You'll now be able to close all the visible panels. NOTE: This doesn't work in ExtJS 4.2.2
Using ExtJs 4.2.2,
collapsed: true
in all panels, except the one you want expanded (so collapsed: false)
It's working for sure, code tested.
I believe this is not possible, but if you need this config for visual purpose, you can create a aditional, content empty panel, and put it as a last item in accordian, and make it first to expand by default, this way you can imitate all collapsed state! Cheers!
In Accordian layout create one dummy collpased panel like
{
xtype: 'panel', // << fake hidden panel
hidden: true,
collapsed: false
}
For Example
In accordian layout items
{
xtype: 'panel', // << fake hidden panel
hidden: true,
collapsed: false
},{
xtype:'panel',
title:''Panle1'
},{
xtype:'panel',
title:''Panle2'
}
This should work.
In extjs 3.2.1 at least, simply set the property
collapsed : true
on each of the panels in your accordion layout.