I am getting pretty desperate about this code and have no idea why it is not working. I am trying to load list from json file. He is my code:
views:
main view
Ext.define('Alerts.view.Main', {
extend: 'Ext.Container',
config: {
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Topp Toolbar',
items: [{
xtype: 'button',
text: 'Alerts',
id: 'alertsButton',
handler : function(){
//alert('tap')
var pnl = Ext.getCmp('hiddenPanel');
pnl.showBy(this,"tl-bl");
}
}]
},
{
xtype: 'AlertsList'
},
{
xtype: 'panel',
id: 'hiddenPanel',
// We give it a left and top property to make it floating by default
left: 0,
top: 40,
// Make it modal so you can click the mask to hide the overlay
modal: true,
hideOnMaskTap: true,
// Make it hidden by default
hidden: true,
// Set the width and height of the panel
width: 400,
height: 400,
// Here we specify the #id of the element we created in `index.html`
contentEl: 'content',
// Style the content and make it scrollable
styleHtmlContent: true,
scrollable: true,
// Insert a title docked at the top with a title
items: [
{
docked: 'top',
xtype: 'toolbar',
title: 'Add new',
items: [{
iconCls: 'add',
iconAlign : 'right',
id: 'newIcon',
handler : function(){
alert('icon')
//var pnl = Ext.getCmp('hiddenPanel');
//pnl.showBy(this,"tl-bl");
}
}]
}
]
}
]
}
});
AlertsList view:
Ext.define('Alerts.view.AlertsList', {
extend: 'Ext.Container',
requires: 'Ext.dataview.List',
xtype: "AlertsList",
config: {
fullscreen: true,
title: 'list',
layout: 'fit',
items: [
{
xtype: 'list',
store: 'Alert',
itemTpl: '<h1>item<h1>{name}',
}
]
}
});
model:
Ext.define('Alerts.model.Alert', {
extend: 'Ext.data.Model',
config: {
fields: ['name', 'reason', 'enabled', 'notify', 'phone']
}
});
store:
Ext.define("Alerts.store.Alert", {
extend: 'Ext.data.Store',
config: {
model: "Alerts.model.Alert",
autoLoad: true,
proxy: {
type: "ajax",
url : "app/store/Alerts.json",
reader: {
type: "json",
rootProperty: "alerts"
}
}
}
});
When i run the code, app loads fine, without any warns/errors - console is clear.
The main reason of the wrong behavior is that the store was not created before. Try to add the following changes. Add alias: 'store.alerts' to Alert store. Then use it as store: {type: 'alerts'} in the AlertsList. As mentioned here, this creates a store instance for you. Also I found some issues with the app layout, so I attach here short version of your code with my changes:
Ext.define('Test.view.Main', {
extend: 'Ext.Container',
config: {
layout: 'fit',
items: [{
xtype: 'toolbar',
docked: 'top',
title: 'Topp Toolbar'
}, {
xtype: 'AlertsList'
}]
}
});
Ext.define('Test.view.AlertsList', {
extend: 'Ext.dataview.List',
xtype: "AlertsList",
config: {
store: {
type: 'alerts'
},
itemTpl: '<h1>item<h1>{name}',
}
});
Ext.define('Test.model.Alert', {
extend: 'Ext.data.Model',
config: {
fields: ['name', 'reason', 'enabled', 'notify', 'phone']
}
});
Ext.define("Test.store.Alert", {
extend: 'Ext.data.Store',
alias: 'store.alerts',
config: {
model: "Test.model.Alert",
autoLoad: true,
proxy: {
type: "ajax",
url: "app/store/Alerts.json",
reader: {
type: "json",
rootProperty: "alerts"
}
}
}
});
Related
I have a combo box that I need to get access to the store in code so that I can apply a filter to it. Here is the definition of the combo.
//ItemGeneralPanel.js
Ext.define('myCompany.view.item.ItemGeneralPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.myApp.ItemGeneralPanel',
layout: 'vbox',
bodyPadding: 4,
defaults: { width: 800 },
items: [
{
xtype: 'combobox',
fieldLabel: 'Replenishment Source',
displayField: 'name',
valueField: 'id',
queryMode: 'local',
forceSelection: true,
bind: { value: '{item.sourceId}', store: '{replenishmentSourceList}' }
},
]
});
My ItemController has this in it:
//ItemController.js
stores: [
'item.ItemList',
'item.ReplenishmentSourceList'
],
And my store looks like this:
//ReplenishmentSourceList.js
Ext.define('myCompany.store.item.ReplenishmentSourceList', {
extend: 'Ext.data.Store',
model: 'myCompany.model.Source',
sorters: 'name'
});
And the model just has a list of fields(Source.js):
How do I reference this combo box in my controller so that I can get a reference to its store and then apply a filter to the results coming back. Something like this:
//ItemEditViewController.js
myFunction: function (facilId) {
this.lookup('replenishmentSourceList').getStore().load({
scope: this,
callback: function (records, operation, success) {
if (!success) {
Ext.log({ level: 'error', msg: 'Error loading facility list', dump: operation });
var text = (operation.getError() ? operation.getError().response.responseText : operation.getResponse().responseText);
var msg = Ext.decode(text).message;
Ext.Msg.show({ title: 'Error', msg: 'Error loading Source data.<br>' + msg, buttons: Ext.Msg.OK, icon: Ext.Msg.ERROR });
}
else {
this.lookup('replenishmentSourceList').getStore().setFilters({
property: 'facilityId',
operator: '==',
value: 'facilId'
});
This isn't working, so I figured if I could get the combobox, I could do something like:
myRefToComboBox.getStore()....
Any ideas?
If you want to get the store directly then you can simply use storeId and perform a lookup on created stores Ext.data.StoreManager.lookup('myStore') which will return the store instance. Refer docs for Ext.data.StoreManager.
Below is a sample which you can try out in fiddle (Check console as it prints the store instance using store manager):
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('myCompany.store.item.ReplenishmentSourceList', {
alias: 'store.replenishmentSourceList',
extend: 'Ext.data.Store',
sorters: 'name'
});
Ext.define('myCompany.view.item.ItemGeneralPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.myApp.ItemGeneralPanel',
layout: 'vbox',
bodyPadding: 4,
defaults: {
width: 800
},
items: [{
xtype: 'combobox',
fieldLabel: 'Replenishment Source',
displayField: 'name',
valueField: 'id',
queryMode: 'local',
forceSelection: true,
store: {
type: 'replenishmentSourceList',
storeId: 'myStore'
}
}, ]
});
Ext.create({
xtype: 'myApp.ItemGeneralPanel',
renderTo: Ext.getBody()
});
console.log(Ext.data.StoreManager.lookup('myStore'));
}
});
Edit
The above is one way to get the store, another way is to get the combobox or the panel view from controller using getView() and then get the store.
Below is the code with controller (check the console):
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('MyApp.UserController', {
alias: 'controller.user',
extend: 'Ext.app.ViewController',
myFunction: function (facilId) {
console.log(this.getView())
console.log(this.getView().down('#replenishmentCombo').getStore());
}
});
Ext.define('myCompany.store.item.ReplenishmentSourceList', {
alias: 'store.replenishmentSourceList',
extend: 'Ext.data.Store',
sorters: 'name'
});
Ext.define('myCompany.view.item.ItemGeneralPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.myApp.ItemGeneralPanel',
controller: 'user',
layout: 'vbox',
bodyPadding: 4,
defaults: {
width: 800
},
listeners: {
boxready: 'myFunction'
},
items: [{
xtype: 'combobox',
itemId: 'replenishmentCombo',
fieldLabel: 'Replenishment Source',
displayField: 'name',
valueField: 'id',
queryMode: 'local',
forceSelection: true,
store: {
type: 'replenishmentSourceList',
storeId: 'myStore'
}
}, ]
});
Ext.create({
xtype: 'myApp.ItemGeneralPanel',
renderTo: Ext.getBody()
});
// console.log(Ext.data.StoreManager.lookup('myStore'));
}
});
i have tried do calling form by button from Main view using controller. So I use Main view js, form js and controller js:
Ext.define('App.view.main.Main', {
extend: 'Ext.form.Panel',
id:'control-panel',
. . .
items: [{
xtype:'button',
ui: 'action',
text: 'Renter',
id: 'RenterId',
handler:'adClick'
. . .
and controller js:
Ext.define('App.view.main.ButtonController', {
extend: 'Ext.app.ViewController',
alias: 'controller.button',
requires: ['App.view.forms.RenterData',
],
views: ['App.view.main.Main'],
refs: [{
ref: 'control-panel',
selector: 'control-panel'
}],
adClick: function() {
Ext.create('Ext.panel.Panel', {
title:'Test',
layout: 'fit',
autoshow: true,
items: {
xtype:'panelxtype'
}
})
}
});
When I try clicking my button, I face with next: No method "nameOfHandler" named on Ext.Button. So i think handler from Main view dosn't work...
Here is a working example of what you want with a controller Fiddle
app.js
Ext.application({
name: 'Test',
requires: ['Test.view.Main', 'Test.view.MyForm'],
mainView: 'Test.view.Main',
launch: function () {}
});
app/view/Main.js
Ext.define('Test.view.Main', {
extend: 'Ext.container.Viewport',
title: 'main',
xtype: 'main',
requires:['Test.view.MainController'],
controller:'mainController',
width: 600,
height: 400,
layout: 'border',
items: [{
region: 'north',
height: 100,
items: [{
xtype: 'button',
text: 'Open Form in pop up window',
handler: 'onOpenForm'
}, {}, {
xtype: 'button',
text: 'Open Form View Port Center Region',
handler: 'onOpenFormInPanel'
}]
}, {
region: 'center',
id: 'mycenter',
title: 'Center Region',
items: [{
html: ''
}]
}]
})
app/view/MainController.js
Ext.define('Test.view.MainController', {
extend: 'Ext.app.ViewController',
alias: 'controller.mainController',
onOpenFormInPanel: function () {
let myForm = Ext.create('Test.view.MyForm')
this.getView().items.getAt(1).add(myForm);
},
onOpenForm: function () {
Ext.create('Ext.window.Window', {
title: 'Popup',
width: 400,
height: 100,
autoShow: true,
items: {
xtype: 'myForm'
}
})
}
});
app/view/MyForm.js
Ext.define('Test.view.MyForm', {
extend: 'Ext.form.Panel',
xtype: 'myForm',
width: 400,
height: 200,
items: [{
xtype: 'textfield',
name: 'mtfield',
fieldLabel: 'TextField'
}]
})
I want to have a dynamic tree panel in my project. I use from sencha docs example For this component.
But, I have a error when run my project:
Ext.data.schema.Schema.lookupEntity(): No such Entity "Category".
MyProject/Model/Category.js:
Ext.define('MyProject.model.Category',{
extend: 'Ext.data.Model',
fields: ['id', {
name: 'name',
type: 'string'
}]
});
MyProject/classic/src/view/category/Cateogry.js:
Ext.define('MyProject.view.category.Category', function(){
var store = Ext.create('Ext.data.TreeStore', {
model: 'Category',
root: {
name: 'Product'
}
});
var items = [{
items:[{
xtype: 'textfield',
fieldLabel: 'Name'
},{
xtype: 'treepanel',
reference: 'treepanel',
height: 200,
width: 400,
frame: true,
store: store,
rootVisible: false
},{
xtype: 'button',
text: 'Add',
listeners: {
click: 'onClick'
}
}]
}];
return{
extend: 'Ext.panel.Panel',
requires: [
'Ext.form.Panel',
'Ext.rtl.*'
],
controller: 'categorycontroller',
alias: 'widget.category',
layout: 'vbox',
items: items
};
});
You have to add your model as required:
...
requires: [
'Ext.form.Panel',
'Ext.rtl.*',
'ProjectName.model.Category'
],
...
I'd been searching for so long and I cannot find a concrete answer. Let's say I have an extended control from panel like this:
Ext.define('MyApp.view.admin.User',{
extend: 'Ext.panel.Panel',
config: {
canAdd: false,
canDelete: false,
canEdit: false
},
constructor: function(config){
this.initConfig(config);
this.callParent(arguments);
},
xtype: 'user',
requires: [
'MyApp.view.admin.UsersGrid',
'MyApp.view.admin.UserModel',
'MyApp.view.admin.UserController',
'MyApp.model.User'
],
viewModel: {
type: 'user'
},
controller: 'user',
frame: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
xtype: 'users-grid',
flex: 1
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
text: 'Add',
glyph: MyApp.util.Glyphs.getGlyph('add'),
hidden: **[config.canAdd]**
listeners: {
click: 'onAdd'
}
},
{
xtype: 'button',
bind: {
disabled: '{!usersGrid.selection}'
},
text: 'Edit',
hidden: **[config.canEdit]**
hidden: this.setElementConfiguration,
glyph: Mofeg.util.Glyphs.getGlyph('edit'),
listeners: {
click: 'onEdit'
}
},
{
xtype: 'button',
bind: {
disabled: '{!usersGrid.selection}'
},
text: 'Eliminar',
glyph: MyApp.util.Glyphs.getGlyph('destroy'),
listeners: {
click: 'onDelete'
}
}
]
}
]});
I want to apply the hidden properties of the buttons based on the initial configurations, how can I accomplish it?
You can write an initComponent:
initComponent: function () {
var me = this,
editButton = Ext.ComponentQuery.query('button[itemId=edit]')[0],
canEdit = me.getCanEdit();
editButton.setHidden(canEdit);
me.callParent(arguments);
}
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