If you haven't read previous posts of this post series, Please read first and proceed this post. today, we are going to see the source code for the view pages in Expense Tracker App.
HomePage View:
Home page displays Tab Panel with 3 tabs Categories, Expenses and Settings. Each Tab is a container with list component as the child item.
Categories View:
By clicking 'Categories' tab, categories list page will be displayed, List component is added as the child item. This list component contains itemTpl configuration, storeId is set as 'categories' and Titlebar component is added as the child item for the List component. This TitleBar component contains Add button which will take user to the add category page. Here is the snapshot followed by source code.
Expenses View:
By clicking 'Expenses' tab, expenses list page will be displayed, List component and component field are added as the child items. This list component contains itemTpl configuration, storeId is set as 'expenses' and Titlebar component is added as the child item for the List component. Component field is used to display the Total and balance amount summary.
The TitleBar component contains add button, Search datepicker field with search button. Search datepicker field is used to filter expenses list by month/year. By clicking 'add' button, you will be taken to Add Expenses page.Here is the snapshot followed by source code.
Settings View:
By clicking 'Settings' tab, Settings page will be displayed which is used to remove all the categories and expenses store data stored locally on your mobile. Here is the snapshot followed by source code.
{
Full Code:
Hope, you enjoyed this Post. In Part4 of this post series, i will be explaining the remaining add category and add expenses view code in my Expense Tracker App. Hope, see you soon..
HomePage View:
Home page displays Tab Panel with 3 tabs Categories, Expenses and Settings. Each Tab is a container with list component as the child item.
Categories View:
By clicking 'Categories' tab, categories list page will be displayed, List component is added as the child item. This list component contains itemTpl configuration, storeId is set as 'categories' and Titlebar component is added as the child item for the List component. This TitleBar component contains Add button which will take user to the add category page. Here is the snapshot followed by source code.
{
xtype: 'container',
title: 'Category',
iconCls: 'home',
itemId: 'category',
items: [{
xtype: 'list',
docked: 'top',
height: '100%',
itemId: 'categorylist',
emptyText: 'No Categories Found',
itemTpl: [
'<div style="height: 30px;">',
' <div style="float:left;width:100%;">{name}<div style="float:right;">{[ExpenseTracker.util.Config.getCostSymbol()]} {price}</div></div>',
' <div style="float:left;width:100%;font-size: 15px;">Balance: <div style="float:right;">{[ExpenseTracker.util.Config.getCostSymbol()]} {[ExpenseTracker.util.Config.getBalanceExpenseCategoryPrice(values.id,values.price)]}</div></div>',
'</div>',
''
],
store: 'Categories',
onItemDisclosure: false, items: [{
xtype: 'titlebar',
docked: 'top',
ui: 'light',
title: 'Categories',
items: [{
xtype: 'button',
handler: function (button, e) {
Ext.Viewport.setActiveItem({
xtype: 'addcategory'
});
},
align: 'right',
itemId: 'add',
text: 'Add'
}]
}]
}]
}
Expenses View:
By clicking 'Expenses' tab, expenses list page will be displayed, List component and component field are added as the child items. This list component contains itemTpl configuration, storeId is set as 'expenses' and Titlebar component is added as the child item for the List component. Component field is used to display the Total and balance amount summary.
The TitleBar component contains add button, Search datepicker field with search button. Search datepicker field is used to filter expenses list by month/year. By clicking 'add' button, you will be taken to Add Expenses page.Here is the snapshot followed by source code.
{
xtype: 'container',
title: 'Expenses',
iconCls: 'add',
itemId: 'expenses',
items: [{
xtype: 'list',
docked: 'top',
height: '100%',
itemId: 'expenseList',
emptyText: 'No Expenses Found',
itemTpl: Ext.create('Ext.XTemplate',
'<div style="">',
' {name} ({[this.getCategory(values.categoryid)]}) : {[ExpenseTracker.util.Config.getCostSymbol()]} {price} <br/>',
' <span style="font-size: 15px;">{notes}</span>',
'</div>',
'', {
getCategory: function (cat) {
var category = Ext.getStore('Categories').getById(cat);
if (category !== null && category !== undefined) {
return category.get('name');
} else {
return '';
}
}
}
),
store: 'Expenses',
grouped: true,
onItemDisclosure: true,
items: [{
xtype: 'titlebar',
docked: 'top',
itemId: 'expenses',
ui: 'light',
title: 'Expenses',
items: [{
xtype: 'button',
handler: function (button, e) {
Ext.Viewport.setActiveItem({
xtype: 'addexpense'
});
},
align: 'right',
itemId: 'add',
text: 'Add'
}, {
xtype: 'datepickerfield',
itemId: 'searchfield',
width: 140,
placeHolder: 'Enter Date',
dateFormat: 'M/Y',
picker: {
useTitles: true,
slotOrder: [
'month',
'year'
],
yearFrom: 2013
}
}, {
xtype: 'button',
handler: function (button, e) {
Ext.getStore('Expenses').clearFilter();
var expenses = button.up('#expenses');
var searchfield = expenses.down('#searchfield');
var formData = (searchfield.getValue()) ? searchfield.getValue() : '';
if (formData !== '') {
formData = Ext.Date.format(formData, 'Y-m');
ExpenseTracker.util.Config.setExpenseDate(formData);
} else {
formData = Ext.Date.format(new Date(), 'Y-m');
ExpenseTracker.util.Config.setExpenseDate(formData);
}
var frDate = formData + '-01',
toDate = formData + '-31';
//console.log(frDate);console.log(toDate);
Ext.getStore('Expenses').filterBy(function (item) {
var itemdate = item.get('date');
itemdate = Ext.Date.format(itemdate, 'Y-m-d');
//console.log(itemdate);
if (itemdate >= frDate && itemdate <= toDate) {
return true;
}
});
},
itemId: 'searchbutton',
icon: 'true',
iconCls: 'search'
}]
}, {
xtype: 'component',
docked: 'top',
height: 50,
itemId: 'totalsummary',
margin: 10
}]
}]
}
Settings View:
By clicking 'Settings' tab, Settings page will be displayed which is used to remove all the categories and expenses store data stored locally on your mobile. Here is the snapshot followed by source code.
{
xtype: 'container',
title: 'Settings',
iconCls: 'settings',
items: [{
xtype: 'titlebar',
docked: 'top',
ui: 'light',
title: 'Settings'
}, {
xtype: 'formpanel',
height: '100%',
items: [{
xtype: 'label',
height: 46,
html: 'Expenses Tracker Settings',
margin: 10
}, {
xtype: 'button',
handler: function (button, e) {
Ext.Msg.confirm('DELETE CONFIRM', 'Are you sure you want to delete?', function (btn) {
if (btn === 'yes') {
Ext.getStore('Categories').removeAll();
Ext.getStore('Categories').sync();
Ext.Msg.alert('SUCCESS', 'Categories removed successfully');
} // switch
}); // confirm()
},
margin: 10,
text: 'Remove Categories'
}, {
xtype: 'button',
handler: function (button, e) {
Ext.Msg.confirm('DELETE CONFIRM', 'Are you sure you want to delete?', function (btn) {
if (btn === 'yes') {
Ext.getStore('Expenses').removeAll();
Ext.getStore('Expenses').sync();
Ext.Msg.alert('SUCCESS', 'Expenses removed successfully');
} // switch
}); // confirm()
},
margin: 10,
text: 'Remove Expenses'
}
Full Code:
Ext.define('ExpenseTracker.view.TabPanel', {
extend: 'Ext.tab.Panel',
alias: 'widget.tabpanel',
requires: [
'Ext.XTemplate'
],
config: {
height: '100%',
ui: 'light',
width: '100%',
items: [{
xtype: 'container',
title: 'Category',
iconCls: 'home',
itemId: 'category',
items: [{
xtype: 'list',
docked: 'top',
height: '100%',
itemId: 'categorylist',
emptyText: 'No Categories Found',
itemTpl: [
'<div style="height: 30px;">',
' <div style="float:left;width:100%;">{name}<div style="float:right;">{[ExpenseTracker.util.Config.getCostSymbol()]} {price}</div></div>',
' <div style="float:left;width:100%;font-size: 15px;">Balance: <div style="float:right;">{[ExpenseTracker.util.Config.getCostSymbol()]} {[ExpenseTracker.util.Config.getBalanceExpenseCategoryPrice(values.id,values.price)]}</div></div>',
'</div>',
''
],
store: 'Categories',
onItemDisclosure: false,
items: [{
xtype: 'titlebar',
docked: 'top',
ui: 'light',
title: 'Categories',
items: [{
xtype: 'button',
handler: function (button, e) {
Ext.Viewport.setActiveItem({
xtype: 'addcategory'
});
},
align: 'right',
itemId: 'add',
text: 'Add'
}]
}]
}]
}, {
xtype: 'container',
title: 'Expenses',
iconCls: 'add',
itemId: 'expenses',
items: [{
xtype: 'list',
docked: 'top',
height: '100%',
itemId: 'expenseList',
emptyText: 'No Expenses Found',
itemTpl: Ext.create('Ext.XTemplate',
'<div style="">',
' {name} ({[this.getCategory(values.categoryid)]}) : {[ExpenseTracker.util.Config.getCostSymbol()]} {price} <br/>',
' <span style="font-size: 15px;">{notes}</span>',
'</div>',
'', {
getCategory: function (cat) {
var category = Ext.getStore('Categories').getById(cat);
if (category !== null && category !== undefined) {
return category.get('name');
} else {
return '';
}
}
}
),
store: 'Expenses',
grouped: true,
onItemDisclosure: true,
items: [{
xtype: 'titlebar',
docked: 'top',
itemId: 'expenses',
ui: 'light',
title: 'Expenses',
items: [{
xtype: 'button',
handler: function (button, e) {
Ext.Viewport.setActiveItem({
xtype: 'addexpense'
});
},
align: 'right',
itemId: 'add',
text: 'Add'
}, {
xtype: 'datepickerfield',
itemId: 'searchfield',
width: 140,
placeHolder: 'Enter Date',
dateFormat: 'M/Y',
picker: {
useTitles: true,
slotOrder: [
'month',
'year'
],
yearFrom: 2013
}
}, {
xtype: 'button',
handler: function (button, e) {
Ext.getStore('Expenses').clearFilter();
var expenses = button.up('#expenses');
var searchfield = expenses.down('#searchfield');
var formData = (searchfield.getValue()) ? searchfield.getValue() : '';
if (formData !== '') {
formData = Ext.Date.format(formData, 'Y-m');
ExpenseTracker.util.Config.setExpenseDate(formData);
} else {
formData = Ext.Date.format(new Date(), 'Y-m');
ExpenseTracker.util.Config.setExpenseDate(formData);
}
var frDate = formData + '-01',
toDate = formData + '-31';
//console.log(frDate);console.log(toDate);
Ext.getStore('Expenses').filterBy(function (item) {
var itemdate = item.get('date');
itemdate = Ext.Date.format(itemdate, 'Y-m-d');
//console.log(itemdate);
if (itemdate >= frDate && itemdate <= toDate) {
return true;
}
});
},
itemId: 'searchbutton',
icon: 'true',
iconCls: 'search'
}]
}, {
xtype: 'component',
docked: 'top',
height: 50,
itemId: 'totalsummary',
margin: 10
}]
}]
}, {
xtype: 'container',
title: 'Settings',
iconCls: 'settings',
items: [{
xtype: 'titlebar',
docked: 'top',
ui: 'light',
title: 'Settings'
}, {
xtype: 'formpanel',
height: '100%',
items: [{
xtype: 'label',
height: 46,
html: 'Expenses Tracker Settings',
margin: 10
}, {
xtype: 'button',
handler: function (button, e) {
Ext.Msg.confirm('DELETE CONFIRM', 'Are you sure you want to delete?', function (btn) {
if (btn === 'yes') {
Ext.getStore('Categories').removeAll();
Ext.getStore('Categories').sync();
Ext.Msg.alert('SUCCESS', 'Categories removed successfully');
} // switch
}); // confirm()
},
margin: 10,
text: 'Remove Categories'
}, {
xtype: 'button',
handler: function (button, e) {
Ext.Msg.confirm('DELETE CONFIRM', 'Are you sure you want to delete?', function (btn) {
if (btn === 'yes') {
Ext.getStore('Expenses').removeAll();
Ext.getStore('Expenses').sync();
Ext.Msg.alert('SUCCESS', 'Expenses removed successfully');
} // switch
}); // confirm()
},
margin: 10,
text: 'Remove Expenses'
}]
}]
}],
tabBar: {
docked: 'bottom'
}
}
});
Hope, you enjoyed this Post. In Part4 of this post series, i will be explaining the remaining add category and add expenses view code in my Expense Tracker App. Hope, see you soon..
No comments:
Post a Comment