Wrong ExtJS5 Grid render - extjs

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

Related

Cannot bind store on Ext.grid.PagingToolbar Extjs

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

TreePanel in ExtJs with direct proxy behaves weird

I'm using Sencha Architect 3.0.1.
I'm trying to use a Model, a TreeStore, and a TreePanel.
The Model:
Ext.define('User.model.ModelClientList', {
extend: 'Ext.data.Model',
fields: [{ name: 'id' }, { name: 'name' }, { name: 'status' } ],
proxy: {
type: 'direct',
directFn: 'UserClient.listClient',
reader: { type: 'json',root: 'data'}
}
});
The TreeStore:
Ext.define('User.store.StoreClientList', {
extend: 'Ext.data.TreeStore',
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
model: 'User.model.ModelClientList',
storeId: 'StoreClientList'
}, cfg)]);
}
});
And the TreePanel:
{
xtype: 'treepanel',
height: 250,
itemId: 'MainClient',
width: 400,
title: 'Clients',
hideHeaders: false,
store: 'StoreClientList',
rootVisible: false,
viewConfig: {loadMask: true},
columns: [
{xtype: 'treecolumn',dataIndex: 'name',text: '..'},
{xtype: 'gridcolumn', dataIndex: 'status', text: '..'}
]
}
The json request to UserClient.listClient returns this:
{
"data":[
{"id":1,"name":"Pluto","status":3,"children":[
{"id":35,"name":"Mela","status":2,"leaf":true},
{"id":36,"name":"Pera","status":1,"leaf":true},
{"id":37,"name":"Arancia","status":1,"leaf":true}]},
{"id":2,"name":"Pippo","status":1,"leaf":true},
{"id":3,"name":"Paperino","status":2,"leaf":true}],
"success":true
}
Now, can someone explain me:
(1) Why, when I click on [+] icon of the first node the application does another ajax request instead of expanding what already got from the previous request
(2) Given this initial view:
Why when I click on the [+] it starts going crazy like this:
It was clearly a problem of Sencha Architect.
I rewrote from scratch in a new project the same architecture and now it works as expected.
Also, I noticed that something was going wrong with Architect becouse of simple operation made it show incomprehensible and undebuggable errors (like "Cannot set property 'DirectCfg' of null").
Unfortunately I cannot state that Sencha Architect is mature for large and complex project.. probably not even for small project. what a pity

Cannot get RowExpander to work in Ext JS

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.

Creating a chart with Sencha Touch 2?

I'm trying to add an chart to my Sencha Touch app.
I have added a view like this and inserted a chart how I saw it on a couple of sites:
Ext.define('dergraph.view.Graph', {
extend: 'Ext.Container',
xtype: 'graph',
requires: [
'Ext.TitleBar'
],
config: {
tabBarPosition: 'bottom',
layout: 'fit',
items: [
{
xtype: 'chart',
animate: true,
store: 'dergraph.store.PhoneBook',
legend: {
position: 'right'
},
axes: [{
type: 'Category',
fields: ['firstName'],
position: 'bottom', //x-axis
title: 'Category'
}, {
type: 'Numeric',
fields: ['value'],
position: 'left', //y-axis
title: 'Value'
}]
}
]
}
});
But now I got in an Error in the Console of the browser: Uncaught Error: [Ext.createByAlias] Cannot create an instance of unrecognized alias: axis.Category.
This is my require-part in the app.js:
requires: [
'Ext.MessageBox',
'Ext.dataview.List',
'Ext.chart.Chart',
'Ext.chart.axis.Numeric',
'Ext.chart.axis.Category'
],
Can somebody help me with this?
The type, xtype, etc. are case-sensitive, and the ones in the library are all lowercase.
So change type: 'Category' to type: 'category', and type: 'Numeric' to type: 'numeric', and your code will run.
You should also read the doc about xtype. This option is used to indicate the type of component to create without having to use the new keyword yourself (allowing lazy initialization). The xtype option is only meaningful in the context of an object you want to instantiate, not one you define. So this line in your code has no effect:
xtype: 'graph',
did you include the Sencha Touch 2 Charts 2 Beta here? And if so, how exactly did you do that? Please start from the point after you downloaded it - I'm a rookie :)

Using Controller to Attach Events (sencha touch / extjs)

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.

Resources