In my application, i have a tab panel in the bottom of the screen. The three tabs are Home, Add Wishlog and Add Feedback. Now when i am clicking the home tab, it is showing me some icons. In Add Wishlog and Add Feedback tab, i added some text boxes and some buttons. I added the addwishlog tabs like below in the screen
{
xtype : 'addwishlog',
styleHtmlContent : true,
title : '+ Wishlog',
iconCls : 'favorites',
},
Here is the addwishlog.js file:::
Ext.define('MyApp.view.AddtoWishlog', {
extend : 'Ext.Container',
xtype : 'addwishlog',
config : {
ui : 'light',
scrollable: {
direction: 'vertical',
directionLock: true
},
items : [
{
xtype : 'container',
id : 'LoginScreen',
docked : 'top',
items : [
{
xtype : 'image',
docked : 'left',
height : 92,
id : 'Logoimage',
ui : '',
width : 120,
src : 'app/images/small_logo.png'
},
{
xtype : 'titlebar',
cls : 'mytitlebar',
docked : 'top',
height : 80,
ui : 'blue',
items : [ {
xtype : 'label',
height : 36,
html : 'Add to Wishlog',
id : 'title',
margin : 20,
style : 'font: normal Bold 20px droid sans; color:#AB3951',
} ]
} ]
},
{
xtype : 'panel',
autoHeight: true,
items: [{
xtype : 'container',
id : 'dashboardiconcontainer',
height: 400,
layout: 'vbox',
items : [
{
xtype : 'container',
id : 'topitembox',
layout : {
type : 'hbox'
},
margin : '10 0 0 10',
height : 50,
items : [ {
xtype : 'textfield',
id : 'itemname',
labelWidth : '40%',
label : 'Name of the item',
width : 320
}, {
xtype : 'textfield',
id : 'barcodetextfield',
width : 300,
// value: 'test',
margin : '0 0 0 10',
labelWidth : '40%',
label : 'Enter Barcode'
}, {
xtype : 'button',
height : 40,
scope: this,
margin : '0 0 0 10',
id : 'scanbutton',
ui : 'orange',
width : '80',
text : 'scan barcode'
} ]
},
{
xtype : 'container',
height : 160,
id : 'cameraimagecontainer',
margin : '10 0 0 10',
layout : {
type : 'hbox'
},
items : [
{
html : '<img style="width:180px; height:150px;display:none;" id="capturedimage" src="" />'
},
{
xtype : 'container',
id : 'btncontainer',
width : 120,
margin : '0 0 0 10',
layout : {
type : 'vbox'
},
items : [
{
xtype : 'button',
height : 73,
cls : 'capturebtn',
id : 'capturebtn',
width : 100
},
{
xtype : 'button',
height : 73,
margin : '10 0 0 0',
cls : 'choosephotobtn',
id : 'selectphoto',
width : 100
} ]
},
{
xtype : 'container',
id : 'additionalinfo',
margin : '10 0 0 10',
width : 400,
layout : {
type : 'vbox'
},
items : [
{
xtype : 'textareafield',
height : 80,
width : 380,
id : 'additionalinfo',
label : 'Add Additiona Details',
labelWidth : '40%',
placeHolder : ''
},
{
xtype : 'selectfield',
margin : '5 0 0 0',
width : 300,
label : 'Select Category',
options : [
{
text : 'Food',
value : 'first'
},
{
text : 'Sports',
value : 'second'
},
{
text : 'Electronics',
value : 'third'
} ],
labelWidth : '40%'
},
{
xtype : 'textareafield',
id : 'Addmoretag',
margin : '10 0 0 0',
width : 320,
placeHolder : 'Add any other tags you want '
},
{
xtype : 'button',
height : 54,
id : 'Addwishlog',
margin : '10 0 0 0',
ui : 'orange',
width : 250,
text : 'Add to my wishlog'
}
]
} ]
} ]
}]
} ]
}
});
The same way i am doing for addFeedback also. Now while i am trying to fetch the value of any of the text field from the addWislog screen, I am getting the error. Some time it is telling the getValue() method is not for this object..while trying to do using
this.getIDofTextbox().getValue();
although i took the correct reference in the controller. If i am trying using getCmp(), i am getting null value.
I am literally confused, because for other screen, i am getting the value from text boxes. The problem i am getting only in this tabpanel js files.
Here is my app.js file:
Ext.Loader.setConfig({
enabled : true
});
Ext.application({
views : ['dashboardpanel', 'TitlePanel', 'wishlogsummary', 'ConsumerSignup', 'FeedbackSummary', 'ConsumerSignin', 'AddFeedback'],
models : [ 'MyModel', 'wishlistmodel', 'feedbacksummarymodel' , 'loginmodel'],
stores : [ 'name', 'wishlistsummarystore', 'feedbacksummarystore' ],
name : 'MyApp',
controllers : [ 'MyController' ],
requires:['Ext.ux.touch.Rating'],
fullscreen: true,
launch : function() {
var Login = {
xtype: 'login'
}
var Dashboard = {
xtype: 'dashboard'
}
var Wishlogsummary = {
xtype: 'wishlogsummarylist'
}
var AddtoWishlog = {
xtype: 'addwishlog'
}
var Consumersignup = {
xtype: 'consumersignup'
}
var FeedbackSummaryList = {
xtype: 'feedbacksummarylist'
}
var Consumersignin = {
xtype: 'Consumersignin'
}
Ext.Viewport.add([Login,Dashboard,Wishlogsummary, FeedbackSummaryList,Consumersignup,Consumersignin]);
}
});
Did i have to change something in the application architecture??
Please help as i am stuck in this issue for a long while and not able to find out the solution..
Actually, there is some problem in my architecture. Now i able to fixed it.