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.
Related
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
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 am loading inline data in my store with a memory proxy and enabling paging, but the problem is that my paging toolbar only shows the first page of data. The "Next" arrow button doesn't update the grid either. I have links to images at the bottom to show what the grid panel looks like.
This is my store:
Ext.define('PagingBug.store.MyGrid', {
extend: 'Ext.data.Store',
alias: 'store.mygrid',
data: [
[ 'Data1', 'Something1' ],
[ 'Data2', 'Something2' ],
[ 'Data3', 'Something3' ],
[ 'Data4', 'Something4' ],
[ 'Data5', 'Something5' ],
[ 'Data6', 'Something6' ],
[ 'Data7', 'Something7' ],
[ 'Data8', 'Something8' ]
],
fields: [
{name: 'field1'},
{name: 'field2'}
],
pageSize: 5,
proxy: {
type: 'memory',
enablePaging: true,
reader: {
type: 'array'
}
}
});
This is my view:
Ext.define('PagingBug.view.main.Main', {
extend: 'Ext.container.Container',
requires: [
'PagingBug.store.MyGrid'
],
xtype: 'app-main',
items: [{
xtype: 'gridpanel',
store: {
type: 'mygrid'
},
columns: [
{text: 'Field 1', dataIndex: 'field1'},
{text: 'Field 2', dataIndex: 'field2'}
],
dockedItems: [{
xtype: 'pagingtoolbar',
store: {
type: 'mygrid'
},
dock: 'bottom',
displayInfo: true
}],
}]
});
Images of the grid panel:
http://i.stack.imgur.com/PCqSC.png
http://i.stack.imgur.com/S8CXU.png
Can someone please point out what I am doing wrong? Thanks.
This is actually a very subtle error on your part; In your Main class you are defining a store configuration of type: 'mygrid' on your gridpanel, you are then defining the store configuration a second time on the pagingtoolbar - this is creating two seperate store instances and subsequently confusing the toolbar component.
You can still solve this declaratively though by defining your store in a viewModel and binding a reference to the same store on the two components, for example:
Ext.define('PagingBug.view.main.Main', {
extend: 'Ext.container.Container',
requires: [
'PagingBug.store.MyGrid'
],
viewModel: {
stores: {
myGridStore: {
type: 'mygrid'
}
}
},
xtype: 'app-main',
items: [{
xtype: 'gridpanel',
bind: '{myGridStore}',
columns: [
{text: 'Field 1', dataIndex: 'field1'},
{text: 'Field 2', dataIndex: 'field2'}
],
dockedItems: [{
xtype: 'pagingtoolbar',
bind: '{myGridStore}',
dock: 'bottom',
displayInfo: true
}],
}]
});
ยป Fiddle
I've taken your code and simplified it slightly to create a fiddle, My fiddle is working and showing the correct pagination using ExtJs 5.0.1 but does not currently work with ExtJs 5.1. This could be a bug that needs reporting, I have posted in the Sencha Bugs forum for further investigation in the meantime.
In case the fiddle link ever breaks, here is the code used:
Ext.application({
name: 'Fiddle',
launch: function() {
var pagingStore = Ext.create('Ext.data.Store', {
data: [
['Data1', 'Something1'],
['Data2', 'Something2'],
['Data3', 'Something3'],
['Data4', 'Something4'],
['Data5', 'Something5'],
['Data6', 'Something6'],
['Data7', 'Something7'],
['Data8', 'Something8']
],
fields: [{
name: 'field1'
}, {
name: 'field2'
}],
pageSize: 5,
proxy: {
type: 'memory',
enablePaging: true,
reader: {
type: 'array'
}
}
});
Ext.define('MainView', {
extend: 'Ext.container.Container',
items: [{
xtype: 'gridpanel',
store: pagingStore,
columns: [{
text: 'Field 1',
dataIndex: 'field1'
}, {
text: 'Field 2',
dataIndex: 'field2'
}],
dockedItems: [{
xtype: 'pagingtoolbar',
store: pagingStore,
dock: 'bottom',
displayInfo: true
}],
}]
});
Ext.create("MainView", {
renderTo: Ext.getBody()
});
}
});
Once I get a response from the Sencha Forums I will update the answer. In the meantime you may need to look at a work around or use the working version.
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
Ext.define('MyApp.view.MyVehicleGridPanel', {
extend: 'Ext.grid.Panel',
alias: 'widget.mygrid',
header: false,
store: UserStore,
multiSelect: false,
columns: [
{
xtype: 'gridcolumn',
dataIndex: '_id',
text: 'Vehicle ID'
},
{
xtype: 'gridcolumn',
width: 126,
dataIndex: 'Plat_No',
text: 'Plat Number'
},
{
xtype: 'gridcolumn',
width: 200,
dataIndex: 'Name',
text: 'Added By'
}
]
})
i dont have any id declare in the gridpanel, because it will used in dynamicly,
so, i m using alias to find my grid component like below code
var grid = Ext.ComponentQuery.query('mygrid');
console.log( Ext.ComponentQuery.query('mygrid') );
if (grid.getSelectionModel().hasSelection()) { //error at here
var row = grid.getSelectionModel().getSelection()[0];
console.log(row.get('Plat_No'));
};
But, firebug return error with TypeError: grid.getSelectionModel is not a function
any other way to find my gridpanel component?
Ext.ComponentQuery.query() returns an array of matched Components from within the passed root object.
So if you have only one mygrid component in your application, you can get your grid like this:
var grid = Ext.ComponentQuery.query('mygrid')[0];