I'm new to Sencha Touch and mobile app development.
I need to implement in my app a main view which should look and behave like this:
Group1 Group2
_________________________ _________________________
Item1 Item2 Item3 Item1 Item2 Item3
Group3 Group4
_________________________ _________________________
Item1 Item2 Item3 Item1 Item2 Item3
Group5 Group6
_________________________ _________________________
Item1 Item2 Item3 Item1 Item2 Item3
...
Groups blocks bust be inlined and scroll vertically.
Items must scroll horizontally.
Number of Items per group may vary by group.
Groups are stored in the "storeMainNavGroups" store.
Items are stored in the "storeMainNav" store, which is grouped by..."group"!
I believe that it should be accomplished by cascading dataviews:
1rst level Dataview: contains groups
2nd level Dataviews: contains items
but I'm not sure.
This is the code I tried but it does not work: All Items (for all groups) are displayed above the groups.
Code:
Ext.define('MyApp.view.Main', {
extend: 'Ext.navigation.View',
xtype: 'main',
requires: ['Ext.data.Store'],
config: {
navigationBar : {
docked : 'top',
items : [
{
name: 'btnHome',
align: 'left',
xtype: "button",
iconCls: 'home',
ui: 'plain'
}
]
},
items: [
{
title: 'MyApp',
layout: 'vbox',
fullscreen: true,
items: [
{
xtype: 'label',
html: 'some text...'
},
{
xtype: 'dataview',
id: 'listMainNavViewGroups',
useSimpleItems: true,
grouped: true,
inline: {
wrap: true
},
flex: 1,
itemTpl: [
'<div>' +
'<div style="display: block; float: left; font-family: Pictos; font-size: 1.5em; line-height: 120%; margin: 0 20px 0 0;">{icon}</div>' +
'<span style="margin: 0 40px 0 0;">{group}</span>' +
'</div>'
],
store: 'storeMainNavGroups',
items: [
{
xtype: 'dataview',
id: 'listMainNavView',
useSimpleItems: true,
grouped: true,
height: '100px',
inline: {
wrap: false
},
flex: 1,
itemTpl: [
'<div>' +
'<div style="display: block; float: left; font-family: Pictos; font-size: 1.5em; line-height: 120%; margin: 0 20px 0 0;">{icon}</div>' +
'<span style="margin: 0 40px 0 0;">{title}</span>' +
'</div>'
],
store: 'storeMainNav'
}
]
}
]
}
]
}
});
What am I doing wrong ?
Is there a better solution to accomplish this ?
Thanks in advance for your answers and advices.
Arnaud
It will become very complex the way you are doing it. Sencha doesn't like too much nesting anyway. If I were to do it, I would do something like this:
Ext.define('MyApp.view.Main', {
extend: 'Ext.navigation.View',
xtype: 'main',
requires: ['Ext.data.Store'],
config: {
navigationBar : {
docked : 'top',
items : [
{
name: 'btnHome',
align: 'left',
xtype: "button",
iconCls: 'home',
ui: 'plain'
}]
},
items: [
{
xtype:'container',
title: 'MyApp',
layout: 'hbox',//Note change to hbox
fullscreen: true,
items:[
{
xtype:'container',
layout:'vbox',
flex:1
},
{
xtype:'container',
layout:'vbox',
flex:1
}
]
]
},
groupNumber : 0,
initialize:function(){
var me = this;
//Add items dynamically here
var leftPanel = this.getAt(0).getAt(0);
var rightPanel = this.getAt(0).getAt(1);
var groupStore = Ext.getStore('MainNavGroups');//This should be store id
var itemStore = Ext.getStore('MainNavItems');
//Iterate through groups and add items to each
groupStore.each(function(record){
var groupPanel = { xtype:'container', layout:'hbox', items:[]};
itemStore.each(function(rec){
//Add items to groupPanel here by filtering for group id
//groupPanel.add( ... );
});
if(me.groupNumber % 2 == 0){//Even number
leftPanel.add(groupPanel);
}
else{
rightPanel.add(groupPanel);
}
me.groupNumber++;
});
this.callParent();
}
});
Related
Basically, the problem that I have is the following:
When I resize the column in my GridPanel the textbox UI near Name get destroyed: the line on the right disappear. It should instead resize according to the width. How could I fix it?
This is my code:
...
columns: {
defaults: {
flex: 1,
},
layout:'auto',
items: [{
text: Strings.sharedName,
flex: 1,
minWidth: Traccar.Style.columnWidthNormal,
dataIndex: 'name',
//style: 'text-align:right;!important',
filter: 'string',
defaults: {
margin: '-28 30 -5 50'
},
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'right'
},
flex: 2,
items: [{
xtype: 'textfield',
id: 'nameFilter',
listeners: {
change: function(field, value) {
filterGrid('name', value);
}
}
}]
}]
}
...
Here a reproducible example:
https://fiddle.sencha.com/#view/editor&fiddle/3a41
I am trying to run an already present application on IE 9 but it has issues with the pop-up window and with .show() and .hide() commands.
i am getting a blue blank screen
The application is running smoothly on Chrome
The code on the Main Panel
<% #page language = "java"
contentType = "text/html; charset=UTF-8"
pageEncoding = "UTF-8" %>
< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
< meta http - equiv = "Content-Type"
content = "text/html; charset=ISO-8859-1" >
< meta http - equiv = "X-UA-Compatible"
content = "IE=9" / >
< script >
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', 'lib');
Ext.require(['*']);
Ext.onReady(function() {
/* var myMask2;
myMask2 = new Ext.LoadMask(Ext.getBody(), {msg:"Loading Please wait..."}); */
var basePanel = Ext.create('Ext.form.Panel', {
id: 'basePanel',
frame: true,
title: 'basePanel',
width: 1500,
height: 80,
collapsible: true,
layout: {
type: 'table',
columns: 1
},
defaults: {
width: 100,
labelWidth: 85
},
fieldDefaults: {
labelAlign: 'right',
msgTarget: 'side',
margin: '0 0 5 0'
},
defaultType: 'textfield',
items: [{
xtype: 'button',
text: 'clickToGetPopup',
id: 'clickToGetPopup',
disabled: true,
margin: '10 7 5 4',
width: 100,
handler: function() {
var i = 0;
if (Ext.getCmp("popupPanel") != undefined) {
Ext.getCmp("popupPanel").getStore().setProxy({
type: 'ajax',
method: 'Get',
url: 'lib/xyz.jsp
reader: {
root: '
topics ',
totalProperty: '
totalCount '
}
});
Ext.getCmp("popupPanel").getStore().loadPage(1);
}
popupPanel.popupWindow.show();
popupPanel.popupPanel.center();
}
}]
});
Ext.define('
basePanel ', {
singleton : true,
basePanel : basePanel
});
});
</script>
</head>
<body>
</body>
</html>
The code on the pop-up window
<% #page language = "java"
contentType = "text/html; charset=UTF-8"
pageEncoding = "UTF-8" %>
<% #page import = "java.text.SimpleDateFormat" %>
<% #page import = "java.util.Date" %>
< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
< meta http - equiv = "Content-Type"
content = "text/html; charset=ISO-8859-1" >
< meta http - equiv = "X-UA-Compatible"
content = "IE=9" / >
< style >
.myBold {
font - weight: bold;
font - size: 11px;
color: #483D8B;
}
.mycol
{
color:# 483D8B;
font - weight: bold;
font - size: 11px;
}
.btn {
border: solid;
border - color: black;
background - color: #9EB32D;
background-image: none;
}
.x-grid-row .custom-column {
background-color: # D9D9D9;
}
.my - combo - lst.x - boundlist - item {
font - size: 8px;
}
.x - boundlist - item {
font - size: 10px;
}
.x - form - field {
height: 14px;
font - size: 10px;
}
.x - form - text {
height: 14px;
font - size: 10px;
}
.x - field - form {
height: 14px;
font - size: 10px;
}
.x - form - focus {
height: 14px;
font - size: 10px;
}
.x - field - form - focus {
height: 14px;
font - size: 10px;
}
.x - field -
default -form - focus {
height: 14px;
font - size: 10px;
} < /style>
<script>
Ext.Loader.setConfig({
enabled : true
});
Ext.Loader.setPath('Ext.ux', 'lib');
Ext.require([ '*' ]);
/ / definer For Grid
Ext.define('popupModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'A'
}, {
name: 'B'
}, {
name: 'C'
}, {
name: 'D'
},
],
idProperty: 'ParentfromRTNWGridModel'
});
var popupStore = new Ext.data.Store({
model: 'popupModel',
pageSize: 20
});
Ext.onReady(function() {
Ext.suspendLayouts();
// add/remove items here
Ext.QuickTips.init();
Ext.state.Manager.setProvider(Ext
.create('Ext.state.CookieProvider'));
var nwId = "";
var nwVal = "";
//var nwchangedVal = "";
var nwIndex = "";
var item = "";
var CellEditingRTNW = Ext.create('Ext.grid.plugin.CellEditing', {
pluginId: 'CellEditingRTNW',
extend: 'Ext.grid.Editing',
clicksToMoveEditor: 1,
clicksToEdit: 1,
editStyle: 'cell',
autoCancel: false,
});
var flag1 = false;
var popupPanel = Ext.create('Ext.grid.Panel', {
id: 'popupPanel',
store: popupStore,
title: 'popupPanel ',
autoScroll: true,
columnLines: true,
maximizable: true,
layout: {
type: 'vbox',
align: 'stretch'
},
hidden: true,
plugins: [
CellEditingRTNW,
Ext.create('Ext.grid.plugin.Editing', {}),
Ext.create('Ext.ux.ColumnAutoWidthPlugin', {})
],
columns: [{
text: 'A Column',
width: 170,
flex: 1,
sortable: false,
dataIndex: 'A',
}, {
text: 'B column',
width: 170,
flex: 1,
sortable: false,
dataIndex: 'B',
editor: {
xtype: 'combobox',
store: storeCombo,
autoLoad: false,
hideTrigger: true,
queryMode: 'remote',
editable: false,
displayField: 'name',
valueField: 'name',
selectOnFocus: true,
d: 'popupEditor',
listeners: {
blur: function(e1, o) {
console.log(e1);
}
}
}
}, {
text: 'C Column',
width: 170,
flex: 1,
sortable: false,
dataIndex: 'Child_Name',
tdCls: 'custom-column'
}, {
text: 'D Column',
width: 170,
flex: 1,
sortable: false,
dataIndex: 'Child_Value',
tdCls: 'custom-column'
}],
viewConfig: {
stripeRows: true,
markDirty: false,
enableTextSelection: true,
displayInfo: true,
}
});
var popupFilter = Ext.create('Ext.form.Panel', {
id: 'popupFilter',
frame: true,
//title :'popupFilter',
collapsible: false,
collapsed: false,
buttonAlign: 'center',
layout: {
type: 'table',
columns: 4,
align: 'middle'
},
items: [{
xtype: 'radiogroup',
align: 'left',
width: 200,
id: 'Parentidtoselect',
columns: 2,
items: [
{
boxLabel: '1',
name: 'rb',
width: '700',
inputValue: '1',
id: '1',
listeners: {
change: function(cb, nv, ov) {
if (nv) {
1.show();
2.hide();
}
}
}
}, {
boxLabel: '2',
name: 'rb',
width: '700',
inputValue: '2',
hidden: true,
id: '2',
listeners: {
change: function(cb, nv, ov) {
if (nv) {
2.show();
1.hide();
}
}
}
}
]
},
{
xtype: 'button',
text: 'Cancel',
id: 'cancel',
margin: '0 0 0 10',
//colspan:2,
width: 100,
handler: function() {
popupWindow.hide();
}
}
]
});
var popupWindow = Ext.create('Ext.window.Window', {
autoWidth: true,
autoScroll: true,
closable: true,
constrainHeader: true,
id: 'popupWindow',
height: 550,
width: 700,
closeAction: 'hide',
plain: true,
stateful: false,
title: '<div style="text-align:center;">popupWindow</div>',
hidden: true,
maximizable: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
popupFilter,
popupPanel,
],
listeners: {
beforehide: function(panel) {}
}
});
Ext.define('popupMainPanel', {
singleton: true,
popupWindow: popupWindow,
flag1: flag1,
popupPanel: popupPanel,
popupFilter: popupFilter
});
Ext.resumeLayouts(true);
}); < /script>
</head >
< body >
< /body>
</html >
What about when you use Compatibility mode in IE9, what happens? Does that help the scenario? I am making an assumption from your wording that this was working else where, let me know if that is wrong.
What version of Ext JS is this? Have you tried creating a Fiddle with this in order to test it against different library versions? https://fiddle.sencha.com/#home
A little bit of code might help us, help you.
UPDATE:
So my first thought is that your using popupPanel as if its a JavaScript global variable but you have not set this variable yet in the top code. You might want a var popupPanel = Ext.getCmp("PopupPanel") in there and then use that object in order to call those functions. Now I see it in the code in the second window but I think closures are messing with you here in the first window. I think someone with more experience will chime in at this point with my half answer out there now.
Also did you say this is working in other browsers but not in IE9? what other browsers did you test this on? Or did you make code changes and now it just does not work at all?
I have a view which is in vbox layout with two items (a calendar plugin at top and a list at bottom) and is set to scrollable false as i dont want scroll on whole component. What i require is that in the list at bottom i have a store that is populated remotely and i cannot figure out how to enable scrolling in that list if the items exceed the available space in list.
this is the parent view
Ext.define('BudgetApp.view.transaction.TransactionDetailView', {
extend: 'Ext.Container',
xtype: 'transactiondetailview',
config: {
scrollable: false,
fullScreen: true,
layout: 'vbox',
items: [{
xtype: 'calendar',
id: 'touchCalendarView',
itemId: 'touchCalendarView',
viewMode: 'month',
value: new Date(),
flex: 1.3,
viewConfig: {
weekStart: 1,
eventStore: eventStore
},
enableEventBars: {
eventHeight: 'auto',
eventBarTpl: new Ext.XTemplate(
'<tpl if="amount > 0">' +
'<span style="color:green; top:0; left:0; font-size:8px; font-weight:bold; position:relative; text-shadow:none;">${amount}</span>' +
'</tpl>' +
'<tpl if="amount == 0">' +
'<span style="color:black; top:0; left:0; font-size:8px; font-weight:bold; position:relative; text-shadow:none;">${amount}</span>' +
'</tpl>' +
'<tpl if="amount < 0">' +
'<span style="color:red; top:0; left:0; font-size:8px; font-weight:bold; position:relative; text-shadow:none;">${amount}</span>' +
'</tpl>' +
'<tpl if="!clear && clear !=null">' +
'<p style="color:black; top:0; left:0; font-size:8px; font-weight:normal; position:relative; text-shadow:none;">●</p>' +
'</tpl>'
)
}
},
{
xtype: 'forcasttransactionlist',
itemId: 'forecastTransactionList',
scrollable: true,
//height:'100%',
//style: 'overflow:auto;',
flex: 1
}
]
}
});
below is the list code
Ext.define('BudgetApp.view.transaction.ForecastTransactionList', {
extend: 'Ext.List',
xtype: 'forcasttransactionlist',
config: {
store: {
fields: ['name', 'age'],
data: [
{ name: 'Jamie', age: 100 },
{ name: 'Rob', age: 21 },
{ name: 'Tommy', age: 24 }/*,
{ name: 'Jacky', age: 24 },
{ name: 'Ed', age: 26 },
{ name: 'Jamie', age: 100 },
{ name: 'Rob', age: 21 },
{ name: 'Tommy', age: 24 },
{ name: 'Jamie', age: 100 },
{ name: 'Rob', age: 21 },
{ name: 'Tommy', age: 24 },
{ name: 'Jacky', age: 24 }*/
]
},
itemTpl: '<div>{name} is {age} years old</div>'
}
});
I tried setting scrollable:true but it will display scroll even if there is just
single item in list. I also tried setting style:'overflow:auto;' to list config in parent but that didn't work.
I want to enable scroll only if list overflows the available space.
Any help please ???
There isn't a built-in mechanism for this, you would need to implement your own. Unless you have additional custom list settings (such as variableHeight) then it's actually not that difficult. I put together a quick Sencha Fiddle showing how it would work.
https://fiddle.sencha.com/#fiddle/8uc
I need to put a image on center of titlebar in sencha touch 2 , but I can't! I touch js and CSS but it's impossible.... any idea, please? Thanks!
try this one it will help for You..
Its very simple...
title:'give image tag with location thats all'
You can try setTitle('<div class="logo"/>')
and
.logo {
background: url('../images/logo.png') no-repeat center;
width:100px;
height:40px
}
ImageTitleBar class.
Ext.define('myapp.controls.ImageTitleBar', {
extend: 'Ext.TitleBar',
alias: 'widget.imageTitleBar',
requires: [
'Ext.Img'
],
config: {
imageSource: ''
},
applyInitialItems: function(items) {
var me = this,
defaults = me.getDefaults() || {};
me.initialItems = items;
me.leftBox = me.add({
xtype: 'container',
style: 'position: relative',
layout: {
type: 'hbox',
align: 'center'
},
listeners: {
resize: 'refreshTitlePosition',
scope: me
}
});
me.spacer = me.add({
xtype: 'component',
style: 'position: relative',
flex: 1,
listeners: {
resize: 'refreshTitlePosition',
scope: me
}
});
me.rightBox = me.add({
xtype: 'container',
style: 'position: relative',
layout: {
type: 'hbox',
align: 'center'
},
listeners: {
resize: 'refreshTitlePosition',
scope: me
}
});
me.titleComponent = me.add({
xtype: 'container',
hidden: defaults.hidden,
centered: true,
layout: {
type: 'hbox',
align: 'middle'
}
});
me.titleImage = me.titleComponent.add({
xtype: 'img',
width: 36,
height: 36
})
me.titleLabel = me.titleComponent.add({
xtype: 'title'
});
me.doAdd = me.doBoxAdd;
me.remove = me.doBoxRemove;
me.doInsert = me.doBoxInsert;
},
updateTitle: function(newTitle) {
this.titleLabel.setTitle(newTitle);
this.titleLabel.setHidden(!newTitle);
if (this.isPainted()) {
this.refreshTitlePosition();
}
},
updateImageSource: function(newImageSource) {
this.titleImage.setSrc(newImageSource);
this.titleImage.setHidden(!newImageSource);
if (this.isPainted()) {
this.refreshTitlePosition();
}
}
})
I'm trying to create a Sencha Touch 2 form panel for a model in which one of the fields contains the URL to an image file. If I include a textfield, it'll display the text of the URL correctly, but what I really want is to display the image found at that URL, and I'm not sure how to do that. If I use xtype: image, I think I need a src config, and I'm not sure how to specify that the desired value is in one of the form fields. My view looks like this:
Ext.define("CatalogApp.view.ItemDetailView", {
extend: "Ext.form.Panel",
requires: "Ext.form.FieldSet",
alias: "widget.itemdetailview",
config:{
scrollable:'vertical'
},
initialize: function ()
{
this.callParent(arguments);
var backButton = {
xtype: "button",
ui: "back",
text: "Home",
handler: this.onBackButtonTap,
scope: this
};
var topToolbar = {
xtype: "toolbar",
docked: "top",
title: "Item Detail",
items: [
backButton
]
};
var mainLayout = {
xtype: "container",
layout: 'hbox',
items: [
{
xtype: 'textfield',
width: 200,
name: 'thumbUrl'
},
{
xtype: "fieldset",
flex: 1,
items : [
{
xtype: 'textfield',
name: 'itemNbr',
label: 'Item Nbr',
disabled: true
},
{
xtype: 'textfield',
name: 'itemDesc',
label: 'Item Desc',
disabled: true
}
]
}
]
};
this.add([
topToolbar,
mainLayout
]);
},
onBackButtonTap: function ()
{
console.log("backToHomeCommand");
this.fireEvent("backToHomeCommand", this);
}
});
How can I set up this view to display the image correctly?
You have to define new Sencha component: ImageField
Ext.define('Ext.ux.field.ImageField', {
extend: 'Ext.field.Field',
requires: [
'Ext.Img'
],
xtype: 'imagefield',
config: {
component: {
xtype: 'image'
}
},
updateValue: function(value, oldValue) {
var me = this,
component = me.getComponent();
component.setSrc(value);
},
proxyConfig: {
width: '100%',
height: '100%'
}
});
Than in form:
Ext.define("CatalogApp.view.ItemDetailView", {
extend: "Ext.form.Panel",
requires: "Ext.form.FieldSet",
alias: "widget.itemdetailview",
config:{
scrollable:'vertical'
},
initialize: function ()
{
this.callParent(arguments);
var backButton = {
xtype: "button",
ui: "back",
text: "Home",
handler: this.onBackButtonTap,
scope: this
};
var topToolbar = {
xtype: "toolbar",
docked: "top",
title: "Item Detail",
items: [
backButton
]
};
var mainLayout = {
xtype: "container",
layout: 'hbox',
items: [
{
xtype: 'imagefield', // only this change
width: 200,
height: 150,
name: 'thumbUrl'
},
{
xtype: "fieldset",
flex: 1,
items : [
{
xtype: 'textfield',
name: 'itemNbr',
label: 'Item Nbr',
disabled: true
},
{
xtype: 'textfield',
name: 'itemDesc',
label: 'Item Desc',
disabled: true
}
]
}
]
};
this.add([
topToolbar,
mainLayout
]);
},
onBackButtonTap: function ()
{
console.log("backToHomeCommand");
this.fireEvent("backToHomeCommand", this);
}
});
Cheers, Oleg