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.
Related
I am trying to create a simple example of admin dasboard with Triton theme. But can't manage how to make it right. So I need a simple example of slide menu for desktop and to change content in a content area. Now my hamburger button is streched and left menu itself is not like that one in triton theme.
Ext.define('KitchenSink.view.Menus',
{
extend: 'Ext.Container',
xtype: 'app-main',
//controller: 'main',
requires: [
'Ext.Menu'
],
layout: {
type: 'card'
},
items: [
{
/*xtype: 'toolbar',
docked: 'top',
title: 'Slider Menu',*/
//docked: 'top',
xtype: 'panel',
styleHtmlContent: true,
html: ['<b>Plan'].join(''),
items: [
{
xtype: 'button',
handler: function() {
if(Ext.Viewport.getMenus().left.isHidden()){
Ext.Viewport.showMenu('left');
} else {
Ext.Viewport.hideMenu('left');
}
}
}
]
}],
initialize: function(){
Ext.Viewport.setMenu(this.createMenu(),{
side: 'left',
reveal: true
});
},
createMenu: function(){
var menu = Ext.create('Ext.Menu', {
width: 250,
scrollable: 'vertical',
items: [
{
xtype: 'button',
text: 'Option 1',
},{
xtype: 'button',
text: 'Option 2',
}
]
});
return menu;
}
});
Ext.application({
name: 'Foo',
mainView: 'KitchenSink.view.Menus'
});
it's the treelist component, which is used in the admin dashboard.
Take a look at the example :
http://examples.sencha.com/extjs/6.0.1/examples/kitchensink/#tree-list.
You don't have to download it. It is already in your kitchensink-example of your ext-6.x.x folder.
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.
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.
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
});
I am trying to create a form embedded inside a Panel and trying to retrieve the contents of the form fields from within the controller.
Below is my view and controller code.
Ext.define('MyApp.view.SignIn', {
extend: 'Ext.Container',
requires: ['Ext.Button','Ext.form.Panel'],
xtype: 'loginPage',
config : {
fullscreen: true,
items: [
{
docked: 'top',
xtype: 'titlebar',
html:'<img src="resources/icons/logo.png" />',
items: {
iconMask: true,
align: 'left',
text: 'Sign In',
handler: function(){
var panel = Ext.create('Ext.Panel', {
left: 0,
padding: 10,
xtype: 'loginPage',
url: 'contact.php',
layout: 'vbox',
id: 'signinform',
items: [
{
xtype: 'fieldset',
title : 'Enter Login Information:',
instructions: 'All fields are required',
layout: {
type: 'vbox'
},
items: [
{
xtype: 'emailfield',
name: 'Email',
label: 'Email',
placeHolder: 'Valid email'
},
{
xtype: 'passwordfield',
name: 'Password',
label: 'Password',
placeHolder: '6 characters'
}]
},
{
layout: 'hbox',
items: [
{
xtype: 'button',
text: 'Login',
ui:'confirm',
id:'Login-btn',
width: '100px',
flex: 1
}, {
width: '100px'
}, {
xtype: 'button',
text: 'Register',
ui: 'decline',
width: '100px',
flex: 1,
handler: function(){
this.getParent().getParent().destroy();
}
}]//Buttons array
}//Form completion
]
}).showBy(this); //Panel created
}//Function complete
}
},
{
layout: {
type: 'vbox',
pack:'center',
align: 'center'
},
items:[{
html:'<h2>My tool</h2><h3 style="color:#F47621">Simple, intuitive and powerful data management tool.</h3>',
styleHtmlContent: true,
}
]
},
]
},
initialize: function() {
this.callParent(arguments);
},
});
And here is my controller code. I just checked the controller code it seemed to be fine with a simpler form view. So I guess the issue is with the view.
Ext.define("MyApp.controller.SignIn", {
extend : 'Ext.app.Controller',
config : {
refs : {
home : '#homePage',
login : '#loginPage',
SignIn : '#signinform'
},
control : {
'#Login-btn': {
tap : 'onLoginButtonTap'
}
}
},
onLoginButtonTap: function() {
var formValues = this.getSignIn().getValues();
console.log(formValues.username);
console.log(formValues.password);
}
});
]
},
initialize: function() {
this.callParent(arguments);
},
});
What is wrong with the form creation in the View page. Why is the form coming as undefined. Experts please help
Here:
var panel = Ext.create('Ext.Panel', {
...
You are instantiating a simple panel not a form panel. May be you want to say:
var panel = Ext.create('Ext.form.Panel', {
...
I believe the reason you are getting undefined is because those components don't exist when the view is created.
Instead of creating the panel in your view (Ext.create('Ext.Panel'...) with a handler function you should consider defining it as an item in your xtype:loginpage container with hidden : true. Then via a listener from the controller call show() on the hidden component.
I find that if I keep event listeners/handlers in my controllers, and layout/display logic in my views my application becomes much more managable.
I also try to avoid calling Ext.create(Ext.SomeCmpt) and instead use the hidden attribute.
Hope this helps.