jQueryUI has a pretty nice display for radio buttons:
Does Sencha have anything similar?
Follow up question, if not:
what do you find to be nice UX for a three-item (or even four-item) component which requires only one touch? (e.g., a select box is two touches, one to open the select list and one to choose your option)
You are looking for Ext.SegmentedButton in Sencha Touch.
Sample code snippet:-
var segmentedButton = new Ext.SegmentedButton({
allowMultiple: false, // ensures only 1 button gets pressed at a time.
items: [
{
text: 'Choice 1'
},
{
text : 'Choice 2',
pressed: true
},
{
text: 'Choice 3'
}
],
listeners: {
toggle: function(container, button, pressed){
console.log("User toggled the '" + button.text + "' button: " + (pressed ? 'on' : 'off'));
}
}
});
Ext.Viewport.add({ xtype: 'container', padding: 10, items: [segmentedButton] });
Output :-
Related
I've figured out how to change the formatting on my results:
https://github.com/salmanarshad2000/demos/blob/v1.0.4/jquery-ui-autocomplete/custom-html-in-dropdown.html
And I've figured out how I can add a link to the bottom of the results:
Jquery Auto complete append link at the bottom
What I can't figure out is how to do both at the same time.
The closest that I've come is the following:
$( "#search1" ).autocomplete({
source: products,
minLength: 3,
select: function( event, ui ) {
event.preventDefault();
},
focus: function(event, ui) {
event.preventDefault();
}
}).data("ui-autocomplete")._renderItem = function(ul, item) {
console.log(ul.content)
var $div = $("<div></div>");
$("<img style='height:76px;'>").attr("src", item.image).appendTo($div);
$("<span></span>").text(item.label).appendTo($div);
($div).append( "<a href='https://google.com'>Click Me</a>" )
return $("<li></li>").append($div).appendTo(ul);
};
The problem is that adds the link to each individual returned result, rather than slamming it onto the end of the list.
I've tried various incarnations of wrapping the link (li, div, etc) but nothing's working.
What do I need to do to get a link as the last thing on the list?
JS Fiddle: http://jsfiddle.net/spgbq6w7/13/
Consider the following code.
Working Example: http://jsfiddle.net/Twisty/wur8vok9/23/
HTML
Search: <input id="search1">
JavaScript
var products = [{
value: "MS-Word",
label: "Microsoft Word 2013",
image: "https://upload.wikimedia.org/wikipedia/commons/4/4f/Microsoft_Word_2013_logo.svg"
},
{
value: "MS-Excel",
label: "Microsoft Excel 2013",
image: "https://upload.wikimedia.org/wikipedia/commons/8/86/Microsoft_Excel_2013_logo.svg"
},
{
value: "MS-Outlook",
label: "Microsoft Outlook 2013",
image: "https://upload.wikimedia.org/wikipedia/commons/0/0b/Microsoft_Outlook_2013_logo.svg"
},
{
value: "MS-PowerPoint",
label: "Microsoft Word 2013",
image: "https://upload.wikimedia.org/wikipedia/commons/b/b0/Microsoft_PowerPoint_2013_logo.svg"
},
{
value: "MS-Access",
label: "Microsoft Access2013",
image: "https://upload.wikimedia.org/wikipedia/commons/3/37/Microsoft_Access_2013_logo.svg"
},
{
value: "Adobe-PSP",
label: "Adobe Photoshop CC",
image: "https://upload.wikimedia.org/wikipedia/commons/a/af/Adobe_Photoshop_CC_icon.svg"
},
{
value: "Adobe-LR",
label: "Adobe Lightroom CC",
image: "https://upload.wikimedia.org/wikipedia/commons/5/56/Adobe_Photoshop_Lightroom_Classic_CC_icon.svg"
},
{
value: "Adobe-PRM",
label: "Adobe Premiere Pro CC",
image: "https://upload.wikimedia.org/wikipedia/commons/5/58/Adobe_Premiere_Pro_CS6_Icon.png"
},
{
value: "Adobe-ACR",
label: "Adobe Acrobat",
image: "https://upload.wikimedia.org/wikipedia/commons/0/0b/Adobe_Acrobat_v8.0_icon.svg"
},
{
value: "Adobe-ILS",
label: "Adobe Illustrator CS6",
image: "https://upload.wikimedia.org/wikipedia/commons/d/d8/Adobe_Illustrator_Icon_CS6.png"
}
];
$(function() {
$("#search1").autocomplete({
source: products,
minLength: 3,
open: function() {
var $li = $("<li>");
var $link = $("<a>", {
href: "#",
class: "see-all"
}).html("See All Results").click(function(e) {
e.preventDefault();
$("#search1").autocomplete("option", "minLength", 0);
$("#search1").autocomplete("search", "");
}).appendTo($li);
$li.appendTo($('.ui-autocomplete'));
},
select: function(event, ui) {
event.preventDefault();
$("#search1").autocomplete("option", "minLength", 3);
},
focus: function(event, ui) {
event.preventDefault();
}
}).data("ui-autocomplete")._renderItem = function(ul, item) {
console.log(ul.content)
var $div = $("<div>").css("position", " relative");
$("<img>", {
src: item.image
}).css("height", "38px").appendTo($div);
$("<span>").css({
position: "absolute",
top: 0,
display: "inline-block",
"margin-left": "3px"
}).text(item.label).appendTo($div);
return $("<li>").append($div).appendTo(ul);
};
});
So you're using _renderItem() properly. I removed the Link from here based on the example you linked to. I moved this to the open callback as is shown in the example. I also switched some of your code. It wasn't wrong, I just prefer this method.
So the items get rendered so that the image and label show as desired. The the open call back adds a final link item that causes the a search for all items. See more: http://api.jqueryui.com/autocomplete/#method-search
Can be called with an empty string and minLength: 0 to display all items.
When an item is selected, the preferred minLength is returned to ensure that if the user starts a new search, it operates the same way it did the first time.
Update
http://jsfiddle.net/Twisty/wur8vok9/40/
Minor cleanup and better separation of code and style.
Hope this helps.
I have built component like below. Where i want to just display check box to user and when user double clicks the row, checkbox become editable. clicking the checkbox works fine, but when user unticks the checkbox render function check box does not get updates, it remains checked. How do i solve this issue? Any other way to simplify this requirement.
Ext.define('Abc.view.component.grid.RfColumn', {
extend: "Ext.grid.column.Column",
text: 'Rv.',
width: 40,
dataIndex: 'RF',
xtype: 'rFColumnGrid',
renderer: function(value) {
return "<input class='gridCheckbox' type='checkbox'" + ((value == 'Y') ? "checked='checked'" : "") + " disabled='disabled'>";
},
editor: {
xtype: 'checkboxEditor'
}
});
Ext.define('Abc.view.component.editor.CheckboxEditor', {
extend: 'Ext.form.field.Checkbox',
xtype: 'checkboxEditor',
inputValue : 'Y',
uncheckedValue: 'N'
});
inputValue and uncheckedValue don't change what is returned by getValue(). Those are for form submissions. You can remove them and change your renderer to look for true/false.
renderer: function(value) {
return "<input class='gridCheckbox' type='checkbox'" + ((value == true) ? "checked='checked'" : "") + " disabled='disabled'>";
},
I'm trying to dynamically add a menu item to my HighChart to support dynamic drilldowns with a function name that is dynamically generated. I'm able to successfully add new menuItems to the existing contextButton when using statically defined functions like alerts, however, when I have a function defined using a var it won't invoke the proper function.
the following is working:
var chartOptions = {
chart: {
renderTo: myChartDiv,
zoomType: 'x',
type: 'area'
},
exporting: {
enabled: true,
buttons: {
contextButton: {
menuItems: [{
text: 'My Test',
onclick: function() {
alert('success!');
}
}]
}}
}};
However, as soon as I want to add a new menu item with a function defined in a variable, the call defined by the variable is skipped. ie:
var c1 = "chart1";
var c2 = "chart2";
var drilldownMethod = "toggleCharts('" + c1 + "','" + c2 + "')";
var newDrilldown = {
text: Show Chart 2,
onclick: function () {alert('test1'); drilldownMethod; alert('test2') }
};
chartOptions.exporting.buttons.contextButton.menuItems.push(newDrilldown);
I do see the new menu item "Show Chart 2", and when I click it, I do get the alerts 'test1' and 'test2' appear; however, the function in the string variable "drilldownMethod" is never invoked (there's an alert in that method as well to prove the point).
Any thoughts on how to accomplish this?
drilldownMethod is a string, not a function call, that's why you don't see it executing. This should work:
chartOptions.exporting.buttons.contextButton.menuItems.push({
text: 'Show Chart 2',
onclick: function () {
toggleCharts("chart1", "chart2");
}
});
i'm trying to port some highchart charts from a php web appplication to a Sencha Touche mobile app.
I want to put an empty chart in my View page and populate it dinamycally with some jsonp calls.
Here's my view code (not all the 130 lines...):
{
xtype : 'panel',
scrollable: true,
html : 'INSERIRE QUI I GRAFICI E LE TABELLE',
items : [
{
xtype : 'panel',
layout : 'fit',
html : 'AREA PER GRAFICO',
itemId : 'chartRenderPanel',
margin: '180px'
},
{ //sample code, to be replaced with a consinstent config...
xtype: 'highchart',
chartConfig: {
chart: {
type: 'spline'
},
title: {
text: 'A simple graph'
},
xAxis: {
plotLines: [{
color: '#FF0000',
width: 5,
value: 'mar'
}]
}
}
},
{
xtype : 'panel',
layout : 'fit',
html : 'AREA PER TABELLE',
itemId : 'tableRenderPanel',
margin: '180px'
}
]
}
The Highchart part is taken from this fiddle http://jsfiddle.net/marcme/DmsGx/
it works on the fiddle but not in my mobile app: debugging with chrome, i get stuck here in the Highcharts.js:
update : function(delay) {
var cdelay = delay || this.updateDelay;
if(!this.updateTask) {
this.updateTask = new Ext.util.DelayedTask(this.draw, this);
}
this.updateTask.delay(cdelay);
},
With "Uncaught TypeError: undefined is not a function " message in the console.
Please, help! : )
Lorenzo
You have to call DelayedTask differently in sencha touch than you do in Extjs. Change this
this.updateTask = new Ext.util.DelayedTask(this.draw, this);
to this
if (Ext.util.DelayedTask)
this.updateTask = new Ext.util.DelayedTask(this.draw, this);
else
this.updateTask = Ext.create('Ext.util.DelayedTask', this.draw, this);
I have an ExtJS Panel which contains a label in the first row and second row. Later i have added 4 sub panels each contains a checkbox, and 2 textfields( each sub panel in a row in the main panel). Then i have 2 Move up/Move down buttons which reorder these sub panels up/down by 1 row for each click of the up/down buttons. I am able to layout the main panel with all the subpanels but stuck at reordering the subpanels. How to handle this(reordering the subpanels) functionality in ExtJS?
The trick to change panel elements dynamically is to call doLayout function after change.
Not prettiest but working example of your problem:
var Panel1 = Ext.create('Ext.form.Panel', {
title: 'first',
items: [{
fieldLabel: 'text1',
xtype: 'textfield'
}, {
fieldLabel: 'text2',
xtype: 'textfield'
}, {
xtype: 'checkbox'
}]
})
var Panel2 = Ext.create('Ext.form.Panel', {
title: 'second',
items: [{
fieldLabel: 'text1',
xtype: 'textfield'},
{
fieldLabel: 'text2',
xtype: 'textfield'}]
})
var mainPanel = Ext.create('Ext.panel.Panel', {
title: 'main',
items: [Panel1, Panel2]
})
new Ext.Window({
width: 300,
height: 400,
layout: 'fit',
items: [mainPanel],
bbar: [{
text: 'reorder',
handler: function() {
var swap = mainPanel.items.items[0];
mainPanel.items.items[0] = mainPanel.items.items[1];
mainPanel.items.items[1] = swap;
mainPanel.doLayout();
}
}]
}).show();
This is for ExtJs 4.0.7, but trick works for earlier versions, just adjust panel creation syntax.