I have a grid panel and when the user selects the row and clicks the edit button or dbl clicks the row, I want to send the selected row to the new window. But I am having trouble in sending the data.
Here is my grid panel. (List.js)
Ext.define('MyApp.view.main.List', {
extend: 'Ext.grid.Panel',
xtype: 'mainlist',
require: [ 'MyApp.view.student.StudentForm' ],
title: 'Student Records',
scrollable: true,
margin: 20,
layout: {
type: 'vbox',
align: 'stretch'
},
reference: 'studentGrid',
frame: true,
collapsible: true,
store: 'StudentStore',
collapsible: true,
columns: [
{
text: 'Name',
dataIndex: 'name',
flex: 1
},
{
text: 'Address',
dataIndex: 'address',
flex: 1
},
{
text: 'Phone',
dataIndex: 'phone',
flex: 1
},
{
text: 'Email',
dataIndex: 'email',
flex: 1
},
{
text: 'Faculty',
dataIndex:'faculty',
flex: 1
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
text: 'Add',
iconCls: 'fa fa-plus',
listeners: {
click: 'onAdd'
}
},
{
xtype: 'button',
text: 'Edit',
iconCls: 'fa fa-edit',
id: 'editButton',
listeners: {
click: 'onEdit'
}
},
{
xtype: 'button',
text: 'Delete',
iconCls: 'fa fa-trash-o',
bind: {
disabled: '{ !mainlist.selection }'
},
listeners: {
click: 'onDelete'
}
}]
}
],
// toolbar for our store filter field
tbar: [{
xtype: 'textfield',
fieldLabel: 'Search Student',
emptyText: '...type to filter',
width: 300,
listeners: {
change: 'onSearch'
},
triggers: {
clear: {
cls: 'x-form-clear-trigger',
handler: function(){
this.reset();
}
}
}
}]
});
And this my Controller (MainController.js)
createDialog: function(record)
{
if (record)
{
var form = Ext.create('MyApp.view.student.StudentForm');
form.loadRecord(record);
form.show();
}
Ext.create('MyApp.view.student.StudentForm').show();
},
onEdit: function(button, e, options){
var row = button.up('mainlist').getSelection();
debugger;
this.createDialog(row[0]);
},
And here is the pop up window where the data has to be loaded(StudentForm.js)
Ext.define('MyApp.view.student.StudentForm', {
extend: 'Ext.window.Window',
xtype: 'student-form',
height: 400,
width: 500,
layout: {
type: 'fit'
},
reference: 'form',
title: 'Add Student',
closable: true,
modal: true,
items: [{
xtype: 'form',
id : 'formId',
bodyPadding: 5,
modelValidation : true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'fieldset',
flex: 1,
title: 'Student Information',
layout: 'anchor',
defaultType: 'textfield',
defaults: {
anchor: '100%',
msgTarget: 'side'
},
items: [
{
xtype: 'hiddenfield',
name: 'id',
fieldLabel: 'Label'
},
{
fieldLabel: 'Name',
name: 'name'
},
{
fieldLabel: 'Address',
name: 'address'
},
{
fieldLabel: 'Phone',
name: 'phone'
},
{
fieldLabel: 'Email',
name: 'email'
},
{
xtype: 'combo',
fieldLabel: 'Faculty',
name: 'facultyName',
queryMode: 'local',
displayField: 'facultyName',
valueField: 'facultyName',
store: {
fields: ['facultyName'],
data: [{
facultyName: 'computing'
}, {
facultyName: 'multimedia'
}, {
facultyName: 'networking'
}]
}
}
]
}],
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
layout: {
pack: 'end',
type: 'hbox'
},
items: [
{
xtype: 'button',
text: 'Save',
iconCls: 'fa fa-check',
listeners: {
click: 'onSave'
}
},
{
xtype: 'button',
text: 'Cancel',
iconCls: 'fa fa-times',
listeners: {
click: 'onCancel'
}
}
]
}]
}]
});
What am I missing here?Any suggestions?
It says loadRecord() is not a function
Your MyApp.view.student.StudentForm is not actually a form. It is a window, hence there is no loadRecord method.
Instead of form.loadRecord(record); call form.down('form').loadRecord(record).
Remember, it is worth naming things what they are.
Related
I was trying to add a registration form in my login application but it seems that I could not view the registration form. See more details from my code below:
Login.js
Ext.define('TutorialApp.view.login.Login', {
extend:'Ext.window.Window',
xtype: 'login',
requires: [
'TutorialApp.view.login.LoginController',
'TutorialApp.view.registration.RegisterForm',
'Ext.form.Panel'
],
controller: 'login',
bodyPadding: 10,
title: 'Login Window',
closable: false,
autoShow: true,
items: {
xtype: 'form',
reference: 'form',
items: [{
xtype: 'textfield',
name: 'username',
fieldLabel: 'Username',
allowBlank: false
},{
xtype: 'textfield',
name: 'password',
inputType: 'password',
fieldLabel: 'Password',
allowBlank: false
},{
xtype: 'displayfield',
hideEmptyLabe: false,
value: 'Enter any non-blank password'
}],
buttons: [{
text: 'Login',
formBind: true,
listeners: {
click: 'onLoginClick'
}
},{
text: 'Register',
formBind: false,
listeners: {
click: 'onRegisterClick'
}
}
]
}
});
LoginController.js
Ext.define('TutorialApp.view.login.LoginController', {
extend: 'Ext.app.ViewController',
alias: 'controller.login',
onLoginClick: function() {
localStorage.setItem("TutorialLoggedIn", true);
this.getView().destroy();
Ext.create({
xtype: 'app-main'
});
},
onRegisterClick: function() {
this.getView().destroy(); //destroy login view
Ext.create({
xtype: 'form-register'
});
//above code does not create a component for register
}
});
RegisterForm.js
Ext.define('TutorialApp.view.registration.RegisterForm', {
extend: 'Ext.form.Panel',
xtype: 'form-register',
frame: true,
title: 'Register',
bodyPadding: 10,
scrollable:true,
width: 355,
fieldDefaults: {
labelAlign: 'right',
labelWidth: 115,
msgTarget: 'side'
},
items: [{
xtype: 'fieldset',
title: 'User Info',
defaultType: 'textfield',
defaults: {
anchor: '100%'
},
items: [
{ allowBlank:false, fieldLabel: 'User ID', name: 'user', emptyText: 'user id' },
{ allowBlank:false, fieldLabel: 'Password', name: 'pass', emptyText: 'password', inputType: 'password' },
{ allowBlank:false, fieldLabel: 'Verify', name: 'pass', emptyText: 'password', inputType: 'password' }
]
}, {
xtype: 'fieldset',
title: 'Contact Information',
defaultType: 'textfield',
defaults: {
anchor: '100%'
},
items: [{
fieldLabel: 'First Name',
emptyText: 'First Name',
name: 'first'
}, {
fieldLabel: 'Last Name',
emptyText: 'Last Name',
name: 'last'
}, {
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype: 'email'
}, {
xtype: 'combobox',
fieldLabel: 'State',
name: 'state',
store: {
type: 'states'
},
valueField: 'abbr',
displayField: 'state',
typeAhead: true,
queryMode: 'local',
emptyText: 'Select a state...'
}, {
xtype: 'datefield',
fieldLabel: 'Date of Birth',
name: 'dob',
allowBlank: false,
maxValue: new Date()
}]
}],
buttons: [{
text: 'Register',
disabled: true,
formBind: true
}]
});
Any idea how this should work? I tried including the 'plugins: 'viewport'' in the registerform.js and it shows the registration form but I don't think it the correct to load the component for the registration form. Any advice is greatly appreciated. Thank you.
Any advice is greatly appreciated so I think you can use card layout.
CARD layout manages multiple child Components, each fitted to the Container, where only a single child Component can be visible at any given time. This layout style is most commonly used for wizards, tab implementations, etc.
I have created an sencha fiddle demo. this will show how card layout is working. I hope this will help you to achieve your requirement.
//Controller
Ext.define('TutorialApp.view.login.LoginController', {
extend: 'Ext.app.ViewController',
alias: 'controller.login',
onLoginClick: function () {
localStorage.setItem("TutorialLoggedIn", true);
Ext.Msg.alert('Success', 'Good you have successfully login!');
},
onRegisterClick: function (button) {
var mainCard = this.getView().up('#mainCard');
this.getView().destroy(); //destroy login view
//This code create a component for register and set on card view
mainCard.getLayout().setActiveItem(Ext.create({
xtype: button.view
}));
},
onBackButton: function (button) {
var mainCard = this.getView().up('#mainCard');
this.getView().destroy(); //destroy register view
//This code create a component for login and set on card view
mainCard.getLayout().setActiveItem(Ext.create({
xtype: button.view
}));
}
});
//Login form
Ext.define('TutorialApp.view.login.Login', {
extend: 'Ext.form.Panel',
xtype: 'login',
height: 200,
requires: [
'TutorialApp.view.login.LoginController',
'TutorialApp.view.registration.RegisterForm',
'Ext.form.Panel'
],
controller: 'login',
bodyPadding: 10,
title: 'Login Form',
items: {
xtype: 'form',
bodyPadding: 10,
reference: 'form',
items: [{
xtype: 'textfield',
name: 'username',
fieldLabel: 'Username',
allowBlank: false
}, {
xtype: 'textfield',
name: 'password',
inputType: 'password',
fieldLabel: 'Password',
allowBlank: false
}, {
xtype: 'displayfield',
hideEmptyLabe: false,
value: 'Enter any non-blank password'
}],
buttons: [{
text: 'Login',
formBind: true,
handler: 'onLoginClick'
}, {
text: 'Register',
view: 'form-register',
handler: 'onRegisterClick'
}]
}
});
//RegisterForm
Ext.define('TutorialApp.view.registration.RegisterForm', {
extend: 'Ext.form.Panel',
xtype: 'form-register',
controller: 'login',
frame: true,
title: 'Register',
bodyPadding: 10,
width: '100%',
height:370,
fieldDefaults: {
labelAlign: 'right',
labelWidth: 115,
msgTarget: 'side'
},
items: [{
xtype: 'fieldset',
title: 'User Info',
defaultType: 'textfield',
defaults: {
anchor: '100%'
},
items: [{
allowBlank: false,
fieldLabel: 'User ID',
name: 'user',
emptyText: 'user id'
}, {
allowBlank: false,
fieldLabel: 'Password',
name: 'pass',
emptyText: 'password',
inputType: 'password'
}, {
allowBlank: false,
fieldLabel: 'Verify',
name: 'pass',
emptyText: 'password',
inputType: 'password'
}]
}, {
xtype: 'fieldset',
title: 'Contact Information',
defaultType: 'textfield',
defaults: {
anchor: '100%'
},
items: [{
fieldLabel: 'First Name',
emptyText: 'First Name',
name: 'first'
}, {
fieldLabel: 'Last Name',
emptyText: 'Last Name',
name: 'last'
}, {
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype: 'email'
}, {
xtype: 'combobox',
fieldLabel: 'State',
name: 'state',
store: Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [{
"abbr": "AL",
"name": "Alabama"
}, {
"abbr": "AK",
"name": "Alaska"
}, {
"abbr": "AZ",
"name": "Arizona"
}]
}),
valueField: 'abbr',
displayField: 'name',
typeAhead: true,
queryMode: 'local',
emptyText: 'Select a state...'
}, {
xtype: 'datefield',
fieldLabel: 'Date of Birth',
name: 'dob',
allowBlank: false,
maxValue: new Date()
}]
}],
buttons: [{
text: 'back',
view: 'login',
handler: 'onBackButton'
}, {
text: 'Sumbit',
disabled: true,
formBind: true
}]
});
Ext.create('Ext.container.Container', {
layout: 'card',
itemId: 'mainCard',
widht: '100%',
height: '100%',
items: [{
xtype: 'login'
}],
renderTo: Ext.getBody()
});
I have 2 grids on a window which support drag and drop each by himself and also between each other.
I can't get the vertical scroll to work when dragging above the first row in the grid or below the last row in the grid.
currently, i must first scroll all the way down if i want to drag the record to the bottom of the grid.
using containerScroll didn't solve the problem.
Ext.define('MyApp.view.DDFieldsGrid', {
extend: 'Ext.grid.Panel',
xtype: 'ddfieldsgrid',
hideHeaders: true,
multiSelect: true,
autoScroll: true,
markDirty: false,
columns: [
{ dataIndex: 'item', flex: 1 }
],
viewConfig: {
plugins: {
containerScroll: true,
ptype: 'gridviewdragdrop',
ddGroup: 'firstGridDDGroup'
}
}
});
this.mainWin = Ext.create('Ext.window.Window', {
layout: 'centered',
title: 'Blotter Fields',
resizable: false,
closeAction: 'hide',
hidden: true,
shadow: true,
tbar: [{
xtype: 'combo',
fieldLabel: 'Fields Type',
id: 'comboCategories',
editable: false,
queryMode: 'local',
selectOnFocus: true,
forceSelection: true,
iconCls: 'no-icon',
triggerAction: 'all',
store: categoreyItems,
listeners: {
select: function (ele, newValue, oldValue) {
var category = this.valueModels[0].index;
var store = Ext.getStore('availableFields');
store.filterBy(function (record) {
return category == 0 /*All*/ || record.get('category') === category;
}, this);
}
}
}, ' ', {
xtype: 'checkbox',
fieldLabel: 'Show Details field',
margin: '0 10 0 20',
//hidden: this.customizationModel._customizationView.detailsCustomOptions.showDetailsFieldsOption == false,
checked: this.customizationModel._customizationView.detailsCustomOptions.showDetailsFieldsOption,
listeners: {
click: {
fn: this.onShowDetailsField,
scope: this
}
}
}, ' ', {
xtype: 'checkbox',
fieldLabel: 'Show custom fields',
margin: '0 10 0 20',
//hidden: this.customizationModel._customizationView.detailsCustomOptions.showUserCustomFieldsOptions == false,
checked: this.customizationModel._customizationView.detailsCustomOptions.showUserCustomFieldsOptions,
listeners: {
click: {
fn: this.onShowCustomFields,
scope: this
}
}
}],
dockedItems: [
{
xtype: 'toolbar',
flex: 1,
dock: 'bottom',
layout: {
pack: 'end',
type: 'hbox'
},
items: [
{
xtype: 'button',
text: 'Cancel',
listeners: {
click: {
fn: this.onCancelSettings,
scope: this
}
}
},
{
xtype: 'button',
text: 'OK',
listeners: {
click: {
fn: this.onAcceptSettings,
scope: this
}
}
}
]
}
],
items: [{
store: availableFieldsStore,
title: 'Available Fields'
}, {
store: selectedFieldsStore,
title: 'Selected Fields'
}],
layout: {
type: 'hbox',
align: 'stretch'
},
defaults: {
xtype: 'ddfieldsgrid',
height: 200,
margin: 8,
width: 300
}
});
When I am using formBind: true, it does not seem to (save) and I am not sure why. Any ideas?
title: 'Edit Sessions',
modal: 'true',
items: [
{
xtype: 'form',
bodyPadding: 10,
title: "",
defaults: {
labelWidth: 90,
margin: '0 0 10 0',
anchor: '90%'
},
items: [
{
name: 'title',
xtype: 'textfield',
fieldLabel: 'Title',
allowBlank: false,
},
{
xtype: 'checkboxfield',
name: 'approved',
fieldLabel: 'Approved',
}
]
},
{
xtype: 'container',
padding: '10 10 10 10',
layout: {
type: 'hbox',
align: 'middle',
pack: 'center'
},
items:
[ //Buttons and handlers
{
xtype: 'button',
text: 'Save',
formBind: true,
type: 'submit',
margin: '5 5 5 5',
handler: function (button) {
var form = button.up().up().down('form');
form.updateRecord();
button.up('window').destroy();
}
},
{
xtype: 'button',
text: 'Cancel',
margin: '5 5 5 5',
handler: function (button) {
button.up('window').destroy();
}
}
]
}
]
The formBind only works if the button is in the form.
Working example: https://fiddle.sencha.com/#view/editor&fiddle/1o4t
Hello I've problem to selected by value. And the data is from viewmodel. I also search the answer on google but I not found. I am very confusing about it. Please help me.
This is my form:
Ext.define('Sipen.view.items.ItemsForm', {
extend: 'Ext.window.Window',
xtype: 'items-form',
height: 250,
width: 500,
layout: { type: 'fit' },
bind: {title: '{title}'},
modal: true,
items: [
{
xtype: 'form',
reference: 'form',
bodyPadding: 20,
flex: 1,
modelValidation: true,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
xtype: 'fieldcontainer',
flex: 1,
title: 'Item Information',
layout: 'anchor',
defaults: {
anchor: '100%',
xtype: 'textfield',
msgTarget: 'under',
labelWidht: 100,
allowBlank: false
},
items: [
{
xtype: 'hiddenfield',
name: '_id',
bind: '{currentTipe._id}'
},
{
fieldLabel: 'Code',
name: 'item_code',
bind: '{currentItem.item_code}'
},
{
fieldLabel: 'Name',
name: 'item_name',
bind: '{currentItem.item_name}'
},
{
xtype: 'numberfield',
minValue: 1,
fieldLabel: 'Price',
name: 'item_price',
bind: '{currentItem.item_price}'
},
{
xtype: 'combo',
name: 'type',
fieldLabel: 'Type',
valueField: 'type_name',
displayField: 'type_name',
queryMode: 'local',
forceSelection: true,
submitValue: true,
bind: {
value: '{typeItems.type_name}',
store: '{typeItems}',
selection: '{currentItem.type_name}'
}
}
]
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
layout: {
pack: 'end',
type: 'hbox'
},
items: [
{
xtype: 'button',
text: 'Save',
formBind: true,
listeners: {
click: 'onSave'
}
},
{
xtype: 'button',
text: 'Cancel',
listeners: {
click: 'onCancel'
}
}
]
}
]
}
]
});
Look at xtype 'combo' and I selection data by {currentItem.type_name} and the data is right, but I get error
this Uncaught TypeError: item.getId is not a function.
And this is my view model:
Ext.define('Sipen.view.items.ItemsModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.items-items',
requires: [ 'Sipen.model.Items' ],
stores: {
items: {
model: 'Items',
autoLoad: true
},
typeItems: {
model: 'TypeItems',
autoLoad: true
}
}
});
Sorry for my bad english, but please help me...
============[Fixed]======================
I've found the result in here https://www.sencha.com/forum/showthread.php?302067
So the script should be like this:
{
xtype: 'combo',
name: 'type',
fieldLabel: 'Type',
valueField: 'type_name',
displayField: 'type_name',
queryMode: 'local',
forceSelection: true,
submitValue: true,
bind: {
value: '{typeItems.type_name}',
store: '{typeItems}',
selection: '{currentItem.type_name}'
}
}
Main view file
Ext.define('DemoApp1.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
'Ext.form.FieldSet',
'Ext.field.Text',
'Ext.field.Email',
'Ext.field.Password',
'Ext.field.DatePicker',
'Ext.TitleBar',
'Ext.Button'
],
config: {
tabBarPosition: 'bottom',
items: [
{
xtype: 'container',
title: 'Login',
autoDestroy: false,
layout: {
type: 'vbox',
pack: 'center',
align: 'center'
},
iconCls: 'user',
items: [
// login user
{
xtype: 'fieldset',
id: 'login-user-field-set',
width: 500,
title: 'Login Here!',
items: [
{
xtype: 'emailfield',
label: 'Email',
name: 'user'
},
{
xtype: 'passwordfield',
label: 'Password',
name: 'password'
}
]
},
{
xtype: 'button',
id: 'login-button',
text: 'Login',
ui: 'confirm',
width: 150
}
]
},
{
autoDestroy: false,
xtype: 'container',
title: 'Register',
layout: 'vbox',
scrollable: true,
iconCls: 'add',
items: [
{
xtype: 'titlebar',
title: 'Register New User',
docked: 'top'
},
{
// register new user
xtype: 'fieldset',
id: 'reg-items-field-set',
items: [
{
xtype: 'textfield',
label: 'Email',
allowBlank: false,
name: 'reg_user'
},
{
xtype: 'passwordfield',
label: 'Password',
name: 'reg_password'
},
{
xtype: 'passwordfield',
label: 'Confirm Password',
name: 'reg_cpassword'
},
{
xtype: 'textfield',
label: 'User Name',
name: 'reg_user_name'
},
{
xtype: 'datepickerfield',
picker: {
yearFrom: 1975,
yearTo: 2005
},
label: 'DOB',
name: 'reg_dob'
},
{
xtype: 'selectfield',
label: 'Gender',
name: 'reg_gender',
options: [
{text: 'Male', value: 'male'},
{text: 'Female', value: 'female'}
]
}
]
},
{
xtype: 'container',
layout: {
type: 'hbox',
align: 'center',
pack: 'center'
},
items: [
{
xtype: 'button',
id: 'register-button',
text: 'Register',
ui: 'confirm',
width: 200
},
{
xtype: 'spacer',
width: 50
},
{
xtype: 'button',
id: 'reset-button',
text: 'Reset',
ui: 'decline',
width: 200
}
]
}
]
}
]
}
});
Controller file
Ext.define('DemoApp1.controller.MainController', {
extend: 'Ext.app.Controller',
requires: [
'Ext.form.FieldSet',
'Ext.Button'
],
config: {
refs: {
loginButton: '#login-button',
regFieldSet: '#reg-items-field-set',
regNewUserButton: '#register-button',
regFormResetButton: '#reset-button',
loginUserFieldSet: '#login-user-field-set'
},
control: {
loginButton: {
tap: 'loginButtonTapped'
},
regFormResetButton: {
tap: 'regFormResetButtonTapped'
},
regNewUserButton: {
tap: 'regNewUserButtonTapped'
}
},
loginButtonTapped: function(self, e) {
console.log('loginButtonTapped');
},
regFormResetButtonTapped: function(self, e) {
console.log('regFormResetButtonTapped');
},
regNewUserButtonTapped: function(self, e) {
console.log('regNewUserButtonTapped');
}
}
});
on click on any button it logging the below
Uncaught TypeError: Cannot read property 'apply' of undefined
what wrong in it???
thanks in advance...
Your methods should not go in the config block. loginButtonTapped, regFormResetButtonTapped and regNewUserButtonTapped. They should come out one level into the class definition, because they are class methods, not configurations.