Sencha Touch Horizontally Center Search Field in Navigation Bar - html

This question is pretty downright dumb and I might have stumbled upon a bug but I need to center my searchfield in my navigation bar in Sencha Touch and I just can't make it work. This is my code:
Ext.define('Myapp.view.MyNav', {
extend: 'Ext.navigation.View',
xtype: 'mynav',
requires: [
'Ext.field.Search', 'Ext.Button'
],
config: {
fullscreen: true,
navigationBar: {
items: [
{
xtype: 'searchfield',
placeHolder: 'Search...',
listeners: {
keyup: function(field) {
}
},
align: 'right'
}
]
},
items: [
{
title: 'MyNav',
xtype: 'list',
fullscreen: true,
grouped: true,
store: {
fields: ['name', 'html'],
sorters: 'name',
data: [
{name: 'Alfa', html: '<p>alfa</p>'},
{name: 'Beta', html: '<p>beta</p>'},
{name: 'Gamma', html: '<p>gamma</p>'},
{name: 'Mupp', html: '<p>mupp</p>'},
{name: 'Tupp', html: '<p>tupp</p>'}
],
grouper: {
groupFn: function(record) {
return record.get('name')[0];
},
indexBar: true
},
},
listeners: {
select: function(view, record) {
var test = Ext.create('Ext.Panel', { fullscreen: true,
title: record.get('name'),
layout: {
type:'vbox'
},
items: [
{
xtype: 'panel',
html: record.get('html')
}
]
});
var mainnav = Ext.ComponentQuery.query('bookmarksmainnav')[0];
mainnav.setActiveItem(test);
}
},
itemTpl: '{name}'
}
]
}
});
Focus on the actual navigation bar thing, the other stuff is just code pasted (and I modified it somewhat), I'm pretty sure this is a bug though.
Thanks in advance!

