I have a simple Form Panel and cannot seem to access the form by using the this.up command. What is the correct way to use this? All the console.log statements return undefined. I am using the Sencha Architect program and there cannot define an xtype. Instead, I had to use the alias field.
Ext.define('MyApp.view.MyFormPanel', {
extend: 'Ext.form.Panel',
alias: 'widget.contactform',
config: {
id: 'MyFormPanel',
items: [
{
xtype: 'fieldset',
title: 'MyFieldSet1',
items: [
{
xtype: 'textfield',
label: 'Name',
name: 'Name'
},
{
xtype: 'textfield',
label: 'Email',
name: 'Email'
}
]
},
{
xtype: 'button',
itemId: 'mybutton',
text: 'MyButton'
}
],
listeners: [
{
fn: 'onMybuttonTap',
event: 'tap',
delegate: '#mybutton'
}
]
},
onMybuttonTap: function(button, e, eOpts) {
console.log(this.up('widget.contactform'));
console.log(this.up('contactform'));
console.log(this.up('form'));
console.log(this.up('formpanel'));
console.log(this.up('form.panel'));
console.log(this.up('MyFormPanel'));
}
});
Hmm. Considering from where you are calling it, I think that this is the form panel itself.
Related
I have two views and I want one to be nested inside the other, like a partial view. My two views are as follows:
ChemicalRisksView.js
Ext.define('HandSurvey.view.ChemicalRisksView', {
extend: 'Ext.form.Panel',
xtype: 'chemicalrisksview',
requires: [
'Ext.form.FieldSet',
'Ext.field.Text',
'Ext.Button',
'HandSurvey.view.SpecificChemicalView'
],
config: {
items:[{
xtype: 'fieldset',
title: 'Fiberglass & Resins',
items: [
{
name: 'test',
xtype: 'specificchemicalview'
},
{
xtype: 'button',
text: 'Save',
action: 'saveChemicalRisks',
margin: '10 5',
ui: 'confirm'
}
]
}]
}
});
SpecificChemicalView.js
Ext.define('HandSurvey.view.SpecificChemicalView', {
extend: 'Ext.form.Panel',
xtype: 'specificchemicalview',
requires: [
'Ext.form.FieldSet',
'Ext.field.Toggle',
'Ext.field.Select',
'Ext.field.Text',
'Ext.Button'
],
config: {
items:[{
xtype: 'fieldset',
title: 'Edit Specific Chemical',
items: [
{
name: 'name',
xtype: 'textfield',
label: 'Name'
},
{
name: 'model',
xtype: 'textfield',
label: 'Model #'
},
{
name: 'manufacturer',
xtype: 'textfield',
label: 'Manufacturer'
},
{
name: 'averageExposure',
xtype: 'textfield',
label: 'Average Exposure Time'
},
{
name: 'msdsOnFile',
xtype: 'checkboxfield',
label: 'MSDS On File'
},
{
name: 'additionalInfo',
xtype: 'textfield',
label: 'Additional Info'
},
{
xtype: 'button',
text: 'Save Chemical',
action: 'saveChemical',
margin: '10 5',
ui: 'confirm'
}
]
}]
}
});
So I have defined the xtype as specificchemicalview and added it to the items in the 'parent' view. But, nothing happens. It just shows nothing in the ChemicalRisksView. I am debugging in Chrome and there are no error messages.
I am using this same method to add all my views to my main navigation view and that works fine. What am I missing here?
In HTML, form cannot contain another form. Although it could work in Ext as it does not use <form> tag, I do not think it is a good idea. Form is designed to contain form fields (isFormField:true) that another form is definitely not one.
I would consider a re-design where the "specific view" would extend FieldSet adding necessary form fields as its items.
That should solve the problem.
This is my view:
Ext.define('MyApp.view.Login.LoginForm',{
extend: 'Ext.form.Panel',
alias: 'loginForm',
requires: ['Ext.form.FieldSet', 'Ext.Img'],
config: {
items: [
{
xtype: 'fieldset',
items: [
{
xtype: 'textfield',
name: 'username',
required: true
},{
xtype: 'textfield',
name: 'password',
required: true,
inputType: 'password'
},{
xtype: 'selectfield',
//*****************the problem is here****************
store: Ext.StoreManager.lookup('MyApp.store.Tables')
//store: Ext.StoreManager.lookup('Tables')
}
]
},{
xtype: 'button',
text: 'Login',
}
]
}
});
It says that it cannot use lookup of undefined, so I'm thinking that MyApp doesn't see Ext.StoreManager.
I've also tried Ext.data.StoreManager.lookup and Ext.StoreMgr.
BTW. the store really exist.
Your store config should be like this:
Ext.define('MyApp.store.Tables', {
extend: "Ext.data.Store",
config: {
model: "MyApp.model.Table",
data : [{
text: "Ed",
value: "Spencer"
}, {
text: "Tommy",
value: "Maintz"
}]
}
});
And place this into your LoginForm.js:
{
xtype: 'selectfield',
store: 'Tables'
}
I have tested. It is working fine.
Try following these instructions and let me know if it works:
Make sure to include the store in your app.js file
In Tables.js store implementation file, give it an storeId inside its config, like this: config: {storeId: 'Tables'}
Using this instead of Ext.StoreManager: store: 'Tables'
Hope it helps.
I have defined a Ext.navigation.View, I need to attached a event handler
to an element specified in my code as:
title: 'Timetable XXX',
iconMask: true,
iconCls: 'XXX-icon-timetable'
Any idea how to do it?
Ext.define('XXX.view.NavigViewTimetable', {
extend: 'Ext.navigation.View',
alias: 'widget.navigviewtimetable',
requires: [
'XXX.view.TimetableContainer',
'XXX.view.DetailView',
'XXX.view.TimetableEdit',
'XXX.view.TimetableDayList'
],
config: {
navigationBar: {
items: [
{
xtype: 'button',
text: 'Add',
itemId: 'addButton',
ui: 'custom-btn-up-timetable',
align: 'right',
hidden: false
},
],
ui: 'custom-toolbar-top-1L'
},
items: [
{
xtype: 'timetablecontainer'
},
//Toolbar
{
xtype: "toolbar",
docked: "bottom",
ui: 'custom-toolbar-2L',
items: [
{
xtype: "button",
text: 'Today',
ui: 'custom-btn-dwn-timetable',
//handler: this.onTodayButtonTap,
//scope: this,
itemId: 'todayButton'
},
{
xtype: 'spacer'
},
{
xtype: "segmentedbutton",
items: [
{
text: 'Daily',
ui: 'custom-btn-dwn-timetable'
},
{
text: 'List',
ui: 'custom-btn-dwn-timetable',
//disabled: true,
pressed: true
}
],
itemId: 'segBtn',
align: 'right'
}
]
}
],
listeners: [
{
delegate: '#addButton',
event: 'tap',
fn: 'onAddButtonTap'
},
{
delegate: '#todayButton',
event: 'tap',
fn: 'onTodayButtonTap'
},
{
delegate: '#segBtn',
event: 'toggle',
fn: 'onSegBtnToggle'
}
],
// I NEED ADD LISTEN TO AN EVENT HERE
title: 'Timetable XXX',
iconMask: true,
iconCls: 'XXX-icon-timetable'
},
onAddButtonTap: function () {
console.log("addItemCommand [NavigViewTimetable]");
this.fireEvent("addItemCommand", this);
},
onTodayButtonTap: function(){
console.log('onTodayButtonTap [NavigViewTimetable]');
this.fireEvent('todayButtonTapCommand', this)
},
onSegBtnToggle: function (segBtn, btn, isPressed) {
//console.log("'" + btn.config.text +"' on segmented button pressed" );
if (btn.config.text == 'List'){
this.fireEvent('listToggleCommand', this);
}else if (btn.config.text == 'Daily'){
this.fireEvent('dailyToggleCommand', this);
}
}
});
Instead of putting code related to event handlers inside views, I'd prefer using Controllers. That will definitely reduce efforts maintaining code afterwords. Another thing, if you decide to use controllers then you can make use of action config for each of the button. Like -
xtype: 'button',
text: 'Add',
itemId: 'addButton',
ui: 'custom-btn-up-timetable',
align: 'right',
hidden: false,
action:'addButtonAction'
Then in controller, you can use control config option. Ex of controller can be -
Ext.define('XXX.controller.ButtonController',{
extend:'Ext.app.Controller',
config:{
refs:{
views:['Theviews.youwanto.refer'],
//addtional references
},
control:{
'button[action=addButtonAction]':{
tap:'functionForAddButton'
}
}
},
functionForAddButton:function(){
console.log('Add Button tapped');
}
);
You can also use action config on segmeneted buttons -
xtype: "segmentedbutton",
items: [
{
text: 'Daily',
ui: 'custom-btn-dwn-timetable',
action:'dailyButtonAction'
},
{
text: 'List',
ui: 'custom-btn-dwn-timetable',
//disabled: true,
pressed: true,
action:'listButtonAction'
}
],
You can always define event handlers inside views but IMO that's not following MVC principal.
I'm trying to switch panels when tapping 'login' in a toolbar.
My controller gets the event and I switch by adding and setting the active item to the panel I want.. however, the screen stays blank (and there are no debug errors).
This is the code of my panel, any idea what the mistake might be?
Ext.define('App.view.LoginView', {
extend: 'Ext.Panel',
xtype: 'loginpanel',
alias: 'widget.loginView',
fullscreen: true,
layout: 'fit',
items: [
{
xtype: 'TopToolBar'
},
{
xtype: 'formpanel',
items: [
{
xtype: 'fieldset',
title: 'Login',
instructions: 'Have a great day!',
items: [
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password'
}
]
},
{
xtype: 'button',
text: 'Login',
ui: 'confirm',
handler: function()
{
this.up('loginpanel').submit();
}
}
]
}]})
The code of my toolbar class:
Ext.define('App.view.TopToolBar', {
extend: 'Ext.Toolbar',
xtype: 'TopToolBar',
dock: 'top',
initialize: function() {
var loginButton = {
xtype: 'button',
text: 'Login',
ui: 'action',
handler: this.onLoginTap,
scope: this
};
this.add(loginButton);
},
onLoginTap: function(){
console.log('login tap');
this.fireEvent('loginBtnHandler', this);
}})
Define classes with Ext.define.
Ext.define('My.Toolbar', {
extend: 'Ext.Toolbar',
alias: 'widget.mytoolbar'
//configuration
});
Create(Instantiate) classes with Ext.create
var tlb= Ext.create('My.Toolbar', {
//configuration
});
My experience in web programming is limited to intermediate, self-taught JS and jQuery with a dash of PHP. ExtJS is turning out to be an entirely different animal.
I can't figure out why my controller isn't doing what I expect, especially since I'm following the syntax that is used in the documentation (which is becoming increasingly useless as they fail to describe what is actually happening in the examples... but I digress).
Main.js
Ext.define("cs.view.Main", {
extend: 'Ext.TabPanel',
tabBarPosition: 'bottom',
requires: [
'cs.view.form',
'cs.view.location',
'Ext.TitleBar',
'cs.controller.geolocate'
],
config: {
tabBar: {
docked: 'bottom',
},
defaults: {
flex: 1
},
items: [
{ xtype: 'form' },
{ xtype: 'location' }
]
},
});
form.js
Ext.define('cs.view.form', {
extend: 'Ext.form.Panel',
requires: 'cs.controller.geolocate',
id: 'ClientFinderForm',
config: {
title: 'Home',
iconCls: 'home',
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Client Finder'
},
{
xtype: 'textfield',
name: 'address',
label: 'address'
},
{
xtype: 'textfield',
name: 'dist',
label: 'distance(mi)'
},
{
xtype: 'button',
ui: 'confirm',
text: 'submit',
id: 'submitButton',
}
]
},
});
geolocate.js
Ext.define('cs.controller.geolocate', {
extend: 'Ext.app.Controller',
config: {
control: {
aButton: {
tap: 'message'
}
},//control
refs: {
aButton: '#submitButton'
},//refs
},//config
message: function(){
Ext.Msg.alert("Success", "Finally!");
}
});
I believe sencha touch 2 wants you to put the views:[] in your app. js
Also in your cs.view.form you should take out xtype:'form', it already knows its a form by extending Ext.form.panel.
Take off alias from your submit button, you need to define the submit button on its own to use alias.