Trying to create an extjs app that reads csv data and parses it into a grid, I'm working from a prior jsfiddle that had a simple simpson grid now adding to it the data dynamically.
I've confirmed the csv data retrieval works and parsing it into a json format, I need assistance in how to debug this since the screen doesn't show any bug.
The fiddle is https://jsfiddle.net/32nb4aey/
...
var result_data = parsetoJSON(parsed_result)
Ext.create('Ext.data.Store', {
storeId: 'nordanStore',
fields:[ 'name', 'firstname', 'lastname', 'department', 'login', 'status', 'email'],
data: result_data
});
Ext.create('Ext.grid.Panel', {
title: 'Norda Tech User Data',
store: Ext.data.StoreManager.lookup('nordanStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'First Name', dataIndex: 'firstname' },
{ text: 'Last Name', dataIndex: 'lastname' },
{ text: 'Department', dataIndex: 'department' },
{ text: 'Login', dataIndex: 'login' },
{ text: 'Status', dataIndex: 'status' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
Related
Binding checkbox selectionmodel in initComponent is not working as expected in grid component of extjs
What could be the problem in the code? attaching fiddle
https://fiddle.sencha.com/#view/editor&fiddle/2g8r
In order to bind a checkbox in grid, there is a built in plugin.How ever ,if you need to attach the selModel ONLY in the initComponent.Then define grid,attach selmodel and create instance of it. .Here is the updated fiddle https://fiddle.sencha.com/#view/editor&fiddle/2ghc
Ext.define('OuterGrid', {
extend: 'Ext.grid.Panel',
store: userStore,
storeId: 'mystore',
width: 400,
height: 500,
title: 'Sample Application',
columns: [{
text: 'Name',
dataIndex: 'name',
width: 100,
sortable: true
}, {
text: 'Email Address',
dataIndex: 'email',
width: 150,
}, {
text: 'Phone Number',
dataIndex: 'phone',
flex: 1,
}],
initComponent: function() {
this.selModel = Ext.create('Ext.selection.CheckboxModel', {
columns: [{
xtype: 'checkcolumn',
text: 'Active',
dataIndex: 'id'
}],
});
this.callParent();
}
});
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('OuterGrid', {
renderTo: Ext.getBody(),
});
}
});
I have a grid which has a column of checkboxes. I have used xtype checkcolumn
for this. follow fiddle here: https://fiddle.sencha.com/#view/editor&fiddle/2ano
Now I want to uncheck checkbox at perticular(in this case 2nd) row on click of given button. I tried getting them using xtypes but no luck.
finally I found a workaround.
store.getAt(1).data.active = false;
grid.getView().refresh();
It works but not sure if its the correct way to do so.
I will be glad for any suggestions.
Thank you.
One way as per your code.
You can use this methods of grid store store.each(), store.clearFilter() and store.filter('active',true).
In this FIDDLE, you can check here uncheck checked columns using record.set('active',false).
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone', 'active'],
data: [{
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '555-111-1224',
active: false
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '555-222-1234',
active: true
}, {
name: 'Homer',
email: 'homer#simpsons.com',
phone: '555-222-1244',
active: false
}, {
name: 'Marge',
email: 'marge#simpsons.com',
phone: '555-222-1254',
active: false
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
itemId: 'test',
renderTo: Ext.getBody(),
store: store,
buttons: [{
text: 'Un check',
handler: function () {
var store = this.up('grid').getStore();
store.clearFilter();
store.filter('active', true);
store.each(function (rec) {
rec.set('active', false);
});
store.clearFilter();
}
}],
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}, {
xtype: 'checkcolumn',
text: 'Active',
dataIndex: 'active'
}]
});
Another way as per your code.
You can use selModel and selType configs for grid.
In this FIDDLE, I have created a demo using selType and selModel config. it will help you or guide you more about grid checkbox selection.
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: store,
id: 'testGrid',
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
renderTo: Ext.getBody(),
selModel: {
checkOnly: false,
//injectCheckbox: 'last',
mode: 'SIMPLE'
},
selType: 'checkboxmodel',
buttons: [{
text: 'Select All',
handler: function () {
Ext.getCmp('testGrid').getSelectionModel().selectAll();
}
}, {
text: 'Deselect All',
handler: function () {
Ext.getCmp('testGrid').getSelectionModel().deselectAll();
}
}]
});
hi i just learning ext js few months, I want to create a GUI like http://loianegroner.com/wp-content/uploads/2012/05/extjs4-mvc-grid-binded-form-loiane.jpg . when an item is clicked will fill the form . any suggestion how to make it??
Update
This is my code, But Grid no bind to form when item click on grid, What is wrong?
Controller: Detail.js
Ext.define('UserApp.controller.Detail', {
extend: 'Ext.app.Controller',
stores: ['User'],
models: ['User'],
views: ['user.Detail','user.listDetail'],
refs: [{
ref: 'Detail',
selector: 'form'
}],
init: function() {
this.control({
'listDetail': {
selectionchange: this.gridSelectionChange,
viewready: this.onViewReady
}
});
},
gridSelectionChange: function(model, records) {
if (records[0]) {
console.log('clicked item');
this.getDetail().getForm().loadRecord(records[0]);
}
},
onViewReady: function(grid) {
grid.getSelectionModel().select(0);
}
});
Model:User.js
Ext.define('UserApp.model.User', {
extend: 'Ext.data.Model',
idProperty: 'userID',
fields: [
{name: 'userID', type: 'int'},
{name: 'name'},
{name: 'lastname'},
{name: 'age', type: 'int'},
]
});
View : Detail.js// form show data item click on grid
Ext.define('UserApp.view.user.Detail' ,{
extend: 'Ext.form.FieldSet',
alias : 'widget.Detail',
margin: '0 0 0 10',
title:'Company details',
defaults: {
width: 240,
labelWidth: 90
},
defaultType: 'textfield',
items: [{
fieldLabel: 'userID',
name: 'userID'
},{
fieldLabel: 'Nama',
name: 'name'
},{
fieldLabel: 'lastname',
name: 'lastname'
},{
fieldLabel: 'age',
name: 'age'
}]
});
View: listDetail.js// Show grid data
Ext.define('UserApp.view.user.listDetail' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.listDetail',
// id:'userID2',
store: 'User',
title : 'Users',
dockedItems: [{
xtype: 'pagingtoolbar',
store: 'User',
dock: 'bottom',
displayInfo: true
}],
initComponent: function() {
this.columns = [
{
header: 'ID',
dataIndex: 'userID',
flex: 1
},
{
header: 'Name',
dataIndex: 'name',
flex: 1
},
// {header: 'Last Name', dataIndex: 'lastname', flex: 1},
// {header: 'Age', dataIndex: 'age', flex: 1}
];
this.callParent(arguments);
}
});
Thisis straight out of Sencha docs. The first stop for you would be to gotrough this example and study it line by line:
http://docs.sencha.com/extjs/4.2.2/#!/example/grid/binding-with-classes.html
Then you can take a look at the exact code that rendered the image you included in your question:
http://docs.sencha.com/extjs/4.2.2/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#form-grid
I want to implement grid bufferrenderer in my simple grid panel that shows a list of information using ExtJS 4.2.1. Without using the bufferrenderer plugin, it shows all the data, but when i used this plugin, my grid contains no data.
This is my grid without using the plugin
This is my grid using the plugin
The grid panel's code is:
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',
itemId: 'myPanel',
title: '',
requires: ['Ext.grid.plugin.BufferedRenderer'],
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'gridpanel',
autoRender: true,
autoShow: true,
itemId: 'gridPanel',
title: 'My Grid Panel',
store: 'MyJsonStore',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'id',
text: 'Id'
},
{
xtype: 'gridcolumn',
dataIndex: 'firstName',
text: 'FirstName'
},
{
xtype: 'gridcolumn',
dataIndex: 'middleName',
text: 'MiddleName'
},
{
xtype: 'gridcolumn',
dataIndex: 'lastName',
text: 'LastName'
},
{
xtype: 'gridcolumn',
dataIndex: 'age',
text: 'Age'
},
{
xtype: 'gridcolumn',
dataIndex: 'country',
text: 'Country'
},
{
xtype: 'gridcolumn',
dataIndex: 'city',
text: 'City'
},
{
xtype: 'gridcolumn',
dataIndex: 'street',
text: 'Street'
},
{
xtype: 'gridcolumn',
dataIndex: 'mobile',
text: 'Mobile'
},
{
xtype: 'gridcolumn',
dataIndex: 'phone',
text: 'Phone'
},
{
xtype: 'gridcolumn',
dataIndex: 'zip',
text: 'Zip'
}
],
plugins: 'bufferedrenderer'
/*plugins: {
ptype: 'bufferedrenderer',
trailingBufferZone: 20,
leadingBufferZone: 25
}*/
}
]
});
me.callParent(arguments);
}
});
The Store's code is:
Ext.define('MyApp.store.MyJsonStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.GridModel'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
model: 'MyApp.model.GridModel',
storeId: 'MyJsonStore',
buffered: true,
clearOnPageLoad: false,
clearRemovedOnLoad: false,
leadingBufferZone: 25,
pageSize: 500,
purgePageCount: 10,
trailingBufferZone: 20,
proxy: {
type: 'ajax',
url: 'data/users.json',
reader: {
type: 'json',
root: 'users',
totalProperty: 'total_user'
}
}
}, cfg)]);
}
});
Can anyone help me with this? Thanks
Setting the height property in grid will fix this issue.
height: 300
Make sure that all panels up to the viewport have their layout set to “fit”. Also, region of the grid should be “center”.
I have not tested, but something like this should work:
var grid = Ext.create('MyApp.view.MyPanel', {
layout: 'fit',
region: 'center'
});
var viewport = Ext.create('Ext.container.Viewport', {
renderTo: Ext.getBody(),
items: [
grid
]
});
I am trying to bind a grid data to a form in extjs. when i click on a grid row, the details should be populated in form. Can i do that in a simple way without using MVC. I have wrote the below code. help me further. Thank you
// JavaScript Document
Ext.require('Ext.data.Store');
Ext.require('Ext.grid.Panel');
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [ 'id','name', 'email', 'phone' ]
});
Ext.onReady(function() {
var userStore = Ext.create('Ext.data.Store', {
model: 'User',
data: [
{ id: '1', name: 'srb', email: 'srb#gmail.com', phone: '555-111-1224' },
{ id: '2', name: 'srv', email: 'srv#gmail.com', phone: '555-222-1254' }
]
});
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: userStore,
width: 400,
title: 'All Users',
columns: [
{
text: 'Id',
dataIndex: 'id' ,
flex: 1
},
{
text: 'Name',
dataIndex: 'name',
flex: 2
},
{
text: 'Email Address',
flex: 3,
dataIndex: 'email',
},
{
text: 'Phone Number',
flex: 2,
dataIndex: 'phone'
}
],
listeners : {
itemclick: function(dv, record, item, index, e) {
var nm= record.get('name');
}
},
});
Ext.create('Ext.form.FieldSet',{
renderTo: Ext.getBody(),
margin: '0 0 0 10',
title:'User details',
defaults: {
width: 240,
labelWidth: 90
},
defaultType: 'textfield',
items: [{
fieldLabel: 'Id',
name: 'id'
},{
fieldLabel: 'Name',
name: 'name'
},{
fieldLabel: 'Email Id',
name: 'email'
},{
fieldLabel: 'Phone Number',
name: 'phone'
}]
});
});
Use Ext.form.Panel instead of Ext.form.FieldSet. Field set is more of a decorating container. The form panel provides support for loading / saving data from the form, etc.
Then you need a way to access your form panel in your click event. The absolute simplest is to set an id on the form, and use Ext.getCmp to get a ref to the form. Since you've already got the record there, you can just use the loadRecord method of the form panel.
And you'll be done! Be happy to have named your model & form fields the same ;)
The final call in the event listener will look like this:
Ext.getCmp('myForm').loadRecord(record);
what version of extjs are you using?
you don't seem to have a form defined or instantiated.
in your grid's itemclick event handler, you need to get a reference to the form, and call form.loadRecord with the passed in record (2nd argument):
itemclick: function(dv, record, item, index, e) {
var form = getAReferenceToTheFormObject();
form.loadRecord(record);
}
example:
http://jsfiddle.net/4TSDu/74/