description:when I create a formPanel,the console gives me an err:http://localhost:1841/ext/packages/core/src/field/Email.js?_dc=1599031706496 net::ERR_ABORTED 404 (Not Found). so I look up my app Items, there is no file of "Email.js", I think I shoud import the file to my app context,where shoud I get the Email.js enter image description here
question: I can't find the estjs's SDK of version 7 ,but the cmd.how could I down the SDK 7
Ext.define("MyApp.view.formpanel",{
extend:Ext.form.Panel,
xtype: 'formpanel',
renderTo: document.body,
buttons: {
submit: 'onSubmit'
},
requires:[
"Ext.field.Email"
],
items: [{
xtype: 'textfield',
name: 'name',
label: 'Name'
}, {
xtype: 'emailfield',
name: 'email',
label: 'Email'
}, {
xtype: 'passwordfield',
name: 'password',
label: 'Password'
}]
});
Related
I'm new to ExtJS and have some trouble implementing a radiogroup.
My structure is as follows:
I have a tab.Panel that loads form.Panel which is supposed to include a radiogroup amongst other things.
The file for the tab panel contains:
Ext.define('Test-Application.view.tab.Panel',{
extend: 'Ext.tab.Panel',
alias: 'widget.tab',
xtype: 'tab',
fullscreen: true,
controller: 'main',
requires: [
'Test-Application.view.form.TestForm'
],
items: [
{
title: 'Testform',
xtype: 'testform'
}
]
});
And the file for the testform contains:
Ext.define('Test-Application.view.form.TestForm', {
extend: 'Ext.form.Panel',
xtype: 'testform',
// layout: 'form',
items: [
{
xtype: 'radiogroup',
label: 'Auto Layout:',
items:
[
{ label: 'Item 1', value: 1},
{ label: 'Item 2', value: 2, checked: true },
{ label: 'Item 3', value: 3},
{ label: 'Item 4', value: 4},
{ label: 'Item 5', value: 5},
]
}
]
});
All I get is the error "Uncaught Error: [Ext.createByAlias] Unrecognized alias: widget.radiogroup".
Note that things like radiofields, textfields, comboboxes etc. seem to work just fine (though the radiofields don't work if I use layout: 'form' for some reason. They don't throw an error but simply don't show up).
Are you sure you used extjs 7 instead of extjs 6.7 ?
Check alert(Ext.versions.ext.version) to check the version.
radiogroup is only available from 7.0.
Using radiogroup in extjs 6.7 is not allowed and you will get error message (as you got)
Uncaught Error: [Ext.createByAlias] Unrecognized alias:
widget.radiogroup
Here is example of working code in extjs 7.0.0:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create("Ext.Panel", {
renderTo: Ext.getBody(),
fullscreen:true,
autoShow: true,
items: [{
xtype: 'formpanel',
items: [{
xtype: 'radiogroup',
label: 'Auto Layout:',
items: [{
label: 'Item 1',
value: 1
}, {
label: 'Item 2',
value: 2,
checked: true
}, {
label: 'Item 3',
value: 3
}, {
label: 'Item 4',
value: 4
}, {
label: 'Item 5',
value: 5
}, ]
}]
}]
})
}
});
I have a problem with ExtJS modern toolkit's Form component.
I create a form with no buttons (you can test it in sencha fiddle). The only button is in the titlebar and it isn't working at the moment.
The problem is :
Form submission on pressing Enter. My form is empty, default method is POST, but my page is reloading when I press Enter while the focus is on any of my fields. Url address string in browser complemented form field names, but the form's method is POST.
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
requires: [
'Ext.form.FieldSet',
'Ext.field.Text',
'Ext.field.TextArea',
'Ext.TitleBar'
],
items: [{
xtype: 'titlebar',
docked: 'top',
title: 'Searching',
items: [{
iconCls: 'fa fa-search',
iconAlign: 'right',
text: 'Search',
align: 'right',
handler: function() {
//
}
}]
}, {
xtype: 'fieldset',
border: false,
shadow: 'true',
defaults: {
value: ''
},
items: [{
xtype: 'numberfield',
label: 'Some ID',
allowBlank: true,
name: 'id'
},
{
xtype: 'textfield',
label: 'Some Article',
name: 'article'
}
]
}]
});
How to prevent page reloading?
I've never seen this behaviour in ExtJS form's by default.
Just replace id with something else could be Id in field name, it is conflicting with Ext id property
{
xtype: 'numberfield',
label: 'Some ID',
allowBlank: true,
name: 'Id'
},
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.
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.