I am new to ExtJs and I am trying to follow this tutorial:
http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture
However, when I get to the part where the grid is actually suppose to become visible, I get an error in the Javascript console that says: "Type error: name is undefined".
I have the following files,
app.js:
Ext.application({
name: 'AM',
appFolder: 'app',
controllers: ['Users'],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: {
xtype: 'userList'
}
});
}
});
app/controller/Users.js
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
views: [
'user.List'],
init: function() {
this.control({
'viewport > panel': {
render: this.onPanelRendered
}
});
},
onPanelRendered: function() {
console.log('This panel was rendered');
}
});
app/view/user/List.js
Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.userlist',
title : 'All Users',
initComponent: function() {
this.store = {
fields: ['name', 'email'],
data : [
{name: 'Ed', email: 'ed#sencha.com'},
{name: 'Tommy', email: 'tommy#sencha.com'}
]
};
this.columns = [
{header: 'Name', dataIndex: 'name', flex: 1},
{header: 'Email', dataIndex: 'email', flex: 1}
];
this.callParent(arguments);
}
});
and of course Index.html
<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="ExtJs/ext-4.1.1a/resources/css/ext-all.css">
<script type="text/javascript" src="ExtJs/ext-4.1.1a/ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
Thanks
You've changed the case:
xtype: 'userList'
alias : 'widget.userlist'
Related
my app.js
Ext.application( {
name: 'rgpd',
appFolder: 'app',
controllers: [
'cMain'
],
autoCreateViewport: true,
init: function() {
},
launch: function(){
}
});
here is my viewport (autoCreateViewport is set on true) (view/Viewport.js)
Ext.define('rgpd.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',
items: [
{
xtype: 'tabpanel',
id: 'Rgpd',
region: 'center',
tabPosition: 'left',
titleRotation: 0,
tabRotation: 0,
padding:0,
margin:0,
split: true,
header: {
layout: {
//align: 'stretchmax'
},
title: {
text: 'RGPD',
flex: 0
},
glyph: 124,
items: [
]
},
items: [
{
xtype: 'exemple',
textAlign: 'right',
flex: 1,
},
]
}
]
});
finally here is my exemple view (view/Exemple/View.js)
Ext.define('rgpd.view.Exemple.View', {
extend: 'Ext.Panel',
xtype: 'exemple',
id: "exemple",
title: "Exemple",
layout: {
type: 'border',
pack: 'stretch',
align: 'stretch'
},
padding:20,
items: [
{
title: 'Hello Ext',
html: 'Hello! Welcome to Ext JS.'
}
]
});
but I get a blank page. The final goal is to display a grid containing all the content of a database table but i can't even display HTML.
Is there a mistake somewhere?
edit
here is my controller. Then thanks to help the problem comes from there but i've all my models, stores and views in the controller how can i fix it ?
Ext.define('rgpd.controller.cMain', {
extend: 'Ext.app.Controller',
models: [
'mExemple',
'mCorpsMetier',
'mUtilisateur'
],
stores: [
'sExemple',
'sCorpsMetier',
'sUtilisateur'
],
views: [
'Exemple.View',
'CorpsMetier.View'
],
init: function() {
this.control({
});
},
onLaunch: function() {
},
});
File app.js should like
Ext.application({
name: 'rgpd',
appFolder: 'app',
requires: [
'rgpd.*'
],
mainView: 'rgpd.view.Viewport',
controllers: [
'cMain'
],
autoCreateViewport: true,
init: function () {
},
launch: function () {
}
});
(Add requires and mainView)
I'm trying to become familiar with Ext JS 5. I took a sencha generated app as
the start point and modified it to see a grid of one line.
But the page is simply blank.
Can anyone, please, show me what am I doing wrong?
I am not familiar with the MVVM pattern but I want to learn it.
Here's my set of files:
And here are the JS sources.
Applications.js
Ext.define('Admin.Application', {
extend: 'Ext.app.Application',
name: 'Admin'
});
Base.js (base class for models)
Ext.define('Admin.model.Base', {
extend: 'Ext.data.Model',
schema: {
namespace: 'Admin.model'
}
});
Item.js (a simple model)
Ext.define('Admin.model.Item', {
extend: 'Admin.model.Base',
fields: [
{ name: 'id', type: 'int' },
{ name: 'title', type: 'string' }
]
});
ItemList.js (a store of items that I want to show in a grid)
Ext.define('Admin.store.ItemList', {
extend: 'Ext.data.Store',
alias: 'store.itemlist',
model: 'Admin.model.Item',
data: [{id: 1, title: 'title1'}]
});
ItemListGrid.js (the panel with the grid)
Ext.define('Admin.view.main.ItemListGrid', {
extend: 'Ext.grid.Panel',
requires: [
'Admin.store.ItemList'
],
alias: 'widget.itemlistgrid',
bind: {
store: '{itemlist}',
title: '<b>Some title</b>',
columns: [{
text: 'id',
dataIndex: 'id'
},{
text: 'title',
dataIndex: 'title'
}]
}
});
Main.js
Ext.define('Admin.view.main.Main', {
extend: 'Ext.container.Container',
requires: [
'Admin.view.main.MainController',
'Admin.view.main.MainModel',
'Admin.view.main.ItemListGrid'
],
xtype: 'app-main',
controller: 'main',
viewModel: {
type: 'main'
},
layout: {
type: 'border'
},
items: [{
xtype: 'panel',
//region: 'west',
width: '100%',
items: [{
xtype: 'itemlistgrid'
}]
}]
});
MainController.js
Ext.define('Admin.view.main.MainController', {
extend: 'Ext.app.ViewController',
alias: 'controller.main'
});
MainModel.js
Ext.define('Admin.view.main.MainModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
data: {
name: 'Admin'
},
bind: {
store: '{itemlist}'
}
});
The sencha app build builds the app without errors. But I don't see the grid.
Before this I tried the default generated app and it showed in my browser OK.
Thank you.
Here's the exact answer to my question https://www.sencha.com/forum/showthread.php?299703-ExtJS-5-first-steps-cannot-see-a-simple-grid-with-one-store&p=1095022&viewfull=1#post1095022
I'm new to Sencha ExtJS. I've just started creating a MVC application. Currently I'm trying to create a login screen for that application, but I can't get reference to my login form from login controller. Here is my code:
app.js
Ext.application({
name: 'Fleximanager',
requires: [
],
controllers: [
'Login'
],
autoCreateViewport: true,
init: function() {
}
});
Viewport.js
Ext.define('Fleximanager.view.Viewport', {
extend: 'Ext.container.Viewport',
requires:[
'Fleximanager.view.login.Flexilogin'
],
layout: 'fit',
items: [{
xtype:'flexilogin'
}]
});
Flexilogin.js
Ext.define('Fleximanager.view.login.Flexilogin', {
extend: 'Ext.panel.Panel',
xtype: 'flexilogin',
layout: {
type: 'vbox',
align: 'center',
pack: 'center'
},
id: 'flexilogin',
style: {background: '#8fc33a'},
items: [{
xtype:'panel',
title: 'Login',
frame: true,
width: 350,
height: 200,
layout: 'fit',
items: {
layout: 'anchor',
id: 'flexiloginform',
bodyPadding: 15,
defaultType: 'textfield',
items: [{
fieldLabel: 'Username',
name: 'username',
allowBlank: false
},{
fieldLabel: 'Password',
name: 'password',
inputType: 'password',
allowBlank: false
}],
buttons: [{
text: 'Register',
id: 'registerbtn',
action: 'register'
},{
text: 'Login',
id: 'loginbtn',
formBind: true,
}]
}
}]
});
and the controller's Login.js
Ext.define('Fleximanager.controller.Login', {
extend: 'Ext.app.Controller',
requires: [
'Fleximanager.view.login.Flexilogin',
],
refs:[{
ref: 'loginbtn',
selector: '#loginbtn'
}],
init: function(){
this.control({
'loginbtn': {
'click': function(){
console.log('click');
}
}
})
}
});
The code is supposed to log 'click' to console after you click the login button, but it does nothing. Can anyone help me?
Thanks for any answer.
The problem lies in how you are referencing the button.
refs:[{
ref: 'loginbtn',
selector: '#loginbtn'
}],
Is creating a reference getter method this.getLoginbtn to use in the controller, but it cannot be used in this.control
The string key in this.control is a identifier like defined in Ext.ComponentQuery.query. It searches for xtype/alias and itemId.
this.control({
'flexilogin #loginbtn': {
^ xtype ^ itemId
Note that you should use itemId instead of id because id must be unique on the page at any moment, itemId should be unique inside a component; change like this:
{
text: 'Login',
itemId: 'loginbtn',
^ replace id by itemId
formBind: true,
name: 'login'
}
Just give a name to your button like this,
{
text: 'Login',
id: 'loginbtn',
formBind: true,
name: 'login'
}
and now in controller, put this code:
this.control({
'button[name="login"]': {
click: function(){
console.log('click');
}
}
})
This will serve your purpose.
My problem is very similar to this question:
ExtJS4 gridPanel data not showing
but in a bit difference in syntax & behaviour, I've spent day(s) to solve by trying in many ways but failed.
Please note that: i must keep the SharpKit.NET generation behavior by calling parent constructor instead of json field construction, like the code bellow
Ext.define("Core.Scripts.model.Book", {
extend: "Ext.data.Model",
fields: ["title", "pages"] // Do not use this
});
Ext.define("Core.Scripts.model.Book", {
extend: "Ext.data.Model",
constructor: function () {
this.callParent([{ fields: ["title", "pages"] }]); // Use this
}
});
This is link to my simplified version on jsfiddle http://jsfiddle.net/thanhptr/LqXan/. Bellow is my copied code, this code still does not fix:
Ext.define("Core.Scripts.model.Book", {
extend: "Ext.data.Model",
constructor: function () {
this.callParent([{ fields: ["title", "pages"] }]);
}
});
Ext.define("Core.Scripts.store.Store", {
extend: "Ext.data.Store",
constructor: function () {
this.callParent([{
model: "Core.Scripts.model.Book",
data: [
{ title: "book 1", pages: 10 },
{ title: "book 2", pages: 20 }
]
}]);
}
});
Ext.define("Core.Scripts.view.GridPanel", {
extend: "Ext.grid.Panel",
constructor: function () {
this.callParent([{
store: new Core.Scripts.store.Store(),
region: "center",
columns: [
{ header: "title", dataIndex: "title" },
{ header: "pages", dataIndex: "pages" }
]
}]);
}
});
Ext.define("Core.Scripts.view.DetailViewport", {
extend: "Ext.container.Viewport",
constructor: function () {
this.callParent([{
frame: true,
layout: "border",
items: [new Core.Scripts.view.GridPanel()]
}]);
}
});
Ext.onReady(function () {
var viewPort = new Core.Scripts.view.DetailViewport();
});
I couldn't get your example working either, but I changed some code up and got it to work.
Ext.define("Core.Scripts.model.Book", {
extend: "Ext.data.Model",
fields: ["title", "pages"]
});
Ext.define("Core.Scripts.store.Store", {
extend: "Ext.data.Store",
model: "Core.Scripts.model.Book",
data: [
{ title: "book 1", pages: 10 },
{ title: "book 2", pages: 20 }
]
});
Ext.define("Core.Scripts.view.GridPanel", {
extend: "Ext.grid.Panel",
region: "center",
height: '200',
store: Ext.create('Core.Scripts.store.Store'),
columns: [
{ header: "title", dataIndex: "title" },
{ header: "pages", dataIndex: "pages" }
]
});
Ext.define("Core.Scripts.view.DetailViewport", {
extend: "Ext.container.Viewport",
frame: true,
layout: "border",
initComponent: function () {
this.items = [new Core.Scripts.view.GridPanel];
this.callParent(arguments);
}
});
Ext.onReady(function () {
var viewPort = new Core.Scripts.view.DetailViewport();
});
I am trying to populate a Ext Js combo box using local array list. In the Ext Js examples, the combo is populated from a different states.js file.
In my example the data should come from local variable. Its not working.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Combo Boxes</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js">
</head>
<body>
<script type="text/javascript">
var exampleData2 = [['1', 'hello'],['2', 'hi'],['3', 'bye']];
Ext.onReady(function(){
Ext.QuickTips.init();
// simple array store
var store = new Ext.data.ArrayStore({
fields: ['abbr', 'state'],
data : exampleData2
});
var combo = new Ext.form.ComboBox({
store: store,
displayField:'state',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText:'Select a state...',
selectOnFocus:true,
applyTo: 'local-states'
});
</script>
<div>
<input type="text" id="local-states" size="20"/>
</div>
<div id="local-states" style="margin-top:10px">
</body>
</html>
scope, scope, scope
Ext.onReady(function(){
Ext.QuickTips.init(); // simple array store
var exampleData2 = [['1', 'hello'],['2', 'hi'],['3', 'bye']];
var store = new Ext.data.ArrayStore({
fields: ['abbr', 'state'],
data : exampleData2
// or even better data : [['1', 'hello'],['2', 'hi'],['3', 'bye']]
// next to change: combo.getStore().loadData( new_table );
});
var combo = new Ext.form.ComboBox({
store: store,
displayField:'state',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText:'Select a state...',
selectOnFocus:true,
applyTo: 'local-states'
});
});
to get more complex solution
Ext.ux.states = Ext.Extend ( Ex.form.ComboBox, { ....
Below, I have created a store, called Ext.data.FlatStore, which extends the default ArrayStore. During construction, the configured data is processed.
{
xtype: 'combo',
queryMode: 'local',
store: Ext.create('Ext.data.FlatStore', {
data: [ 'yes', 'no', 'maybe' ]
})
}
Demo # JSFiddle
Ext.require(['*']);
String.capitalize = function (str) {
return str.charAt(0).toUpperCase() + str.substr(1).toLowerCase();
};
Ext.define('Ext.data.FlatStore', {
extend: 'Ext.data.ArrayStore',
config: {
data: []
},
fields: [{
name: 'id',
type: 'int'
}, {
name : 'value'
}, {
name: 'display',
type: 'string',
convert: function (newValue, model) {
return String.capitalize(model.get('value'));
}
}],
constructor: function (config) {
var me = this;
config.data = config.data.map(function (value, index, values) {
return [index, value];
});
me.callParent(arguments);
me.loaded = true;
}
}),
Ext.define('App.view.MainView', {
extend: 'Ext.panel.Panel',
xtype: 'mainView',
alias: 'widget.mainview',
controller: 'mainView',
title: 'Outer Panel',
referenceHolder: true,
layout: {
type: 'border'
},
initComponent: function () {
var me = this;
me.items = [{
region: 'center',
xtype: 'panel',
title: 'Inner Panel',
margin: 20,
bodyStyle: 'padding: 8px;',
layout: 'vbox',
items: [{
xtype: 'combo',
store: Ext.create('Ext.data.FlatStore', {
data: [ 'yes', 'no', 'maybe' ]
}),
displayField: 'display',
valueField: 'value',
fieldLabel: 'Response',
typeAhead: true,
queryMode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Choose...',
selectOnFocus: true,
applyTo: 'local-states'
}]
}],
me.callParent();
}
});
Ext.define('App.controller.MainViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.mainView',
init: function () {
var me = this;
}
});
Ext.define('App.app.App', {
extend: 'Ext.app.Application',
name: 'App',
launch: function () {
Ext.create('Ext.Viewport', {
layout: 'fit',
flex: 1,
items: [{
xtype: 'mainview'
}]
});
}
});
Ext.onReady(function () {
Ext.application('App.app.App');
});