Related
I’ve created a FormPanel form for submitting some record in our database.
FormPanel Code:
Ext.define('MyApp.view.NIForm', {
extend: 'Ext.form.Panel',
config: {
id: 'NIForm',
items: [
{
xtype: 'panel',
items: [
{
xtype: 'textfield',
docked: 'left',
id: 'ORDNUM_39',
width: '95%',
label: 'Order#',
name: 'ORDNUM_39'
},
{
xtype: 'button',
docked: 'right',
itemId: 'browseOrder',
width: '5%',
text: '...'
}
]
},
{
xtype: 'textfield',
id: 'DESC',
style: 'margin-top:2px;',
label: 'Description',
name: 'DESC'
},
{
xtype: 'numberfield',
id: 'TNXQTY_39',
style: 'margin-top:2px;',
label: 'Quantity',
name: 'TNXQTY_39'
},
{
xtype: 'panel',
items: [
{
xtype: 'textfield',
docked: 'left',
style: 'margin-top:2px;',
width: '95%',
label: 'GL Code',
name: 'GLREF_39'
},
{
xtype: 'button',
docked: 'right',
width: '5%',
text: '...'
}
]
},
{
xtype: 'textfield',
id: 'REFDSC_39',
style: 'margin-top:2px;',
label: 'Reference',
name: 'REFDSC_39'
},
{
xtype: 'button',
action: 'niProcess',
itemId: 'mybutton3',
style: 'margin-top:6px;',
ui: 'confirm',
text: 'Process'
}
],
listeners: [
{
fn: 'onBrowseOrderTap',
event: 'tap',
delegate: '#browseOrder'
}
]
}
});
Now I want to get all textfields value on process button tap event, To get the formpanel value I've written following line of code.
var me = this;
var form = this.getNIForm();
var values = form.getValues();
var record = form.getRecord();
Can you tell me what am I doing wrong? Please explain.
Added another listener and it seems to work fine.
listeners: [{
fn: function () {
console.info('sdfsd');
},
event: 'tap',
delegate: '#browseOrder'
}, {
fn: function () {
console.info(this.getValues());
},
event: 'tap',
delegate: '#mybutton3'
}]
Here is the fiddle
If you want to retrieve particular TextField value use
Ext.getCmp('ORDNUM_39').getValue();
To get all form field values u can use like,
var form = this.getNav();
//if ur ref name inside ur controller is nav
This is my sencha touch 2 code:
Ext.define("10.view.Main", {
extend: 'Ext.form.Panel',
requires: ['Ext.form.FieldSet'],
config: {
title: 'Main',
scrollable: 'both',
editable: false,
items: [{
xtype: 'fieldset',
items: [{
xtype: 'radiofield',
name: 'color',
value: 'red',
label: 'Red',
checked: true
},
{
xtype: 'radiofield',
name: 'color',
value: 'blue',
label: 'Blue'
}]
}]
}
});
Here is the preview of the code. What I get is this:
I want to group my radio fields like given below.
How can I do it?
At the following link you can find an example. Hope it works for you.
http://sureshdotariya.blogspot.be/2013/05/how-to-group-radio-buttons-in-form.html
Greets
I need to change my title inside a formpanel
Here is my code
view.js
Ext.define('bluebutton.view.BlueButton.Loyalty', {
extend: 'Ext.Container',
xtype: 'loyaltycard',
requires: [
'bluebutton.view.BlueButton.TransactionList',
'bluebutton.view.BlueButton.MemberPopUp',
'bluebutton.view.BlueButton.MemberDetail',
'bluebutton.view.BlueButton.CouponMain',
'bluebutton.store.BlueButton.MemberList',
'bluebutton.store.BlueButton.CouponList',
'Ext.ux.keypad.Keypad',
'Ext.Img',
'Ext.carousel.Carousel'
],
config: {
// iconCls: 'add_black',
// title :'Loyalty Point',
styleHtmlContent: true,
cls: 'styledContent',
//
layout: 'hbox',
border: 3,
ui: 'round',
defaults: {
margin : '10 10 10 10',
padding : 10
},
items :[
{
flex: 1,
xtype :'formpanel',
id:'loyaltyform',
items :[
{
xtype: 'fieldset',
cls :'containerRadious' ,
title: 'Welcome, new member ~<i><u>Kenny</u></i>',
defaults: {
labelWidth: '35%',
style: 'font-size:1.0em'
},
items: [
{
xtype: 'image',
src: 'resources/images/user3.png',
height: 100,
margin:20
},
{
xtype: 'textfield',
name : 'Name',
label: 'Name',
value :'Kenny Chow',
readOnly: true
},
{
xtype: 'textfield',
name : 'Age',
label: 'Age',
value :'20',
readOnly: true
},
{
xtype: 'textfield',
name : 'Point',
label: 'Point Available',
value :'50',
id :'point',
readOnly: true
},
{
xtype: 'textfield',
name : 'lastVisited',
label: 'Last Visited',
id :'lastVisited',
value :'27/12/2012 11:53 AM',
readOnly: true
},
{
xtype:'button',
text: 'Scan',
width : '100%',
id: 'btnScan',
},
]
}
]
},
{
flex: 2,
xtype :'carousel',
cls :'containerRadious' ,
items :[
{
xtype :'keypad',
layout: {
type: 'hbox',
pack: 'center'
},
},
{
xtype:'couponlistcard'
}
]
}
],
}
});
Controller
onbtnAddClick: function (e) {
var loyaltyform = Ext.getCmp('loyaltyform');
var pointAvalaible = Ext.getCmp('point').getValue();
var keyPadValue = Ext.getCmp('keypad_value').getValue();
var consumerID = Ext.getCmp('keypad_value').getValue();
Ext.getCmp('loyaltyform').setTitle('Changed Title');;
}
but i get this error.
**Uncaught TypeError: Object [object Object] has no method 'setTitle'**
Anyone face this problem before? please help
The reason you get the error is because a formpanel has no method setTitle(). To change the title you have to call the setTitle() method of your fieldset, which is inside your formpanel. So give you fieldset an ID and use this:
Ext.getCmp('yourFieldsetID').setTitle('Changed Title');
Check the methods you can use for a panel en fieldset in the Sencha docs:
http://docs.sencha.com/touch/2-1/#!/api/Ext.form.Panel
http://docs.sencha.com/touch/2-1/#!/api/Ext.form.FieldSet
Good luck!
I have a controller function for my list that is being called when the list item is tapped, within this function I am trying to update a button component's text as follows:
var button = this.getPopupButton();
//reference popupButton is set within controller
button.setText('Test');
The function seems to work, and console.info(button.getText()); is reporting the update, but within the UI the text remains the default as set in the config.
Is this a bug? Or am I doing something wrong here?
These buttons are within a segmented button object:
items: [
{
xtype: 'segmentedbutton',
flex: 1,
allowDepress: true,
layout: {
align: 'stretchmax',
pack: 'center',
type: 'hbox'
},
items: [
{
xtype: 'button',
flex: 2,
id: 'PopUpButton',
text: 'Pop up test!'
},
{
xtype: 'button',
flex: 1,
id: 'Mini',
ui: 'action',
text: 'Mini test!'
}
]
}
]
Update: It might help to know that these buttons are segmented buttons within a datalist toolbar, see complete code below:
Ext.define('TestApp.view.ItemList', {
extend: 'Ext.dataview.List',
alias: 'widget.ItemList',
config: {
loadingText: 'Loading items...',
store: 'ItemStore',
cls: [
'ItemList'
],
itemTpl: Ext.create('Ext.XTemplate',
'<div>{itemData}</div>',
),
plugins: [
{
xtype: 'component',
refreshFn: function(plugin) {
//console.info('pull to refresh!');
var store = plugin.up().getStore();
console.log(store);
},
itemId: 'PullToRefresh',
loadingText: 'Loading...',
pullRefreshText: 'Pull down to refresh...',
releaseRefreshText: 'Release to refresh...',
snappingAnimationDuration: 200,
type: 'pullrefresh'
},
{
autoPaging: true,
loadMoreText: 'Load more...',
noMoreRecordsText: 'No more data in feed',
type: 'listpaging'
}
],
items: [
{
xtype: 'toolbar',
docked: 'top',
id: 'MediaToolbar',
ui: 'light',
zIndex: 3,
items: [
{
xtype: 'button',
flex: 1,
cls: 'SourceSelectButton',
id: 'SourceSelectButton',
minWidth: '',
width: 83,
iconCls: 'ItemSource1',
text: ''
}
]
},
{
xtype: 'toolbar',
docked: 'top',
height: '45px',
id: 'FeedSelectorBar',
ui: 'light',
zIndex: 3,
items: [
{
xtype: 'segmentedbutton',
flex: 1,
id: 'FeedSelectorButtons',
allowDepress: true,
layout: {
align: 'stretchmax',
pack: 'center',
type: 'hbox'
},
items: [
{
xtype: 'button',
flex: 2,
id: 'PopUpButton',
text: 'Pop up test'
},
{
xtype: 'button',
flex: 1,
id: 'TesterButton',
ui: 'action',
text: 'Latest'
}
]
}
]
}
]
}
});
Update #2: After further testing in the console using Ext.ComponentQuery.query() I have found that I can manipulate all buttons in my application EXCLUDING the ones placed within the dataview list/toolbar.
Try following changes, this is working for me:-
Give 'id' to your segmented button.
{
xtype: 'segmentedbutton',
id: 'hii', // give id to your segmented button
allowDepress: true,
layout: {
align: 'stretchmax',
pack: 'center',
type: 'hbox'
},
items: [
{
xtype: 'button',
id: 'PopUpButton',
text: 'Pop up test!'
},
{
xtype: 'button',
id: 'Mini',
ui: 'action',
text: 'Mini test!'
}
]
}
Use this code inside controller on 'itemtap' of your list.
var button = Ext.getCmp('hii'); // use your segmented button id here
button.getAt(1).setText('Test');
This problem was solved by moving my Ext.dataview.List into a Ext.panel container. This seems to be a bug with sencha touch 2.0.1.1. Any elements that I manipulated within my dataview.List toolbar component would report as updated in the console but would not show as updated in the UI. The same problem occured in both Chrome, Safari and on an Android device packaged as a phonegap project.
Very new to extjs 4.0. So i could be phrasing this incorrectly.
I have a layout with a series of nested panels. One of these panels is a form panel which i intend to use loadRecord to fill with data. Most examples i've seen using something like the following to load the records.
testForm.getForm().loadRecord(app.formStore);
However you will see below that my formpanel is nested. So how do i load the form in order to load record
title: 'Job Summary',
items: [
{
xtype: 'form',
id: 'formJobSummary',
layout: {
align: 'stretch',
type: 'hbox'
},
bodyPadding: 10,
title: '',
url: '/submit.html',
flex: 1,
dockedItems: [
{
xtype: 'toolbar',
flex: 1,
dock: 'bottom',
items: [
{
xtype: 'button',
text: 'Submit'
},
{
xtype: 'button',
text: 'Cancel'
}
]
}
],
items: [
{
xtype: 'panel',
flex: 1,
items: [
{
xtype: 'radiogroup',
width: 400,
fieldLabel: 'Job Type',
items: [
{
xtype: 'radiofield',
boxLabel: 'Fix Price'
},
{
xtype: 'radiofield',
boxLabel: 'Production'
}
]
},
{
xtype: 'textfield',
fieldLabel: 'Quoted Price'
},
{
xtype: 'textfield',
fieldLabel: 'Client PO'
},
{
xtype: 'textfield',
fieldLabel: 'Job Quatity'
},
{
xtype: 'textfield',
fieldLabel: 'Files Over'
},
{
xtype: 'textfield',
fieldLabel: 'Previous JobId'
},
{
xtype: 'textfield',
fieldLabel: 'Estimate'
}
]
},
{
xtype: 'panel',
flex: 1
},
{
xtype: 'panel',
layout: {
align: 'stretch',
type: 'hbox'
},
flex: 1
}
]
}
]
},
Here is the code which shows how to populate data in the formpanel:
Ext.onReady(function(){
//Define a model with field names mapping to the form field name
Ext.define('UserModel', {
extend: 'Ext.data.Model',
fields: ['first', 'last']
});
//Create an instance of the model with the specific value
var user = Ext.create('UserModel', {
first: 'Ajit',
last: 'Kumar'
});
var form = Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title: 'Simple Form',
bodyPadding: 5,
width: 350,
layout: 'anchor',
defaults: {
anchor: '100%'
},
// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first', //this name must match with the field name in the model
allowBlank: false
},{
fieldLabel: 'Last Name',
name: 'last',
allowBlank: false
}],
// Reset and Submit buttons
buttons: [{
text: 'Reset',
handler: function() {
this.up('form').getForm().reset();
}
}, {
text: 'Submit',
formBind: true,
disabled: true,
handler: function() {
}
}]
});
form.loadRecord(user);
});
So, the steps are:
Define a model, which must extend Ext.data.Model as the stores and
form expect the date to be in the model format
Create a form panel
Create an instance of the model with the data
Load the data in the form using the model instance