you can try using a toolbar docked in the bottom of the page with the search field centered, I don't know why but the navigation bar ignores the centered property.
Something like this:
config: {
fullscreen: true,
navigationBar: {
},
items: [
{
xtype: 'toolbar',
docked: 'bottom',
items: [
{
xtype: 'searchfield',
placeHolder: 'Search...',
listeners: {
keyup: function(field) {
}
},
centered: true
}
],
},
{
title: 'MyNav',
xtype: 'list',
If you need the search field on the top of the screen you could try hiding the navigation bar with hidden: true and changing the docked property in the toolbar.
Hope it helps!

A better answer (for me) that just centres whatever you have added to the navigation bar, is:
this.getNavigationBar().leftBox.setCentered(true);
You will probably want to manage the centred-ness of the navigation bar for each page, though.

I used
layout: {
align: 'center',
pack: 'center',
type: 'hbox'
}
This would be just under the docked: 'bottom', line is the example above.
Regards
Jacko

Whenever I find it difficult to center a desired field, I just add a spacer before and after, combined with a flex for the item I want to center, it never fails. In this case:
items: [
{
xtype: 'spacer',
},
{
xtype: 'searchfield',
placeHolder: 'Search...',
listeners: {
keyup: function(field) {
}
flex: 0.7
},
{
xtype: 'spacer',
},

Related

How to create ExtJS editable grid column indication using fontawesome 'fa fa-edit'

I started learning ExtJS recently.I created a grid with columns(names,email , phone) and added some dummy data using store. Here column -("names") is editable column. when user sees that grid , he should come to know that (names) column is editable. For this I needed to add edit symbol( iconCls: 'fa fa-edit' fontawesome) to the right side of data in each column under "names" header,so that user can come to know that that column is editable.How can I achieve this.Please help me with this,I tried a lot but did not found a solution.Thanks in advance.
ExtJS grid code:
Ext.define('FirstApp.view.main.List', {
extend: 'Ext.grid.Panel',
xtype: 'mainlist',
columnLines: true,
requires: [
'FirstApp.store.Personnel',
'Ext.grid.filters.Filters'
],
title: 'Personnel',
collapsible: true,
iconCls: 'icon-grid',
frame: true,
width: 700,
height: 500,
resizable: true,
plugins: 'gridfilters',
emptyText: 'No Matching Records',
loadMask: true,
stateful: true,
stateId: 'stateful-filter-grid',
store: {
type: 'personnel',
autoLoad: true,
autoDestroy: true
},
tbar: [{
text: 'Show Filters...',
tooltip: 'Show filter data for the store',
handler: 'onShowFilters'
}, {
text: 'Clear Filters',
tooltip: 'Clear all filters',
handler: 'onClearFilters'
}],
columns: [
{ text: 'Name', dataIndex: 'name',flex:1,
align: 'center',
editor: {
xtype: 'textfield',
allowBlank: false
},
filter: {
type: 'string',
itemDefaults: {
emptyText: 'Search for...'
} }},
{ text: 'Email', dataIndex: 'email', flex: 1,filter: {
type: 'string',
itemDefaults: {
emptyText: 'Search for...'
} }},
{ text: 'Phone', dataIndex: 'phone', flex: 1 }
],
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
]
});
refer Grid image with arrowd indication where that editable fontawesome should appear
I found solution for this problem.
To which column we want to add edit image on the rightside of data it gets from store,so as to indicate that it is a editable column.
1). make the column firstly as "widgetcolumn" and make the changes in grid as follows:
//grid column code example:
columns: [
{ text: 'Name',
dataIndex: 'name',
width: 200,
xtype: 'widgetcolumn',
cls:'x-button-default-small-cell > .x-grid-cell-inner >.x-btn-default-small',
sortable: true,
widget:{
textAlign:'left',
iconCls:'x-fa fa-edit',
iconAlign: 'right',
xtype:'button',
handler: function(btn) {
var rec = btn.getWidgetRecord();
}
},
align: 'center',
editable:true,
editor: {
xtype: 'textfield',
allowBlank: false
},
filter: {
type: 'string',
itemDefaults: {
emptyText: 'Search for...'
} }}]
2). changes in css file to change color of button
.x-button-default-small-cell > .x-grid-cell-inner >.x-btn-default-small {
vertical-align: top;
border-color: transparent;
background-color: transparent;
}
3). refer image of grid after changes

How to get the image of dynamic html element in Extjs

I have a portal (attached image) in which when I click a button I get some images in a panel (right side). Now I want when I click on each of this image to get an alert box with the image id. How can I access this? Till now I have done everything using jquery and now I am in the process of migration. This is part of my code:
items: [{
xtype: 'tabpanel',
width: 600,
activeTab: 0,
flex: 2,
layout: {type: 'fit'},
items: [{
xtype: 'panel',
title: 'Images',
items: [{contentEl:'img',autoScroll:true,height:500 }],
},{
xtype: 'panel',
title: 'Material',
items: [{contentEl:'msg',autoScroll:true,height:500 }]
}]
}]..
You can add listener to an image element, when you append it
{
xtype: 'image',
src: 'some-path',
listeners: {
el: {
click: function() { alert(this.id); }
}
}
}

ExtJs BORDER LAYOUT does not work inside CARD LAYOUT

I am working on extjs for first time is it possible to have border layout inside card layout.If possible please provide me a sample example.
Coding:
Ext.define('app.view.main'{
extend: 'Ext.panel.Panel',
xtype: 'mainview',
layout: 'border',
border: false,
items:[
{
xtype:'panel',
region:'north',
......
.........
},
{
xtype:'panel',
region:'west',
......
.........
},
{
xtype:'panel',
region:'center',
items: [
{
xtype:'panel',
layout:'card',
items:[{
xtype: 'panel',
region: 'center',
margin: 10,
layout: 'border',
items:[{
xtype:'panel',
region:'center',
......
.........
},
{
xtype:'panel',
region:'south',
......
.........
}]
}]
}
]
}
]
});
In this the items inside card layout is not working if i remove the layout border then the panels are displayed.
It's possible. I've created your basic layout in the fiddle. The general structure seems to be border > card > border. I've added panel titles so that you can get a feel for where each panel is displayed. A couple things to note:
region: 'center' near margin: 10 within the card layout does nothing.
You've nested more than necessary. The center panel can just have card layout directly, rather than having one child panel with the card layout. The power users within the ExtJS forums always suggest flattening the layout as much as possible. I suspect this layout could be simplified more, depending on the needs of your application
Here's what the code looks like:
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
height: 300,
width: 500,
title: 'testing',
layout: 'border',
items: [{
xtype: 'panel',
region: 'north',
title: 'outer north',
height: 60
}, {
xtype: 'panel',
region: 'west',
title: 'outer west',
width: 60
}, {
xtype: 'panel',
region: 'center',
title: 'outer center',
layout: 'card',
items: [{
xtype: 'panel',
title: 'card 1',
layout: 'border',
items: [{
xtype: 'panel',
region: 'center',
title: 'inner center'
}, {
xtype: 'panel',
region: 'south',
title: 'inner south'
}]
}, {
xtype: 'panel',
title: 'card 2'
}]
}]
});

