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 .
Related
I'm trying to load a list within a floating panel. It works with static values but it doesn't load using a json file.
If I tried this and it works:
var panel = Ext.create('Ext.Panel', {
left: 0,
padding: 10,
width: 300,
height: 300,
modal: true,
hideOnMaskTap: true,
layout: 'fit',
items: [
{
xtype: 'list',
scrollable: true,
ui: 'round',
height: '100%',
store: {
fields: ['name'],
data: [
{name: 'Cowper'},
{name: 'Everett'},
{name: 'University'},
{name: 'Forest'}
]
},
itemTpl: '{name}'
}
]
});
But when I try to call a Json file, it doesn't work. This is the panel:
var panel = Ext.create('Ext.Panel', {
left: 0,
padding: 10,
width: 300,
height: 300,
modal: true,
hideOnMaskTap: true,
layout: 'fit',
items: [
{
xtype: 'list',
scrollable: true,
ui: 'round',
height: '100%',
store: 'storeCardStatus',
itemTpl: '{Card_Status}'
}
]
});
This is the store:
Ext.define('MyApp.store.storeCardStatus',{
extend: 'Ext.data.Store',
config: {
model: 'MyApp.model.modelCardStatus',
autoLoad: true,
proxy: {
type: 'ajax',
url : 'card_status.json',
reader: 'json'
}
}
});
This is the model:
Ext.define('MyApp.model.modelCardStatus', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'Card_Status', type: 'string'}
]
}
});
This is the Json file:
[
{"Card_Status": "Completed"},
{"Card_Status": "Issued"},
{"Card_Status": "In Use"}
]
This has nothing to do with local data vs JSON file. You simply aren't setting the predefined store correctly on the list view. You want to add an alias to the store definition, and define the store as an object with type of your store alias (minus the prefix). Here is a fiddle:
https://fiddle.sencha.com/#fiddle/2bh
(Look specifically at Line #3, and #45)
I would recommend always creating stores via alias like this, it easier allows for management and destruction, and each store created will always be a new instance. Creating stores ahead of time (for example, via Ext.create) and then assigning them to components introduces a huge risk of tying the same store to 2+ dataviews inadvertently.
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
]
}
}
So I'm using ExtJS 4.1. I have a viewport that contains two items. They are stacked correctly but I want to put some space between them. Margins don't seem to work.
var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
Ext.onReady(function() {
Ext.QuickTips.init();
window.formPanel = Ext.widget({
bodyPadding: '5 5 0',
collapsible: false,
defaultType: 'textfield',
frame: true,
id: 'formPanel',
layout: 'form',
renderTo: '',
title: 'Spring Demo 3 (Lookup Transfer Request)',
url: contextPath + '/users/ajax',
width: 450,
xtype: 'form',
buttons: [{
text: 'Check Status',
scope: this,
handler: function() {
formPanel.getForm().submit({
success: function(res, req) {
}
});
}
}],
fieldDefaults: {
msgTarget: 'side',
labelWidth: 105
},
items: [{
afterLabelTextTpl: required,
allowBlank: false,
fieldLabel: 'Username',
name: 'username',
value: ''
}, {
afterLabelTextTpl: required,
allowBlank: false,
fieldLabel: 'TXID',
name: 'txid',
value: ''
}]
});
window.resultsPanel = Ext.widget({
items: [{
id: 'labMessage',
margin: '0 0 0 10',
text: 'Waiting....',
xtype: 'label'
}],
title: 'Results',
xtype: 'panel'
});
window.viewPort = Ext.widget({
items: [formPanel, resultsPanel],
layout: {
align: 'center',
pack: 'center',
type: 'vbox'
},
margins: '10 10 10 10',
padding: '10 10 10 10',
renderTo: 'container',
xtype: 'viewport'
});
});
The Ext.layout.container.VBox layout has the padding and defaultMargins configs that will apply the respective styles to child components. I have no idea why the naming is inconsistent, but that's what the docs say.
Looking at your sample code, it looks like you're applying your margins to the wrong components. If you want spacing between your panels, put the margin/padding settings on the panels themselves instead of on their container.
window.resultsPanel = Ext.widget({
xtype: "panel",
title: "Results",
margin: "10 0 0 0", // Same as CSS ordering (top, right, bottom, left)
items: [{
xtype: "label",
id: "labMessage",
margin: "0 0 0 10",
text: "Waiting..."
}]
});
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'm trying to create a detailed line item form in my application. I created a subclass of Ext.Panel with three form controls in it. Then I started adding that control to my viewable Panel. Only one ever shows up. The others are set to a height of 0. Here's the code:
app.views.Forms.materialsLineItem = Ext.extend(Ext.Panel, {
layout: {
type: 'hbox',
pack: 'center'
},
items: [
new Ext.form.Spinner({
width: 150
}),
new Ext.form.Text({
placeHolder: 'Description',
width: 400
}),
new Ext.form.Text({
placeHolder: 'Price',
width: 150
})
]
});
app.views.Forms.Materials = new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
new app.views.Forms.materialsLineItem(),
new app.views.Forms.materialsLineItem(),
new app.views.Forms.materialsLineItem()
]
});
Hmm it works if you declare your form components using object literals like so:
app.views.Forms.materialsLineItem = Ext.extend(Ext.Panel, {
layout: {
type: 'hbox',
pack: 'center'
},
items: [{
xtype: 'spinnerfield',
width: 150
}, {
xtype: 'textfield',
placeHolder: 'Description',
width: 400
}, {
xtype: 'textfield',
placeHolder: 'Price',
width: 150
}]
});
My guess is that your way only created the fields once and sencha doesn't let you add the same component to multiple containers, so the first two panels didn't actually have anything in them.
If you look at the elements in Chrome's JavaScript console you should see the first two panels are just empty divs.