I am just a beginner for sencha touch technology. Now I got a simple question. How can I adjust the fieldset width and align to center only? I only get the fieldset which are setting for fullscreen only. Please guild me a solution.
Here my javascript
items:[{
xtype:'fieldset',
title :'Please enter your password key',
centered: true,
width: 30,
items:[{
xtype: 'passwordfield',
name : 'password',
label: 'password',
width : 400,
}]
}],
Don't use Hard Coded values in the code, that's bad when you making the application for multiple resolution
Please try the code shown below it works for me
layout: {
type: 'vbox',
pack: 'center',
align: 'center'
},
items:[{
xtype:'fieldset',
title :'Please enter your password key',
//centered: true,
//width: 30,
items:[{
xtype: 'passwordfield',
name : 'password',
label: 'password',
//width : 400,
}]
}]
Thanks
try this,
items:[{
xtype:'fieldset',
title :'Please enter your password key',
centered: true, // using this you can align fieldset to center
width: '80%', // using this you can give any width to it in percentage
items:[{
xtype: 'passwordfield',
name : 'password',
label: 'password',
}]
}],
OR
items:[{
xtype:'fieldset',
title :'Please enter your password key',
// centered: true,
margin: '10%',
width: '80%',
height: '20%',
items:[{
xtype: 'passwordfield',
name : 'password',
label: 'password',
}]
}],
hope this may help you.
try
style: {
textAlign: 'center',
width: '100px' }
in ST2
place it inside the container like this
{
xtype: 'container',
centered: true,
items:{
xtype: 'fieldset',
items :[
//your items here
]
}
}
Related
I have the following form defined:
Ext.define('Admin.view.messaging.MsgDataForm',{
extend: 'Ext.window.Window',
xtype: 'msgdataform',
title: 'Compose Practice Message',
defaultFocus: '[name=subject]',
modal: true,
layout: 'fit',
closable: false,
width: 700,
items: [{
xtype: 'form',
layout: 'anchor',
fieldDefaults: {labelWidth: 60,labelAlign: 'right',anchor: '100%'},
padding: 10,
items: [{
xtype: 'fieldcontainer',
layout: 'hbox',
fieldLabel: 'Date',
items: [{
xtype: 'datefield',
name: 'msgdate',
format: 'F j, Y g:i A',
readOnly: true,
flex: 1,
margin: '0 5 0 0'
},{
xtype: 'combo',
name: 'priority',
fieldLabel: 'Priority',
store: Ext.create('Ext.data.Store',{
fields: ['priorityval','priority'],
data: [{'priorityval':0,'priority':'Low'},{'priorityval':1,'priority':'Normal'},{'priorityval':2,'priority':'High'}]
}),
queryMode: 'local',
displayField: 'priority',
valueField: 'priorityval',
width: 160
}]
},{
xtype: 'textfield',
name: 'subject',
fieldLabel: 'Subject'
},{
xtype: 'textarea',
id: 'editor1',
name: 'message',
style: {background: '#E1E1E1'}
}]
}],
buttons:[{
text: 'Send',
handler: 'onClick_btnMsgDataSend'
},{
text: 'Cancel',
handler: 'onClick_btnMsdDataCancel'
}]
});
The height of the textarea is not properly sized when the window is rendered. Additionally, when the window is resized, only the width of the textarea is resized - not the height. Attempting to listen to the resize event on the text area after the window is resized but it isn't fired. Any ideas? Thanks.
You width is properly resized because of the default configuration of 'anchor:100%'.
On the other hand, the height it's a little bit more difficult, the idea that comes to me now is try to with a particular css (using property cls) manipulate the height (height:'100%') or something like that. Because you can't use flex in a textarea, you could also nest de textarea in a panel and use flex on it to try it.
Check the documentation of textarea of ExtJS5 for other posible solutions:
http://docs.sencha.com/extjs/5.0/5.0.1-apidocs/#!/api/Ext.form.field.TextArea
There is a form panel, and it acts like a container. Then i have another form panel, where i am adding a textfield and a button. I need this form panel to be in the center of the screen. And the button bottom of the textbox (I should be able to position it where ever in the form. Like Absolute layout).
My code is as follows; and it doesn't work the way i want it to. can some one look into this
Ext.define('MyApp.view.MyView', {
extend: 'Ext.form.Panel',
alias: 'widget.myview',
frame: true,
height: 800,
hidden: false,
hideMode: 'visibility',
id: 'myviewid',
autoScroll: false,
bodyPadding: 5,
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'form',
height: 330,
width: 400,
layout: {
type: 'absolute'
},
bodyPadding: 10,
title: 'Care Fusion User Login',
anchor: '250 250',
items: [{
xtype: 'textfield',
id: 'name',
width: 233,
name: 'name',
fieldLabel: 'Nmae',
growMax: 200,
x: 10,
y: 30
} {
xtype: 'button',
height: 30,
width: 256,
text: 'Click',
x: 240,
y: 110
}]
}]
});
me.callParent(arguments);
}
});
Try to use following layout in your outer container:
layout: {
align: 'middle',
pack: 'center',
type: 'hbox'
},
then you inner form will be placed in the center of this outer form.
I am trying to build a multi log in system using Sencha Touch 2, were the user have to select if he is an AGENT OR FOLLOWER. so far i have been able to come up with a simple log in form. with no function. my code is just like this:
Ext.define("ikhlas.view.login", {
extend: 'Ext.Panel',
xtype: 'loginpanel',
config:{
title: 'Login',
iconCls: 'more',
styleHtmlContent: true,
layout:{
type: 'vbox',
},
items: [
{
xtype: 'fieldset',
iconCls: 'add',
items: [
{
xtype: 'emailfield',
name: 'email',
placeHolder: 'Username'
},
{
xtype: 'passwordfield',
name: 'password',
placeHolder: 'Password'
},
{
xtype: 'selectfield',
label: 'User Type',
options: [
{text: 'Agent', value: '0'},
{text: 'Follower', value: '1'}
]
}
]},
{
xtype: 'button',
text: 'LogIn',
ui: 'confirm',
width: '40%',
height: '7%',
flex: 1,
left: '55%',
action: 'submitContact'
},
{
xtype: 'button',
text: 'Forgot Username',
ui: 'confirm',
width: '41%',
height: '4%',
top: '90%',
flex: 1,
action: 'ForgotUsername'
},
{
xtype: 'button',
text: 'Forgot Password',
ui: 'confirm',
width: '40%',
height: '4%',
top: '90%',
flex: 1,
left: '47%',
action: 'ForgotPassword'
},
]}
});
Now i will like to know how do i validate the user information (user name and password) from an API(a url will be given) so as to confirm the login username and password are correct before they can be allowed to access the application. Secondly i will like to throw an error message if the username or password is incorrect.
It's obvious that you have to authenticate server-side. Assuming that you've already had one, so the remaining is not very difficult.
The most simple way is just send an Ext.Ajax.request:
Ext.Ajax.request({
url: your_API_url,
params: {
username: your_username_from_formpanel,
password: your_password_from_formpanel
},
timeout: 10000, // time out for your request
success: function(result) {
// here, base on your response, provide suitable messages
// and further processes for your users
},
failure: function(){
Ext.Msg.alert("Could not connect to server.");
}
});
Note: for security reasons, you should encrypt your user's password before sending it to server.
I want to add an account Info section to my app, it would contain name and role of the current user
In my server side i can get those infos, but i dont know how to send them from server to my form and display them in a displayfield
The only way I know of dynamically populating data from sever is in grids using store.
How can i do this please?
my extjs code:
xtype: 'form',
border: false,
frame: true,
height: 100,
width: 400,
layout: 'column',
items: [
{ columnWidth: .5,
border: false,
frame: true,
height: 50,
defaults: { labelStyle: 'font-size:11px' },
items: [{
xtype: 'displayfield',
id: 'Customer',
fieldLabel: 'Customer',
value: '<span style="color:blue;font-size:9px">IBM</span>'
}]
}, {
columnWidth: .5,
border: false,
frame: true,
margin: '0 0 0 8',
height:50,
defaults: { labelStyle: 'font-size:11px' },
items: [
{
xtype: 'displayfield',
id: 'role',
fieldLabel: 'Role',
value: '<span style="color:blue;font-size:9px">Admin</span>'
}
]
Feel free to ask for more details if its not clear enough.
Thank you
Use form.loadRecord(record). Any fields whose name mathches your model fields will be set.
To get the record you can use MyModel.load() see the sencha guides for this http://docs.sencha.com/ext-js/4-0/#!/guide/data .
I'm trying to get two buttons to show up next to each other in an Ext.Panel.
The .js code:
ProductView = new Ext.Panel({
styleHtmlContent: true,
scroll: 'vertical',
items: [
new Ext.DataView({
scroll: false,
store: productStore,
tpl: productTpl,
itemSelector: 'div.productView',
}),
{
xtype: 'button',
ui: 'blue-round',
height: '60',
text: 'Buy',
handler: function() {
// ...
}
},{
xtype: 'button',
ui: 'green-round',
height: '60',
text: 'Share',
handler: function() {
// ...
}
}
]
});
The SCSS code:
#include sencha-button-ui('green', $branded-green);
#include sencha-button-ui('blue', $branded-blue);
This yeilds buttons that look like this:
I thought this may have been a sizing issue, but adding the width: '40%', attribute to each button only yields:
However, I'm wanting the buttons to sit next to each other instead of be stacked on top of each other. Any suggestions?
UPDATE:
I tried to take advantage of the align: property, but this did nothing:
{
xtype: 'button',
ui: 'blue-round',
height: '60',
width: '40%',
align: 'left',
text: 'Buy',
handler: function() {
// ...
}
},{
xtype: 'button',
ui: 'green-round',
height: '60',
width: '40%',
align: 'right',
text: 'Share',
handler: function() {
// ...
}
}
You could wrap the buttons in a panel and set that panel's layout to hbox. That is basically what you did with the toolbar, but it won't have the toolbar styling if you don't want that. also, fyi with the hbox layout, you can specify 'flex' config options to components which determine how they are sized relative to each other
Okay, so the answer so far has been to wrap the whole thing in a toolbar. (I originally didn't do so, as these buttons are not to be docked. They are to show up under a scrolling DataView.) I had to squeeze the buttons in a bit as they were over extending past the edge of the toolbar and being cut off. I also had to change the height of the toolbar to accommodate the larger buttons and make its background transparent.
The button portion of the .js code now looks like:
{
xtype: 'toolbar',
height: '62',
items: [
{
xtype: 'button',
ui: 'blue-round',
height: '60',
width: '48%',
text: 'Buy',
handler: function() {
// ...
}
}, {xtype: 'spacer'}, {
xtype: 'button',
ui: 'green-round',
height: '60',
width: '48%',
text: 'Share',
handler: function() {
// ...
}
}
]
}
{ xtype : 'panel',
layout: { type: 'hbox', },
items:[
{ xtype: "button", text: "Login", iconCls: 'action',
ui:"confirm", itemId:"sendButton", height: '60', width: '48%', //flex:3, },
{xtype: 'spacer'}, {
{xtype: "button",
text: "Reset", iconCls: 'action', ui:"decline",
itemId:"resetButton", height: '60', width: '48%', //flex:3, }, ], },
You can use hbox layout to render the buttons horizontally using Sencha.
This is the sample code which works fine,
{ xtype :'panel',
layout: { type: 'hbox', },
items:[
{ xtype: "button", text: "Login", iconCls: 'action',
ui:"confirm", itemId:"sendButton", height: '60', width: '48%', //flex:3, },
{xtype: 'spacer'},
{xtype: "button", text: "Reset", iconCls: 'action', ui:"decline",
itemId:"resetButton", height: '60', width: '48%', //flex:3, }, ], },