I am creating one window in extjs 3. In window I have a panel in which I am including item with afterrender. I place some button on window including cancle. after clicking on window close button or cancel buttonMy app getting stuck. What will be the possible reason.
My Panel Code :
{
xtype: 'panel',
title : "Records",
bodyStyle: 'background: #dfe8f6;border:#dfe8f6;',
id:'AlteredRecord',
region: 'center',
layout:{
type: 'vbox',
pack: 'start',
align: 'stretch'
},
items:[],
listeners:{
afterrender: function(){
debugger;
var grid = Ext.getCmp('GRID');
var record = grid.getSelectionModel().getSelections();
var actionRecItemsLen = record.length;
var multirfchelper = Ext.getCmp('multirfchelper');
var rec = Ext.getCmp('AlteredRecord');
var recItem = rec.items.items;
var clsName = new Recordrfc(),
for(var i=0;i<actionRecItemsLen; i++){
var sub = record[i].data.USUB;
var clsName = new Recordrfc();
recItem.push(clsName);
this.doLayout();
}
}
},
}
YUI().use('node-event-delegate', 'panel', function(Y){
(function createNewMetadataPanel() {
console.log('creating');
var panelContent = Y.Node.create('<div/>').set('id', 'newMetadataPanelContent');
var widget = Y.Node.create('<div/>').addClass('yui3-widget-bd');
var form = Y.Node.create('<form/>');
var set = Y.Node.create('<fieldset/>');
form.append(set);
widget.append(form);
panelContent.append(widget);
var metaDataName = Y.Node.create('<input type="text"name="metadataName"id="metadataName"placeholder="Please enter a new metadata field">');
var metaDataValue = Y.Node.create('<input type="text"name="metadataValue"id="metadataValue"placeholder="Please enter a new metadata value">');
set.append(metaDataName);
set.append(metaDataValue);
panel2 = new Y.Panel({
srcNode : '#newMetadataPanelContent',
headerContent: 'Add A New Member',
width : 250,
zIndex : 5,
centered : true,
modal : true,
visible : false,
render : false
});
panel2.addButton({
value: 'Create Member',
section: Y.WidgetStdMod.FOOTER,
action : function (e) {
e.preventDefault();
addMetaData();
}
});
});
When this code runs, the panel appears as soon as the page loads, at the bottom of the screen. It is not even centered. Shouldn't render : false prevent it from being added to the DOM, and visible : false prevent it from being shown?
Give you #newMetadataPanelContent element the CSS property display:none. Y.Panel will un-hide it when you show your panel.
I m really new in ExtJS and try to reuse some existing content produced with jQuery. Is there a simple way to add existing components as items in a container?
My code looks something like this
var rect = $('<div>', {
'id' : 'rectangle'
}).text("this is a rectangle.");
var cont = new Ext.Container({
layout : 'absolute',
width : 400,
height : 300,
renderTo : Ext.getBody(),
border : 1,
style : {
borderColor : '#000000',
borderStyle : 'solid',
borderWidth : '1px'
},
items : [{
html : rect
}]
});
Simply grab the html of that item with .html()
items : [{
html : rect.html()
}]
The best way is to use contentEl. Note that this moves the element inside the component, so when the component is destroyed, so is the element.
items: {
contentEl: rect.get(0) // Grab a reference to the DOM element
}
If you want to make a copy, of the element before moving it, you could call:
rect.clone.get(0);
I want to get the password. A simple text input dialog box. Any simple way to do this?
In iPhone it creates like this.
style : Ti.UI.iphone.AlertDialogStyle.SECURE_TEXT_INPUT
But in android how can I do thi??
Use the androidView property in a UI.AlertDialog and add a TextField.
Currently Appcelerator does not provide such facility. But you can do it in a simple way by using a view, textField and button as follows
var vwAlert = Ti.UI.createView({
backgroundColor : '#311919',
width : '90%',
height : '40%',
layout : 'vertical',
borderRadius: 5
});
var lblMessage = Ti.UI.createLabel({
text : 'Alert',
top : 10,
color : 'white',
font : {fontWeight : 'bold', fontSize : '16'}
});
var textField = Ti.UI.createTextField({
width : '90%',
top : '20',
passwordMask: true,
hintText : 'Enter your text here',
borderStyle : Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
returnKeyType : Ti.UI.RETURNKEY_RETURN,
maxLength : 70
});
var btnOK = Ti.UI.createButton({
title : 'OK',
width : '43%',
top : '25',
font : {fontWeight : 'bold', fontSize : '16'}
});
vwAlert.add(lblMessage);
vwAlert.add(textField);
vwAlert.add(btnOK);
The above view will look like an alert dialog box since it's customized one. This will do the trick :)
you need an EditText with android:inputType="textPassword"
EditText tf = new EditText(context);
tf.setTransformationMethod(PasswordTransformationMethod.getInstance());
or in xml
android:inputType="textPassword"
i create simple table view application that display some data in tableViewRow.. for now, i only use fixed measurement here's my code :
function addTableView(){
var tableData = [];
for (var i = 0; i<10; i++){
var row = Ti.UI.createTableViewRow({
className:'forumEvent', // used to improve table performance
rowIndex:i, // custom property, useful for determining the row during events
selectionStyle:0,
});
var checkBox = Ti.UI.createSwitch({
style:Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
value:false,
left:5
});
var lblField = Ti.UI.createLabel({
realValue: 'Value',
text:'Field : Value',
font:{fontFamily:'Arial', fontSize:DefaultFontSize, fontWeight:'normal'},
color:'#222',
top:5,
left:80
});
var lblField2 = Ti.UI.createLabel({
realValue: 'Value',
text:'Field : Value',
font:{fontFamily:'Arial', fontSize:DefaultFontSize, fontWeight:'normal'},
color:'#222',
top:35,
left:80
});
var lblField3 = Ti.UI.createLabel({
realValue: 'Value',
text:'Field : Value',
font:{fontFamily:'Arial', fontSize:DefaultFontSize, fontWeight:'normal'},
color:'#222',
top:65,
left:80
});
row.add(checkBox);
row.add(lblField);
row.add(lblField2);
row.add(lblField3);
checkBox.addEventListener('click',function(e){
alert(checkBox.toImage().width);
});
tableData.push(row);
}
var tempTable = Titanium.UI.createTableView({
data:tableData,
editable: Titanium.Platform.osname === 'iphone' ? true : false,
name:'Picking table'
});
return tempTable;
}
in bigger screen, it can display perfectly like this:
but if i change my emulator screen into QVGA, it can't display like before, like this:
has anyone know how to create relative layout, so it can display perfectly in both small and large screen? thanks before..
var _p = function(densityPixels) {
return densityPixels * Ti.Platform.displayCaps.dpi / 160;
}
var logoView = Ti.UI.createView({
backgroundImage : '/images/logo.png',
top : _p(100),
width : _p(200),
height : _p(360)
});
Michael, Take a look at the following links, it might also be useful for you
Titanium handling different resoutions
http://developer.appcelerator.com/blog/2011/06/new-defaults-for-android-layouts-in-1-7.html
https://wiki.appcelerator.org/display/guides/Titanium+2.0+Layout+Changes
Using percents will definitely help. But you should look into the layout property. http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.View-property-layout
You can add a layout:'horizontal' property to the row
var row = Ti.UI.createTableViewRow({
className:'forumEvent', // used to improve table performance
rowIndex:i, // custom property, useful for determining the row during events
selectionStyle:0,
layout:'horizontal'
});
With this property set, objects will stack immediately next to each other from left to right.
Then place the three labels in a container with layout:'vertical' and a smaller left property to account for padding. Also, remove the left property from the labels (this will be taken care of for all by the parent container)
var labelContainer = Ti.UI.createView({
layout:'vertical',
height:Ti.UI.SIZE,
width:Ti.UI.SIZE,
left:5 //adjust this accordingly
})
var lblField = Ti.UI.createLabel({
realValue: 'Value',
text:'Field : Value',
font:{fontFamily:'Arial', fontSize:DefaultFontSize, fontWeight:'normal'},
color:'#222',
top:5,
});
var lblField2 = Ti.UI.createLabel({
realValue: 'Value',
text:'Field : Value',
font:{fontFamily:'Arial', fontSize:DefaultFontSize, fontWeight:'normal'},
color:'#222',
top:5,
});
var lblField3 = Ti.UI.createLabel({
realValue: 'Value',
text:'Field : Value',
font:{fontFamily:'Arial', fontSize:DefaultFontSize, fontWeight:'normal'},
color:'#222',
top:5,
});
labelContainer.add()
row.add(checkBox);
labelContainer.add(lblField);
labelContainer.add(lblField2);
labelContainer.add(lblField3);
row.add(labelContainer);
The row will add the entire label container (which stacks the labels directly below each other from top to bottom) directly next to the checkbox. The width and height property of TI.UI.SIZE force the object to have the width and height of it's children.
Once I began utilizing the layout property coupled with TI.UI.SIZE/Ti.UI.FILL (takes the size of it's parents) layouts became much easier :) hope this helps!
Not sure what you are working with, but you can change the layout very nice with the responsive design technique.
Take a look at this link:
http://www.html5rocks.com/en/mobile/responsivedesign/
I'm sure you'll find some good and nifty tricks.
You can use percentage value to declare the control's width and height. Just like
var checkBox = Ti.UI.createSwitch({
style:Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
value:false,
left:'2%'
});
var lblField = Ti.UI.createLabel({
realValue: 'Value',
text:'Field : Value',
font:{fontFamily:'Arial', fontSize:DefaultFontSize, fontWeight:'normal'},
color:'#222',
top:5,
left:'40%',
width :'80%'
});
making the measurement in percentage will be effective for all screen size, it'll automatically adjust with the screen size