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.
Related
I can't seem to figure out why the appearance of the soft keyboard whilst editing a text field on Android causes some of my controls to get pushed up the page. Is there a way to stop a view or a button from being moved up? It makes a real mess!
code:
registration = {};
registration.view = Titanium.UI.createView({
top : 0,
backgroundImage : GetfilePath + 'bg.png',
});
registration.init = function(view, name) {
var Scrolview = Titanium.UI.createScrollView({
top : viewTop,
height : Ti.UI.SIZE,
layout : 'vertical',
scrollType : 'vertical',
showHorizontalScrollIndicator : false
});
registration.view.add(Scrolview);
var profileView = Ti.UI.createView({
top : 10,
height : 100,
width : 100,
//backgroundColor : 'red',
});
Scrolview.add(profileView);
var profileImage = Ti.UI.createImageView({
image : GetfilePath + 'ProfilePicIcon.png',
});
profileView.add(profileImage);
var chooseprofileView = Ti.UI.createView({
top : 8,
width : deviceName == 'tab' ? '92.5%' : '92.5%',
height : deviceName == 'tab' ? 75 : 60,
});
Scrolview.add(chooseprofileView);
var chooseprofileImage = Ti.UI.createView({
backgroundImage : GetfilePath + 'ChooseProfilebutton.png'
});
chooseprofileView.add(chooseprofileImage);
var chooseprofileLabel = Ti.UI.createLabel({
text : 'Choose Profile Pic ',
color : '#E6E6E6',
font : {
fontSize : deviceName == 'tab' ? 19 : 17,
//fontWeight : 'bold',
fontFamily : os({
iphone : 'Helvetica Neue',
ipad : 'Helvetica Neue',
ipod : 'Helvetica Neue',
android : 'helveticaneue-webfont'
})
},
});
chooseprofileImage.add(chooseprofileLabel);
//alert(UserDetailsInfoData[0].UserName);
var namesurnametextfield = Titanium.UI.createTextField({
borderStyle : Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
hintText : 'Name & Surname*',
backgroundColor : '#32302D',
color : 'white',
backgroundImage : 'none',
keyboardToolbarHeight : 30,
borderRadius : 10,
borderColor : '#3F4246',
borderWidth : 2,
paddingLeft : 10,
width : '90%',
height : 55,
top : '1%',
//backgroundColor:'green'
});
Scrolview.add(namesurnametextfield);
var emailtextfield = Titanium.UI.createTextField({
borderStyle : Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
hintText : 'Email Address*',
backgroundColor : '#32302D',
color : 'white',
backgroundImage : 'none',
keyboardToolbarHeight : 30,
borderRadius : 10,
paddingLeft : 10,
borderColor : '#3F4246',
borderWidth : 2,
width : '90%',
height : 55,
top : '1%',
});
Scrolview.add(emailtextfield);
var cellnotextfield = Titanium.UI.createTextField({
borderStyle : Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
hintText : 'Cellphone Number',
backgroundColor : '#32302D',
color : 'white',
backgroundImage : 'none',
keyboardToolbarHeight : 30,
borderColor : '#3F4246',
borderWidth : 2,
borderRadius : 10,
paddingLeft : 10,
width : '90%',
height : 55,
top : '1%',
keyboardType : Titanium.UI.KEYBOARD_NUMBER_PAD,
});
Scrolview.add(cellnotextfield);
//alert(UserDetailsInfoData[0].UserName);
var displaynametextfield = Titanium.UI.createTextField({
borderStyle : Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
hintText : 'Display Name*',
backgroundColor : '#32302D',
color : 'white',
backgroundImage : 'none',
keyboardToolbarHeight : 30,
borderRadius : 10,
borderColor : '#3F4246',
borderWidth : 2,
paddingLeft : 10,
width : '90%',
height : 55,
top : '1%'
});
Scrolview.add(displaynametextfield);
};
i followed this link but the problem remains same.
ANY Solution?
Try this :
In your tiapp.xml file under android tag add this line of code :
<activity android:windowSoftInputMode="stateVisible|adjustResize" . . . >
One of the group of soft input visibility constants, SOFT_INPUT_STATE_ALWAYS_HIDDEN, SOFT_INPUT_STATE_ALWAYS_VISIBLE, SOFT_INPUT_STATE_HIDDEN, SOFT_INPUT_STATE_UNSPECIFIED, or SOFT_INPUT_STATE_VISIBLE.
One of the group of soft input adjustment constants, SOFT_INPUT_ADJUST_UNSPECIFIED, SOFT_INPUT_ADJUST_RESIZE, or SOFT_INPUT_ADJUST_PAN.
Also, check this :
Titanium windowSoftInputMode
Android windowSoftInputMode
Sample Android example here
I have never tried titanium before, however in normal Java android development. we add this code to the manifest under the related activity tag.
<activity
android:name="Your-activity-name"
android:windowSoftInputMode="adjustPan"
...
I read that there is a Custom AndroidManifest.xml in Titanuim 3.x..
Hope this works for you.
I have sencha touch 2 based app and I have facing issue while tapping and holding. Ideally i should get android context menu of copy paste but i dont.
Please refer to below two links.
http://try.sencha.com/touch/2.0.0/docs/Ext.field.TextArea.1/viewer.html
http://try.sencha.com/touch/2.2.0/docs/Ext.field.TextArea.1/viewer.html
On android first one gives the android (not tested on ios) copy paste menu but second one does not. I am facing the smae problem in my live app also.
Please suggest if any solution
Reply to #bwags:
Ext.define('HCMDoctor.view.PFQuestion', {
extend : 'Ext.form.Panel',
xtype : 'PFQuestion',
id : 'pfView',
config : {
layout : {
type : 'auto',
align : 'stretch'
},
flex : 1,
scrollable : 'vertical',
items : [{
xtype : 'container',
html : 'Click below to choose a different community',
style : {
width : '98%',
marginLeft : '5px',
marginTop : '10px',
fontSize : '10px'
}
}, {
xtype : 'selectfield',
store : 'CommunityWiseQuestions',
name : 'pfCommId',
id : 'pfCommId',
valueField : 'communityId',
displayField : 'displayFull',
centered : false,
usePicker : false,
defaultTabletPickerConfig : {
height : 400,
minHeight : 400,
width : 300,
minWidth : 300
},
style : {
marginTop : '10px',
marginBottom : '10px',
width : '96%',
marginLeft : '5px',
fontSize : '12px',
border : '1px solid #000'
}
}, {
html : '',
id : 'questionMessageDiv',
style : {
textAlign : 'center',
width : '100%'
}
}, {
xtype : 'panel',
id : 'pfQuestionHolder',
style : {
width : '98%',
marginLeft : '5px',
marginBottom : '10px'
},
tpl : [
'<span style="font-size:12px;"><b>{discussionTitle}</b><br>{description}',
// '<br><i><span style="color:green">Posted in
// <b>{postedInCommunityName}</b></span></i>',
'</span>']
}, {
xtype : 'hiddenfield',
id : 'pfQuestionId',
name : 'pfQuestionId'
}, {
xtype : 'textareafield',
id : 'pfAnswer',
name : 'pfAnswer',
placeHolder : 'Please write your answer here...',
style : {
marginBottom : '10px',
width : '97%',
marginLeft : '5px',
fontSize : '12px',
border : '2px solid #000'
}
,
listeners : {
focus : function(comp, e, eopts) {
listeners : {
var ost = comp.element.dom.offsetTop;
this.getParent().getScrollable().getScroller()
.scrollToEnd(true);
return true;
}
}
}
}, {
xtype : 'button',
text : 'Submit',
id : 'submitPFQuestion',
ui : 'confirm'
}, {
xtype : 'spacer',
height : 10
}, {
xtype : 'container',
html : '<a id="ignorePFQuestion" href="javascript:">Skip and Show Next Question</a>',
style : {
width : '98%',
marginLeft : '5px',
textAlign : 'center',
marginBottom : '80px'
}
}
]
},
initialize : function() {
this.element.on({
scope : this,
tap : this.ignorePremiumQuestion,
delegate : '#ignorePFQuestion'
});
return this.callParent();
},
ignorePremiumQuestion : function(obj, newValue, oldValue, eOpts) {
HCMDoctor.app.getController('Main').showPFQuestionNext();
}
});
This is one of the views I have. I am not getting the default context menu of copy paste on android as well as ios.
Infact the sencha try URL doesnot produce copy paste menus.
Ext.define('Video.view.video', {
extend: 'Ext.Container',
requires: [
'Ext.Video'
],
config: {
layout: 'fit',
items: [{
xtype: 'video',
url: ['aa.mp4'],
loop: true,
posterUrl: 'resources/images/cover.jpg'
}]
}
});
this is my code, but not display video
Please #Amit kumar can you try something like this,
Ext.define('myapp.view.Video', {
extend: 'Ext.Container',
xtype: 'myvideo',
requires: [
'Ext.Video'
],
config: {
layout: 'fit',
items: [
{
xtype: 'video',
enableControls: false,
x : 600,
y : 300,
width : 300,
height : 250,
url: 'app/images/VID.3GP',
loop: true,
posterUrl: 'app/images/transfers.png'
},
]
}
});
I hope this helps. :)
Im having a scrollview problem and it does not work for me. Even though i have read that the scrollview contentwidth and height 'auto' has a bug and i have scaled it to a large value, it does not scroll down my content. Below is my current code as of now.
var scrollView = Titanium.UI.createScrollView({
contentWidth:'300',
contentHeight:'2000',
top:0,
showVerticalScrollIndicator:true,
showHorizontalScrollIndicator:true
});
var view = Ti.UI.createView({
backgroundColor:'#336699',
borderRadius:10,
width:300,
height:2000,
top:10
});
scrollView.add(view);
var timePickerWin = Ti.UI.createWindow({
navBarHidden : true,
backgroundColor : '#fff'
});
var label = Ti.UI.createLabel({
text:'Pick Up Detail Form',
font: {fontFamily: 'Verdana', fontSize:30},
color: '#000',
top : '15dp'
});
var label2 =Ti.UI.createLabel({
text:'Enter Your Pickup Details Below',
font: {fontFamily: 'Verdana', fontSize:12},
color: '#000',
top : '50dp'
})
var startTime = Ti.UI.createPicker({
top : '335dp',
left : '25dp',
useSpinner : false,
selectionIndicator : true,
type : Ti.UI.PICKER_TYPE_TIME,
format24 : false,
height : '130dp',
// width:'auto'
});
var startDate = Ti.UI.createPicker({
top : '200dp',
left : '25dp',
useSpinner : false,
selectionIndicator : true,
type : Ti.UI.PICKER_TYPE_DATE,
format24 : false,
height : '130dp'
});
var nextButton = Ti.UI.createButton({
width : '150dp',
height : '45dp',
top : '465dp',
title : 'Next',
backgroundColor : '#294079',
font : {
fontSize : '18dp',
fontWeight : 'bold'
},
color : '#fff'
});
nextButton.addEventListener('click', function() {
timePickerWin.hide();
});
startTime.addEventListener('change', function(e) {
//alert("User selected date: " + e.value);
startPickerValue = e.value;
});
startDate.addEventListener('change', function(e) {
//alert("User selected date: " + e.value);
endPickerValue = e.value
});
var fullNameTextBox = Ti.UI.createTextField({
borderStyle : Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
width : '275dp',
height : '45dp',
//value : '',
top : '75dp',
color : '#000000',
hintText : 'Enter full name'
// backGroundColor:'gray',
});
var addressTextBox= Ti.UI.createTextField({
borderStyle : Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
width : '275dp',
height : '45dp',
//value : '',
top : '117dp',
color : '#000000',
hintText : 'Enter Address'
});
var MobileNo = Ti.UI.createTextField({
borderStyle : Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
width : '275dp',
height : '45dp',
//value : '',
top : '155dp',
color : '#000000',
hintText : 'Enter Mobile No.'
// backGroundColor:'gray',
});
timePickerWin.add(scrollView);
timePickerWin.add(label);
timePickerWin.add(label2);
timePickerWin.add(MobileNo);
timePickerWin.add(startTime);
timePickerWin.add(startDate);
timePickerWin.add(addressTextBox);
timePickerWin.add(fullNameTextBox);
timePickerWin.add(nextButton);
timePickerWin.open()
You need to add all the contents of the scroll view into the scroll view.
Change these lines:
timePickerWin.add(scrollView);
scrollView.add(label);
scrollView.add(label2);
scrollView.add(MobileNo);
scrollView.add(startTime);
scrollView.add(startDate);
scrollView.add(addressTextBox);
scrollView.add(fullNameTextBox);
scrollView.add(nextButton);
Hope this will work for you.
I have List of Checkboxes which i want to create using FOR LOOP.
I have following type of data.
Value 1 --> checkbox image
Value 2 -->
Value 3 -->
.
.
.
Value 15 --> checkbox Image
I am using following code for that but not getting how will it work??? Is it correct code??
var chkArray = ['Value 1', 'Value 2', 'Value 3', 'Value 4', 'Value 5', 'Value 6', 'Value 7', 'Value 8', 'Value 9', 'Value 10'];
AssessmentArray = function createChkBx() {
var chkBx = [];
for(var i in chkArray) {
var t = 80;
var checkbox = Ti.UI.createSwitch({
style : Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
title : chkArray[i],
value : true,
left : '20dp',
top : t + 30,
height : 25,
width : 'auto'
});
checkbox.addEventListener("change", function(e) {
Ti.API.info("The checkbox has been set to " + e.value);
});
chkBx.push(checkbox);
}
return chkBx;
}
var assessData = new AssessmentArray();
Now how should I add this to my Window??? This is specifically for Android only...
var AssessmentArray = function()
{
function AssessmentArray ()
{
//Pass the parent view inside which u want to add the check boxes and teh values as array
//gap or the distance between two checkboxes
this.addCheckBoxes = function(window, values, gap)
{
var t = 0;
var chkBx = [];
var i = 0;
for(i = 0; i < values.length; i++) {
var checkbox = Ti.UI.createSwitch({
style : Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
title : chkArray[i],
value : true,
left : '20dp',
top : i * gap,
height : 25,
width : 'auto'
});
checkbox.addEventListener("change", function(e) {
Ti.API.info("The checkbox has been set to " + e.value);
});
win.add(checkbox);
chkBx.push(checkbox);
}
return chkBx;
}
}
return AssessmentArray;
}();
var ass = new AssessmentArray();
ass.addCheckBoxes(Ti.UI.createWindow(), ['Value 1', 'Value 2', 'Value 3', 'Value 4', 'Value 5', 'Value 6'], 50);
try some thing like this.
U may prefer something like this,it can be used both in Ios and Android.
var win = Titanium.UI.createWindow({
title : 'app',
backgroundColor : 'white',
fullscreen : false,
navBarHidden : true,
layout : 'vertical',
height : Ti.UI.FILL,
width : Ti.UI.FILL
});
var checkboxview = Titanium.UI.createView({
width : Ti.UI.FILL,
height : Ti.UI.SIZE,
//layout : 'horizontal',
horizontalWrap : false,
//right : '10dp',
//left : '10dp',
layout : 'horizontal',
//backgroundImage : '/images/backblue.png'
backgroundColor : '#045FB4',
//top : '20dp',
//backgroundColor:''
});
win.add(checkboxview);
var checkbox = Ti.UI.createButton({
title : '',
top : 10,
right : 10,
width : 30,
height : 30,
borderColor : 'black',
borderWidth : 2,
borderRadius : 3,
backgroundColor : 'white',
backgroundImage : 'none',
color : '#fff',
font : {
fontSize : 25,
fontWeight : 'bold'
},
value : false //value is a custom property in this casehere.
});
checkboxview.add(checkbox);
var hinttext = Ti.UI.createLabel({
color : 'black',
font : {
fontSize : '17dp',
//fontWeight : 'bold',
fontFamily : 'Rod'
},
left : '10%',
text : 'user1'
});
checkboxview.add(hinttext);
//Attach some simple on/off actions
checkbox.on = function() {
this.backgroundColor = '#007690';
this.title = '\u2713';
this.value = true;
};
checkbox.off = function() {
this.backgroundColor = '#aaa';
this.title = '';
this.value = false;
};
checkbox.addEventListener('click', function(e) {
if (false == e.source.value) {
e.source.on();
alert(hinttext.text);
} else {
e.source.off();
}
});
var checkboxview1 = Titanium.UI.createView({
width : Ti.UI.FILL,
height : Ti.UI.SIZE,
//layout : 'horizontal',
horizontalWrap : false,
//right : '10dp',
//left : '10dp',
layout : 'horizontal',
//backgroundImage : '/images/backblue.png'
backgroundColor : '#045FB4',
//top : '20dp',
//backgroundColor:''
});
win.add(checkboxview1);
var checkbox1 = Ti.UI.createButton({
title : '',
top : 10,
right : 10,
width : 30,
height : 30,
borderColor : '#666',
borderWidth : 2,
borderRadius : 3,
backgroundColor : '#aaa',
backgroundImage : 'none',
color : '#fff',
font : {
fontSize : 25,
fontWeight : 'bold'
},
value : false,
//value is a custom property in this casehere.
});
checkboxview1.add(checkbox1);
var hinttext1 = Ti.UI.createLabel({
color : 'black',
font : {
fontSize : '17dp',
//fontWeight : 'bold',
fontFamily : 'Rod'
},
left : '10%',
width : Ti.UI.SIZE,
height : Ti.UI.SIZE,
text : "User2"
});
checkboxview1.add(hinttext1);
//Attach some simple on/off actions
checkbox1.on = function() {
this.backgroundColor = '#007690';
this.title = '\u2713';
this.value = true;
};
checkbox1.off = function() {
this.backgroundColor = '#aaa';
this.title = '';
this.value = false;
};
checkbox1.addEventListener('click', function(e) {
if (false == e.source.value) {
e.source.on();
alert(hinttext1.text);
} else {
e.source.off();
}
});