I'm developing a extjs project using 6.5.3 version and modern toolkit but I have a problem trying to implement a dataview with pagingtoolbar, my view has a viewmodel that contains a store with rest proxy, but when I watch the application, the navigator throw the next error:
[E] Ext.mixin.Bindable.applyBind(): Cannot bind store on
Ext.grid.PagingToolbar - missing a setStore method.
Uncaught Error: Cannot bind store on Ext.grid.PagingToolbar - missing
a setStore method.
Uncaught TypeError: this[binding._config.names.set] is not a function
It's my code:
Ext.define('App.view.qlist', {
extend: 'Ext.Panel',
viewModel: 'myViewmodel',
controller: 'mycontroller',
items: [{
xtype: 'dataview',
cls: 'qcls',
bind: {
store: '{allmyquest}'
},
itemTpl: questTpl
}, {
xtype: 'pagingtoolbar',
bind: {
store: '{allmyquest}'
},
dock: 'bottom',
displayInfo: true
}]
});
Is it the correct form to implement pagination in Extjs Modern toolkit v6.5.3?
the documentation provides an example how to do that:
items: [
Ext.create('Ext.grid.Grid', {
title: 'DC Personnel',
store: store,
plugins: {
pagingtoolbar: true
},
columns: [
{ text: 'First Name', dataIndex: 'fname', flex: 1 },
{ text: 'Last Name', dataIndex: 'lname', flex: 1 },
{ text: 'Talent', dataIndex: 'talent', flex: 1 }
]
})
]
it's a default toolbar of the grid; therefore one just has to enable the plugin with true.
It's the first thing in the docs:
A toolbar used for paging in grids. Do not instantiate this class
directly. Use the Ext.grid.plugin.PagingToolbar config of the Paging
Toolbar grid plugin to configure its options
Related
I'm just getting started with ExtJS and am looking to create a grid which will populate based on data it will receive from the server as a json. I'm having trouble understanding the architecture and how to separate information to correctly display on the grid view, since it seems much more complex and involved than if I were working in something like vanilla Javascript.
I currently have it working when the data has been hardcoded into the view here:
Ext.define('MyApp.view.main.Main', {
extend: 'Ext.container.Viewport',
requires: [
'MyApp.view.main.MainController',
'MyApp.view.main.MainModel',
'Ext.panel.Panel',
'Ext.grid.Panel'
],
/*
...Other containers and panels here
*/
xtype: 'grid',
width: '99%',
flex: 1,
store: {
fields:['name', 'email', 'address', 'hobby', 'notes'],
data:[
{ name: 'Rate', email: "rate#example.com",
address: "382 Kilmanjaro", hobby: "tennis", notes: "Lorem ipsum dolor.."},
{ name: 'Jimjam', email: "jim#example.com",
address: "889 McKinley", hobby: "none"}
],
proxy: {
type: 'memory'
}
},
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email'},
{ text: 'address', dataIndex: 'address' },
{ text: 'hobby', dataIndex: 'hobby'},
{ text: 'Notes', dataIndex: 'notes', flex: 1, cellWrap: true}
]
}]
But I'd like to move the store and data out of the view, and ideally read from a json file (and later a GET request). Other questions I've seen have had a bunch of different methods to approach this but I find them all rather confusing and none seem to work for me, especially with different versions (I'm using ExtJS 5.1.2).
I'd appreciate any pointers in the right direction as to where to place my store and data and how to bind it correctly to the view. I think my main issues lie with usage of the associated Controller.js, Model.js, and Store.js files, and what kind of information goes in them.
Just updating that I got it working! I checked out the kitchen sink examples and old documentation from ExtJS4 to understand how the architecture worked.
My main issue was being new to ExtJS and attempting to create something while learning it at the same time, so I hope any other newbies can wrap their heads around this!
The basic idea is that there is a Model, Store, and View, and I've understood it as a Model being a class, a Store being a Collection of those objects, and the view being a display. A Store depends on a Model, and a View (at least, the grid I was building) depends on a Store. I tried to avoid separating too many views, writing javascript functions and overriding initComponent, but this was exactly what I had to do to get it working.
So I've written architecture like this:
model/Person.js:
Ext.define('MyApp.model.Person', {
extend: 'Ext.data.Model',
fields:['name', 'email', 'address', 'hobby', 'notes'],
proxy: {
type: 'ajax',
url: 'data/UserResponse.json',
reader: {
type: 'json',
rootProperty: 'results',
}
}
store/Persons.js:
Ext.define('MyApp.store.Persons', {
extend: 'Ext.data.Store',
/*Model for the store*/
requires: 'MyApp.model.Person',
model: 'MyApp.model.Person'
});
view/main/Main.js:
Ext.define('MyApp.view.main.Main', {
extend: 'Ext.container.Viewport',
requires: [
'Ext.panel.Panel',
'Ext.grid.Panel',
'MyApp.view.main.PersonGrid'
],
xtype: 'container',
controller: 'main',
viewModel: {
type: 'main'
},
layout: {
type: 'vbox',
align: 'center'
},
width: '100%',
items:
[{
xtype: 'panel',
flex: 1,
border: false,
width: '98%',
layout: {
type: 'vbox',
align: 'stretch'
},
items:
[{
xtype: 'panel',
height: 30,
margin: '5 5 1 5',
flex: 1,
width: '98%',
layout: {
type: 'vbox',
align: 'center'
},
title: 'Users - USA',
collapsible: true,
items: [
{
xtype: 'person-grid',
rootVisible: true,
store: 'Persons'
}]
}]
}]
});
view/main/PersonGrid.js:
Ext.define('MyApp.view.main.PersonGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.person-grid',
xtype: 'grid',
width: '99%',
flex: 1,
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email'},
{ text: 'address', dataIndex: 'address' },
{ text: 'hobby', dataIndex: 'hobby'},
{ text: 'Notes', dataIndex: 'notes', flex: 1, cellWrap: true}
],
initComponent: function() {
//initComponent taken from http://examples.sencha.com/extjs/5.1.0/examples/kitchensink/#xml-grid
var me = this;
this.callParent();
this.on('afterlayout', this.loadStore, this, {
delay: 1,
single: true
});
},
loadStore: function() {
this.getStore().load();
}
});
data/UserResponse.json:
{
"success": true,
"results":[
{ name: 'Rate', email: "rate#example.com",
address: "382 Kilmanjaro", hobby: "tennis", notes: "Lorem ipsum dolor.."},
{ name: 'Jimjam', email: "jim#example.com",
address: "889 McKinley", hobby: "none"}
]
}
app/Application.js:
Ext.define('MyApp.Application', {
extend: 'Ext.app.Application',
models: ['Person'],
stores: ['Persons'],
launch: function () {
// TODO - Launch the application
}
});
The main difference from what I was attempting before was to separate the grid into its own view, and edit the initComponent function here to load the store (which I wasn't doing earlier)! Earlier, I had the grid and its configurations nested within the items{} array of other components and trying to autoLoad the store, or utilize storeId and other methods of binding store to grid.
The above architecture works perfectly for me, and I am able to read data from my json file and mock responses from server! :)
I was trying to develop a base container by extending Ext.Container, which have some default items in it. A subclass should add the items to the child component of the base class and not directly to the container instead. How to do this?
May i override the setItems/applyItems method to add the items to navigationView.add(items); ?? I'm unsure about how this works. Since i'm new to ExtJs, unable to identify which is the way to do it generically so that it won't affect my subclass to add n number of items to it either using inline or add(item) method.
AbstractClass
Ext.define('MyApp.container.AbstractMainContainer', {
extend: 'Ext.Container',
xtype: 'abstractmaincontainer',
requires: [
'MyApp.container.NavigationView',
'MyApp.control.NavigationBar'
],
config: {
layout: {
type: 'vbox',
pack: 'start',
align: 'stretch'
},
flex: 1,
height: '100%',
width: '100%'
},
controller: 'maincontroller',
items: [{
xtype: 'navbar',
itemId: 'navbar'
}, {
xtype: 'navigationview',
itemId: 'navigationview',
reference: 'navigationview',
navigationBar: false,
layout: {
pack: 'start',
align: 'stretch'
},
flex: 1,
height: '100%',
items: [
// new item should added here
]
}],
/**
* #method getContentView add the items to this rather than directly
* #return {void}
*/
getContentView: function() {
return this.down('#navigationview');
},
});
SubClass
Ext.define('MyApp.main.view.MainContainer', {
extend: 'MyApp.container.AbstractMainContainer',
requires: [
'MyApp.container.AbstractMainContainer'
],
config: {
},
items: [{
// we should not directly add items here this will remove the navbar and navigation view
// HOW TO ADD THIS IN A GENERIC WAY??
xtype: 'container',
layout:{
type:'card'
},
items: [{
xtype: 'button',
role: 'nav',
title: 'Card 1',
text: 'go to next',
handler: function() {
}
}, {
itemId: 'myCard',
title: 'Card 2',
html: '<h1>Card 2</h1>'
}],
}],
});
AFAIK, there's no "automatic" way to do it.
I can suggest some approaches:
First of all, check if you really need to do this: for example, you could move the navbar to the dockedItems config and move the navigationview one level up.
So your AbstractContainer will extend navigationview, navbar will be a dockedItem, and you will be able to use the items config as usual.
Otherwise, you could use a different config (let's say "extraItems" or "navItems"), and merge them overriding the abstract class initComponent function.
There, after a callParent that actually initialize the navigationview, you could do something like
this.down('navigationview').add(this.extraItems);
Learning ExtJS5 I have a problem with grid. I have such panel description:
{
xtype: 'tabpanel',
items: [
{
title: 'Texts',
xtype: 'gridpanel',
reference: 'textGrid',
store: Ext.create('Ext.data.Store', {
fields: ['active', 'textValue'],
data: {
items: [
{active: true, textValue: 'test'},
{active: false, textValue: 'no test'}
]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
}),
columns: [
{ xtype: 'checkcolumn',
text: 'Enable', dataIndex: 'active', width: 100,
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
}
},
{ text: 'Value', dataIndex: 'textValue', flex: 1,
editor: {
xtype: 'textfield',
allowBlank: false
}
}
],
plugins: {
ptype: 'rowediting',
clicksToEdit: 1
}
},
{
title: 'Images',
xtype: 'gridpanel'
}
]
}
But it's rendered wrong. I don't see a checkbox and area for text column is too small. There're no any errors in firebug console.
What's wrong with code?
Thanks.
I had this problem too and it looks like this sometimes happens when there are requires missing in your classes.
Look into the console for warnings like these:
[Ext.Loader] Synchronously loading 'Ext.layout.container.Border'; consider adding Ext.require('Ext.layout.container.Border') above Ext.onReady
And add the missing classes to the requires array of the class that uses them like this:
Ext.define('Test.view.main.Main', {
extend: 'Ext.container.Container',
requires: [
'Ext.layout.container.Border',
'Ext.tab.Panel'
],
...
Styles are missing.
If you created the proyect with Sencha Command (you are loading proyect with microloader bootstrap, see your index.html), then you must be sure you have defined all requires of the components that you used on your app and launch this command from the root directory:
sencha app build
This command compile the css that will be use on your app (among other things). You can try too:
sencha app refresh
And a latest two command if the latest don't work (use both):
sencha app clean
sencha app build
Hope it work
I've been scouring the Internet for a week now trying to figure out why I can't get a simple rowexpander to work. I believe I've tried just about everything.
Here's my code:
Ext.define('AM.view.metadata.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.metadatalist',
title: '<center>Results</center>',
store: 'Metadata',
requires: ['Ext.*'],
collapsible: true,
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [
{ xtype: 'tbtext', text: 'Loading...', itemId: 'recordNumberItem' },
'->',
{ text: 'Print', itemId: 'print' },
'-',
{ text: 'Export', itemId: 'export' }
]
}],
initComponent: function() {
this.columns = [
{header: 'Technical Name', dataIndex: 'TECH_NAME', flex: 4, tdCls: 'grid_cell'},
{header: 'Privacy', dataIndex: 'PRIVACY_INDICATOR', flex: 3, tdCls: 'grid_cell'}
];
this.callParent(arguments); //Calls the parent method of the current method in order to override
var store = this.getStore(); //Retrieving number of records returned
textItem = this.down('#recordNumberItem');
textItem.setText('Number of records: ' + store.getCount());
var val = Ext.getCmp('criteria_1_input').getValue();
store.filter('KBE_ID', val);
},
plugins: [{
ptype: 'rowexpander',
id: 'rowexpangder',
rowBodyTpl : [
'<p>Name <b>{KBE_ID}</b></p>'
]
}]
});
In Firefox (using Firebug) my entire app breaks when I attempt to put the plugin onto the grid. In IE9, it's telling me:
`SCRIPT5007: Unable to get value of the property 'substring': object is null or undefined`
A couple things to note:
-I don't have a web server (i.e. Tomcat) set up
-I'm using version 4.1.1
-I'm creating this view using ' xtype: 'metadalist' ' in my app.js
Any ideas will be greatly appreciated, thanks!
Is the Ext.grid.plugin.RowExpanderView class loaded?
Not sure how the wildcards work, but you should try to require the exact class:
//...
requires: ['Ext.*', 'Ext.grid.plugin.RowExpanderView'],
//...
Edit: Also, you should use pluginId instead of id for the plugin.
I have a basic grid with a toolbar but want to use a plugIn for the toolbar. I can get the code working just fine when writing it manually, but I want to be able to use Architect 2. Here is a snippet...
{
xtype: 'gridpanel',
title: 'My Grid Panel',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'String'
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
text: 'Number'
}
],
dockedItems: [
{
xtype: 'pagingtoolbar',
dock: 'bottom',
width: 360,
displayInfo: true,
plugins: new Ext.ux.ProgressBarPager()
}
]
}
plugins: new Ext.ux.ProgressBarPager() is the line that I cannot add using Architect 2. I cannot find the plugins property anywhere on the config panel. Any idea on how to add the plugin?
I think what you can do is override your pagingtoolbar and do something like this:
Ext.define('MyApp.view.override.ProgressBarPager.PagingToolbar', {
requires: 'MyApp.view.ProgressBarPager.PagingToolbar'
}, function() {
Ext.override(MyApp.view.ProgressBarPager.PagingToolbar, {
initComponent: function () {
this.plugins = [new Ext.ux.ProgressBarPager()];
this.callParent(arguments);
}
});
});
I know the question was for an earlier version of SA. In SA 4.2.3 you can add a component property that doesn't appear in the configs list by typing the property name in the editor above the config and pressing enter. Then you can change the type of the property value to whatever suits your needs. Using this method you can add the plugins property, then you can make it of type Array, then you edit the value and you can enter something like [{ptype: 'datatip'}] or in your case [new Ext.ux.ProgressBarPager()]