HTML above an xtype: 'formpanel' in Sencha Touch 2?

I'm new to Sencha Touch 2 and would like to place an HTML tag on top of the page and an xtype: formpanel below that. Any clue how to do this? Do I have to place both of these elements inside another xtype?
Thx in advance.
-> Screenshot
The code looks as follows (some stuff came before the code of course):
xtype: 'carousel',
direction: 'horizontal',
//Will be applied to every object in the array by default
defaults: {
styleHtmlContent: 'true',
scrollable: true
},
items: [
{
cls: 'configurator-item',
html: '<h2>Demo heading</h2>',
xtype: 'formpanel',
items: [
{
xtype: 'fieldset',
title: 'Demo',
defaults: {
//labelWidth: '30%',
autoCapitalize: true,
//required: true,
clearIcon: true
},
items: [
{
xtype: 'textfield',
name: 'locationOfHouse',
label: 'Demo',
placeHolder: 'Demo?'
},
{
xtype: 'spinnerfield',
name: 'numberOfPeople',
label: 'Demo',
minValue: 0,
maxValue: 99,
increment: 1,
cycle: true
}
]
}
]
},
You can implement this using 2 xtypes.
(1) xtype = panel or container to display the html or top.
(2) xtype = fieldset for the middle content.
Once this sencha app renders in the browser, it will be converted into series of divs and spans. So, 1# will give you more control to manipulate the text.
I have implemented the same for you on senchafiddle, you can have a look,
http://www.senchafiddle.com/#PHRyc
Hope it helps.
Yes, thanks I got it meanwhile like this:
items: [
{
xtype: 'container',
layout: 'vbox',
items: [
{
xtype: 'panel',
docked: 'top',
html: [
'<h1>Demo heading</h1>'
},
{
xtype: 'fieldset',
title: 'Demo',
defaults: {
//labelWidth: '30%',
autoCapitalize: true,
//required: true,
clearIcon: true,
labelAlign: 'top',
},
items: [
{
xtype: 'textfield',
name: 'Demo',
label: 'Demo',
labelWidth: '33%',
placeHolder: 'Demo'
}
(..and closing all the brackets above..)

ExtJS Horizontal Scroll bars blocking tab titles in TabPanel

This is an issue I've had a hard time researching and tracking down. When loading the following panel in a view, scroll bars appear on each tab title (not one long scroll bar for all of the tabs, but individual tab titles). It's not a huge issue for me since I'm on Mountain Lion with small scroll bars, but other users on older OS X versions have the huge blue scroll bars that block the entire tab title.
I'll post a screenshot when I get one, but here's the code:
Ext.define('App.view.case.CasePanel', {
extend: 'Ext.panel.Panel',
alias : 'widget.case-panel',
title : 'Edit Case',
layout: 'fit',
border: false,
autoScroll: true,
constrainHeader: true,
initComponent: function() {
this.items = [{
xtype: 'panel',
autoScroll: true,
layout: 'border',
items: [{
region: 'west',
xtype: 'case-edit-case-info',
split: true,
border: true,
width: 300
},{
region: 'center',
xtype: 'tabpanel',
activeTab: 0,
autoScroll: true,
border: false,
defaults: {border:false, bodyStyle:'padding:5px'},
items: [{
title: 'One',
xtype: 'case-edit-tab-one' // these aren't the actual tab names, but you get the idea.
},{
title: 'Two',
xtype: 'case-edit-tab-two'
},{
title: 'Three',
xtype: 'case-edit-tab-three'
},{
title: 'Four',
xtype: 'case-edit-tab-four'
},{
title: 'Five',
xtype: 'case-edit-tab-five'
},{
title: 'Six',
xtype: 'case-edit-tab-six'
},{
title: 'Seven',
xtype: 'case-edit-tab-seven'
}]
}]
}];
this.bbar = [{
text: 'Save',
action: 'save'
}, {
text: 'Cancel',
action: 'cancel'
}];
this.callParent(arguments);
}
});
Any ideas as to why it's doing this?
(Mac OS X, latest Chrome version)
Try to remove autoScroll from the first panel:
initComponent: function() {
this.items = [{
xtype: 'panel',
autoScroll: true,
layout: 'border',
...
}]
}