Looking to create a vertical button group that looks very similar to Twitters own button groups (example http://mobile-patterns.com/#/i/10)
I've tried changing Touch's code to layout: 'vbox' but it completely tweaks the roundness of each button and leaves their corner roundness as what they would look like in a horizontal format.
Code below:
var segmentedButton = new Ext.SegmentedButton({
allowMultiple: true,
layout: 'vbox',
items: [
{
text: 'Option 1'
},
{
text : 'Option 2',
pressed: true
},
{
text: 'Option 3'
}
]
});
Ext.Viewport.add({ xtype: 'container', padding: 10, items: [segmentedButton] });
Do I need to add my own CSS styles in order to make it work? Or is there a built-in config?
I'm also wondering if it's best to use a List instead of a SegmentedButton...
Thanks!
Thiem was right, I ended up using container to hold a group of buttons.
I was able to achieve the same effect by doing the following:
Javascript
{
xtype: 'container',
cls: 'btn-grouped ui-shadow ui-rd-soft ui-margin',
items: [
{
xtype: 'button',
docked: 'top',
cls: 'btn btn-seg',
text: 'Active relays'
},
{
xtype: 'button',
docked: 'top',
cls: 'btn btn-seg',
text: 'Relay history'
},
{
xtype: 'button',
docked: 'top',
cls: 'btn btn-seg',
text: 'About'
}
]
}
CSS
/**
* Buttons
*/
.btn-grouped {}
.btn-grouped .btn {background:#FFFFFF;color:#303030; border-color:#DEDEDE; border-bottom-width: 1px;border-top-width: 0px; text-shadow:none;}
.btn-grouped .btn .x-button-label {background:url(../img/btn-arrow-right.png) 97% 15% no-repeat;}
.btn-grouped .btn-seg {-webkit-border-radius:0px;border-radius:0px;}
.btn-grouped .btn-seg:first-child {-webkit-border-radius: 7px 7px 0px 0px;border-radius: 7px 7px 0px 0px;}
.btn-grouped .btn-seg:last-child {-webkit-border-radius: 0px 0px 7px 7px;border-radius: 0px 0px 7px 7px;}
.btn {
padding: .6em 0;
font-size:110%;
display:block;
font-weight:bold;
}
.btn .x-button-label {text-align:left; padding-left:1em;}
/**
* Utilities
*/
.ui-shadow {
-webkit-box-shadow: 0px 0px 3px 1px #858585;
box-shadow: 0px 0px 3px 1px #858585;
}
.ui-rd-soft {
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
.ui-margin {
margin:17px 0;
}
Result
Here is an image of the final result!
To easily create, customize and minimize conflicts with other components, you should define something as your buttons container like:
{
xtype: 'container',
items: [
{xtype: 'button', text: '1', docked: 'top'},
{xtype: 'button', text: '2', docked: 'top'},
{xtype: 'button', text: '3', docked: 'top'},
]
}
The docked configs ensure that your buttons will not overlap the maximum height of your container.
The final thing is to add CSS properties to your container and inner buttons to "fake" it like a list with buttons. The easiest way as far as I know.
Note: You could remove docked: 'top' config and it still works ok. All of them depends on your CSS.
Related
I have the following custom component build
Ext.define('TRA.view.MainMenuItemView', {
xtype: 'mainmenuitem',
extend: 'Ext.Container',
text: 'Menu text',
icon: './resources/icons/Icon.png',
tap: function(){
},
config: {
layout: {
type: 'vbox',
pack: 'center',
align: 'center'
},
items: [
{
width: '115px',
height: '115px',
style: 'border-radius: 50%; background-color: #e4e4e6',
items: [
{
xtype: 'image',
src: '',
width: '65px',
height: '65px',
centered: true
}
]
},
{
xtype: 'label',
html: '',
margin: '5px 0',
style: 'color: #455560; text-align: center; text-transform: uppercase; font-weight: bold;'
}
]
},
initialize: function() {
var me = this;
me.callParent(arguments);
//set icon
me.getAt(0).getAt(0).setSrc(me.icon);
//set text
me.getAt(1).setHtml(me.text);
//setup componet event
me.element.onAfter('tap', me.tap);
}
})
and I'm using it on other containers as this
{
xtype: 'mainmenuitem',
text: 'Signal Coverage',
icon: './resources/images/icon-signal-coverage.png',
tap: function() {
var nav = Ext.ComponentQuery.query('#mainnavigationview')[0];
nav.push({
title: 'Signal Coverage',
html: 'test Signal Coverage'
});
}
}
Quite strangely it all works all well normally except when I build the sencha app for native or for web build using sencha cmd
sencha app build production
the production version does not overwrite icon and text properties of my custom component. while it all works well on normal version. what could be issue?
first of all, some ideas to make your code easier readable for others:
1) the first item does neither have an xtype nor does a defaultType define it
2) width: '115px', height: '115px', just could be width:115,height115
3) instead of me.getAt().getAt() define an itemId for these and use me.down('#theItemId')
3a) or use Ext.Component to extend from and add a template with references. That way it's me.referenceElement
4) me.onAfter('tap',... not sure if this will work on an item that does not support the tap event. you might need to set a tap event to me.element and from there you can use a beforetap
5) instead of add me.getAt().getAt().setText(me.text) use the updateText: function(newValue) {this.getAt().getAt().setText(newValue)}
Same for the icon
then my personal opion
Personally I never expected this code to run anyways. But the fix might be to write me.config.icon and me.config.text
Solution
It's a matter of timing. While the constructor runs there are no icon or text defined inside the config.
This happends only on initialize. there you have them inside the config.
go and add icon: null, text: '' to the config of the component and it will word with getter and setter.
I have a list and I want have two icons per line using onItemDisclosure. How can I do that?
I don't know how to implement onItemDisclousre() on two icons but probably this will help you.
In the following example i have put an image on every itemlist and functionality is provided on itemtap event. This will serve the purpose of doing multiple tasks with single itemlist.
//demo.js
Ext.define("Stackoverflow.view.demo", {
extend: "Ext.Container",
requires:"Ext.dataview.List",
alias: "widget.demo",
config: {
layout: {
type: 'fit'
},
items: [
{
xtype: "list",
store: "store",
itemId:"samplelist",
loadingText: "Loading Notes...",
emptyText: "<div class=\"notes-list-empty-text\">No notes found.</div>",
onItemDisclosure: true,
itemTpl:"<div class='x-button related-btn' btnType='related' style='border: none; background: url(\"a.png\") no-repeat;'></div>"+
"<div class=\"list-item-title\">{title}</div>"
grouped: true
}
],
listeners:
[
{
delegate: "#samplelist",
event: "disclose",
fn: "onDiscloseTap"
}
]
},
onDiscloseTap: function (list, record, target, index, evt, options) {
this.fireEvent('ondisclosuretap', this, record);
}
});
// Democontrol.js
Ext.define("Stackoverflow.controller.Democontrol", {
extend: "Ext.app.Controller",
config: {
refs: {
// We're going to lookup our views by xtype.
Demo: "demo",
Demo1: "demo list",
},
control: {
Demo: {
ondisclosuretap: "Disclosure",
},
Demo1: {
itemtap:"imagetap"
}
}
},
Disclosure: function (list, record,target,index,e,obj) {
Ext.Msg.alert('','Disclosure Tap');
},
imagetap: function (dataview,index,list,record, tar, obj) {
tappedItem = tar.getTarget('div.x-button');
btntype = tappedItem.getAttribute('btnType');
if(btntype == 'related')
{
Ext.Msg.alert('','Image/Icon Tap');
}
},
// Base Class functions.
launch: function () {
this.callParent(arguments);
},
init: function () {
this.callParent(arguments);
}
});
//app.css
.related-btn
{
width: 100px;
height: 100px;
position: absolute;
bottom: 0.85em;
right: 2.50em;
-webkit-box-shadow: none;
}
Hope this will help you.
bye.
You can do this by manually adding a disclosure icon inside of itemTpl on your list items. Add this inside of your view:
{
xtype: 'list',
onItemDisclosure: true,
cls: 'my-list-cls',
itemTpl: [
'<div class="x-list x-list-disclosure check-mark" style="right: 48px"></div>'
]
}
Notice that the div inside of itemTpl has the CSS class "x-list x-list-disclosure check-mark". I set style="right: 48px" because I want this icon to appear on the left side of the regular disclosure icon (the one with the right arrow) and this rule leaves enough room on the right to show the arrow icon.
Then, in your app.scss, add:
.my-list-cls {
.x-list.check-mark.x-list-disclosure:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '3';
font-family: 'Pictos';
color: #fff;
text-align: center;
text-shadow: 0 0 0;
}
}
This controls the styling for your new disclosure icon.
By setting content: '3';, you are changing the icon from the default right arrow to a checkmark. (See all of the available icons here: Pictos fonts).
The result:
It is possible but not easy. In short you have to extend class Ext.dataview.List and/or Ext.dataview.element.List.
How to reduce the height of list item in Sencha touch 2? My list showing large numbers of single word name/value pair. As each item taking extra height, list is becoming too long. So i want to reduce each item height to exact content height. I tried using css like this but no luck. Any help?
var tabPanel=Ext.create('Ext.TabPanel', {
fullscreen: true,
tabBarPosition: 'top',
defaults: {
styleHtmlContent: true
},
items: [
{
title: 'DETAILS',
xtype: 'list',
cls: 'myList',
....
itemTpl: '<table><tr><td>{fieldName}</td><td>{fieldValue}</td></tr></table>',
.............
.myList .x-list-item {
max-height: 30px;
}
Each list item has a min-height of 2.6em. So, you can reduce that and add a overflow property. Use this:
.my-list .x-list-item .x-list-item-label{
min-height: 0.8em !important;
overflow : auto;
}
And it is not a good practice to use Html tables inside itemTpl. Use plain DIV elements with -webkit-box CSS3 property.
You can use itemHeight config of list. http://docs.sencha.com/touch/2-1/#!/api/Ext.dataview.List-cfg-itemHeight
in addition to that you can also use CSS like this to control padding:
.my-list .x-list-item .x-list-item-body{
min-height: 0.5em !important;
padding-top: 0.3em;
padding-bottom: 0.3em;
}
use a property called as
itemHeight: [*Height of the item you need*],
i.e
itemHeight: 40
Read it from the Component's JS file
The titles on the table view have ellipsis although the horizontal space is huge. I see it in the default-style.css under .x-title .x-innerhtml. What is the proper way to adjust when it ellipses? and also if your feeling frisky the method I should use to find the answer in a situation like this would be helpful. For example, I went to the API doc for sencha and found Ext.String.ellipsis, Ext.util.Format.ellipsis, and Global_CSS.ellipsis. I see the documentation but am not sure how to approach actually changing the way ellipsis are handled.
items: [
{
xtype: 'container',
title: 'Bla Mobile',
layout: {
type: 'vbox',
pack: 'start',
align: 'center'
},
EDIT:
I added this to my style.css to fix it:
.x-title { padding:0 .3em; }
.x-title .x-innerhtml { padding: 0; }
This seems to ba a bug in webkit, I came up with this solution:
.x-title .x-innerhtml:after {
content: '';
display: inline-block;
width: .3em; /* equal to the amount of padding on the element */
}
I've spent most of the past few days researching how to convert an application written in Ext JS 3 to Ext JS 4. Unfortunately, I see in the API documentation that the following methods/events do not exist any more in Ext JS 4: cellclick, getColumnModel().
With that said I have a grid panel that is using a checkbox selection model to select the rows in the grid you want to delete. Works as expected but the issue is I have cells in the grid that contain links (a href's) that require me to capture the "cellclick" event which no longer exists. So, I notice that I can use the "itemclick" event for the grid panel but the issue is this events parameters only pertain to the row of the grid.
I need the column index as well, so I can determine if the "itemclick" event occurred in the column containing all of the links (a href's) and if so I want to handle what should happen next.
Here is the code I am trying to convert to Ext JS 4
cellclick: function(grid,rowIndex,colIndex,e) {
if (colIndex == 3) {
var rec = grid.getStore().getAt(rowIndex);
var fieldname = grid.getColumnModel().getDataIndex(colIndex + 1);
var filename = rec.get(fieldname);
if (!filename) return;
var download_iframe = Ext.getCmp("report-download");
if (!download_iframe) {
download_iframe = document.createElement('iframe');
download_iframe.id = 'report-download';
download_iframe.style.display = 'none';
download_iframe.height = '100';
download_iframe.width = '600';
document.body.appendChild(download_iframe);
download_iframe.src = script to download file
} else {
download_iframe.src = script to download file
}
e.stopEvent();
}
}
I've been able to convert this to Ext JS 4 but am missing one MAJOR piece of the code which is the ability to check what cell the "itemclick" event occurred in.
Ext JS 4 version:
this.control({
'casereportGridPanel sgrid': {
itemclick: this.downloadReport,
selectionchange: this.toggleDelReportsBtn
},
.
.
.
.
}
downloadReport: function(view, record, item, rowIndex, e) {
var filename = record.data.file_name;
if (filename) {
if (!filename) return;
var download_iframe = this.getDownloadContainer();
if (!download_iframe) {
download_iframe = document.createElement('iframe');
download_iframe.id = 'downloadReportContainer';
download_iframe.style.display = 'none';
download_iframe.height = '100';
download_iframe.width = '600';
document.body.appendChild(download_iframe);
download_iframe.src = script to download file
} else {
download_iframe.src = script to download file
}
e.stopEvent();
}
},
Grid Configuration:
{
xtype: 'sgrid',
autoScroll: true,
border: true,
columnLines: true,
id: 'myreportsgrid',
loadMask: true,
minHeight: 100,
selModel: Ext.create('Ext.selection.CheckboxModel',{checkOnly: true}),
plugins: [{
ptype: 'rowexpander',
rowBodyTpl: [
'<div style="border: 1px solid #CFCFCF; margin-left: 48px; padding: 0 0 8px 0;">',
'<div style="border: 0px solid #000; font-weight: bold; margin-left: 5px; padding: 5px 0 5px 5px; width: 200px;"><u>' + _t("case.report.grid.rowexpander.title") + '</u></div>',
'<table border="0" style="border-color: #666; margin-left: 5px; width: 575px;">',
'<tbody>',
'<tr>',
'<td style="border-color: #666; font-weight: bold; text-align: right; vertical-align: bottom; width: 75px;">' + _t("case.report.grid.rowexpander.casestatus") + ':</td>',
'<td style="border-color: #666; padding-left: 3px; vertical-align: bottom; width: 60px;">{case_status}</td>',
'<td style="border-color: #666; font-weight: bold; text-align: right; vertical-align: bottom; width: 70px;">' + _t("case.report.grid.rowexpander.startdate") + ':</td>',
'<td style="border-color: #666; padding-left: 3px; vertical-align: bottom;">{start_date}</td>',
'</tr>',
'<tr>',
'<td style="border-color: #666; font-weight: bold; text-align: right; vertical-align: bottom;">' + _t("case.report.grid.rowexpander.systemid") + ':</td>',
'<td style="border-color: #666; padding-left: 3px; vertical-align: bottom;">{system_ids}</td>',
'<td style="border-color: #666; font-weight: bold; text-align: right; vertical-align: bottom;">' + _t("case.report.grid.rowexpander.enddate") + ':</td>',
'<td style="border-color: #666; padding-left: 3px; vertical-align: bottom;">{end_date}</td>',
'</tr>',
'<tr>',
'<td style="border-color: #666; font-weight: bold; text-align: right; vertical-align: bottom;">' + _t("case.report.grid.rowexpander.parties") + ':</td>',
'<td style="border-color: #666; padding-left: 3px; vertical-align: bottom;" colspan="3">{parties}</td>',
'<tr>',
'</tbody>',
'</table>',
'</div>'
]
}],
store: 'CaseReports',
columns: [
{
dataIndex: 'id',
hidden: true,
renderer: this.renderText,
sortable: true,
text: _t('case.report.grid.id'),
width: 30
}, {
dataIndex: 'report_name',
flex: 1,
sortable: true,
text: _t('case.report.grid.reportName')
}, {
dataIndex: 'file_name',
hidden: true,
sortable: true,
text: _t('case.report.grid.filename'),
width: 200
}, {
dataIndex: 'date_requested',
renderer: this.renderDate,
sortable: true,
text: _t('case.report.grid.requested'),
width: 195
}, {
dataIndex: 'report_status',
renderer: this.renderText,
sortable: true,
text: _t('case.report.grid.reportStatus'),
width: 80
}
],
emptyText: '<div style="font-size: 11px; font-weight: bold; padding: 5px 0px; text-align: center;">' + _t('case.report.grid.noreports.available') + '</div>',
dockedItems: [{
xtype: 'toolbar',
items: [{
disabled: true,
action: 'deleteReport',
icon: SC.Url.image('delete.gif'),
text: _t('case.report.grid.deleteReports.btn'),
tooltip: _t('case.report.grid.deleteReports.btn.tooltip')
}, '->', { // begin using the right-justified button container
iconCls: 'x-tbar-loading',
action: 'refresh',
tooltip: _t('case.report.grid.refresh.tooltip')
}]
}]
I would be very thankful if anyone could help shine some light on how to get this work in Ext JS 4.
Thank all of you in advance,
Shawn
I answered a similar question not too long ago: ExtJS 4 - Grid - Disable rowselection for specific column
The grid view has an event called cellmousedown which receives the following parameters:
view: The view of your grid
cell: The cell that was clicked
cellIndex: Index of the cell
record: The store record associated with the cell
row: The row of the cell
rowIndex: Index of the row
eOpts: Standard event option object
It's undocumented, and I only found it by source diving, but it's there. There's also a beforecellmousedown event that works the same way, but fired before events and returning false stops any further events. You can do something like:
viewConfig: {
listeners: {
cellmousedown: function(view, cell, cellIdx, record, row, rowIdx, eOpts){
if(cellIdx === 3){
// Your converted code here
}
}
}
}
I think the problem is that checkboxmodel extends from rowselect which selects the entire row not a single cell.
I was able to pickup the target of the click even by using the event object that is supplied with every selection event regardless whether its cell or row type. kinda like this:
event.getTarget().hash -- here i was after the hash property of a link. Hope this helps.