Related
facing issue in Sencha offline proxy , when json received 100 records
offline proxy only add 50 records add in store here is my simple code
response.responseText [my ajax response], it returns reocords set
var data = Ext.decode(response.responseText);
for (var c=0; c < data.length; c++){
console.log(c);
var itemrecord = Ext.create('Inertia.model.InstallingCompany');
itemrecord.set(data[c]);
Ext.getStore('InstallingCompanies-offline').add(itemrecord);
}
console.log(c);
console.log(Ext.getStore('InstallingCompanies-offline').data.length);
For this you can use direct store.loadData() method of store.
In this FIDDLE, I have create a demo using gridpanel and Ext.data.Store. I hope this FIDDLE will help you or guide you to achieve your requirement.
Code Snippet
Ext.define('ForumThread', {
extend: 'Ext.data.Model',
fields: [
'title', 'forumtitle', 'forumid', 'username', {
name: 'replycount',
type: 'int'
}, {
name: 'lastpost',
mapping: 'lastpost',
type: 'date',
dateFormat: 'timestamp'
},
'lastposter', 'excerpt', 'threadid'
],
idProperty: 'threadid'
});
Ext.create('Ext.data.Store', {
storeId: 'topicsStore',
model: 'ForumThread'
});
function renderTopic(value, p, record) {
return Ext.String.format(
'{0}',
value,
record.data.forumtitle,
record.getId(),
record.data.forumid
);
}
Ext.create('Ext.grid.Panel', {
height: window.innerHeight,
title: 'Example of Store loadData() with GRID and Ajax Request',
renderTo: Ext.getBody(),
store: Ext.data.StoreManager.lookup('topicsStore'),
loadMask: true,
columns: [{
xtype: 'rownumberer',
width: 35,
sortable: false
}, {
tdCls: 'x-grid-cell-topic',
text: "Topic",
dataIndex: 'title',
flex: 1,
renderer: renderTopic,
sortable: true,
groupable: false,
cellWrap: true
}, {
text: "Author",
dataIndex: 'username',
flex: 0.5,
sortable: true,
groupable: false
}, {
text: "Replies",
dataIndex: 'replycount',
align: 'center',
width: 90,
sortable: false
}, {
id: 'last',
text: "Last Post",
dataIndex: 'lastpost',
flex: 0.5,
renderer: Ext.util.Format.dateRenderer('n/j/Y g:i A'),
sortable: true,
groupable: false
}],
listeners: {
afterrender: function (cmp) {
var store = Ext.data.StoreManager.lookup('topicsStore'),
store1;
cmp.getEl().mask('Please wait..!');
Ext.Ajax.request({
url: 'topics.json',
success: function (data) {
var response = Ext.decode(data.responseText);
store.loadData(response.topics);
cmp.getEl().unmask();
//Add data using store.add() method in Store
store1 = Ext.create('Ext.data.Store', {
model: 'ForumThread'
});
response.topics.forEach(function (item) {
store1.add(item);
})
console.log(`total count of store1 data is ${store1.getCount()}`);
}
});
}
}
});
In a grid column config, I have a cell tool for which I'd like the iconCls of the tool to be conditional on the row record data.
},{
text: 'Favorite',
//dataIndex: 'favorite',
width: 80,
align: 'center',
cell: {
tools: {
play : {
iconCls:'x-fa yellow fa-star',
align:'center',
tooltip : 'Toggle Favorites',
handler: 'onFavoriteToggle'
}
}
}
}, {
I'd like the icon cls to be based on the row record favorite property (true/false), to be fa-star or fa-star-o
Does anyone know how to accomplish this?
I answered this elsewhere so I'll post it here as well for anyone else interested. You can use binding to do it:
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.Viewport.add({
xtype: 'grid',
itemConfig: {
viewModel: true
},
store: {
data: [{
name: 'A',
fav: false
}, {
name: 'B',
fav: true
}]
},
columns: [{
dataIndex: 'name'
}, {
text: 'Favorite',
width: 80,
align: 'center',
cell: {
tools: {
play : {
bind: {
iconCls:'x-fa yellow {record.fav ? "fa-star" : "fa-star-o"}',
},
align:'center',
tooltip : 'Toggle Favorites',
handler: function(grid, context) {
var r = context.record;
r.set('fav', !r.get('fav'));
}
}
}
}
}]
});
}
});
Fiddle
You can use renderer method of gridcolumn.
In renderer function you need to use gridcell.setTools() method.
In this FIDDLE, I have created a demo as per you requirement. Hope this will guide you or help you to achieve you requirement.
var companyStore = Ext.create('Ext.data.Store', {
fields: ['name', 'price', {
name: 'lastChange',
type: 'date'
}, {
name: 'favorite',
type: 'boolean'
}],
autoLoad: true,
pageSize: null,
proxy: {
type: 'ajax',
url: 'company.json',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
Ext.create('Ext.grid.Grid', {
title: 'Company Data',
store: companyStore,
columns: [{
text: 'Company',
flex: 1,
dataIndex: 'name'
}, {
text: 'Price',
flex: 1,
dataIndex: 'price',
formatter: 'usMoney'
}, {
text: 'Last Updated',
flex: 1,
dataIndex: 'lastChange',
formatter: 'date("d M Y")'
}, {
width: 100,
text:'Favorite',
align: 'center',
renderer: function (value, rec, col, cell) {
cell.setTools({
play: {
iconCls: rec.get('favorite') ? 'x-fa yellow fa-star' : 'x-fa yellow fa-star-o',
tooltip: 'Toggle Favorites'
}
});
}
}],
height: 500,
layout: 'fit',
renderTo: Ext.getBody(),
fullscreen: true
});
I have a simple Extjs (5.1.1) Tree menu:
var menu = new Ext.tree.Panel( {
root: {
text: 'My menu',
expanded: true,
listeners: {
itemclick: function(s,r) {
alert(r.data.text);
}
},
children: [{
text: 'System',
expanded: true,
children: [{
text: '',
leaf: true
}, {
text: 'System Users',
leaf: true
}, {
text: 'System Administrators',
leaf: true
}]
}, {
text: 'Settings',
expanded: true,
children: [{
text: 'Passwords',
leaf: true
}, {
text: 'Emails',
leaf: true
}, ]
}, {
text: 'Logs',
leaf: true,
}]
}
});
Ext.application({
name : 'MVC',
launch : function() {
Ext.create('Ext.container.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',
items: [
{
title: 'North',
region: 'north',
height: 50,
xtype: 'container'
},
{
title: 'Menu',
region:'west',
floatable: false,
items: menu,
width: 300
},
{
title: 'Center',
region: 'center'
}
]
});
}
});
My problem: The contents (GRID) have some js file. And I would like click one of the tree menu than js load 'Center' item. But I don't know how. :-(
Example system_users.js file: (This file should load on center when I click System Users on the Tree.)
var Users = {
init: function () {
itemdblclick: this.editDocument
},
edit: function(grid, roWindex, e) {
var id = grid.getStore().getAt(rowIndex);
Users.openEditForm(id);
},
openEditForm: function(id){
// form open
}
};
Users.init();
Ext.application({
name : 'Users',
launch : function() {
Ext.widget({
renderTo : Ext.getBody(),
xtype : 'grid',
title : 'Users',
height : 800,
store : {
fields : [ 'login_id',
'login_name',
'login_firstname',
'login_middlename',
'login_lastname',
'login_email',
'login_mobile',
'login_status' ],
autoLoad : true,
proxy: {
type: 'ajax',
api: {
read: 'http://users/select',
create: 'http://users/insert',
update: 'http://users/update',
destroy: 'http://users/delete'
},
reader: {
type: 'json',
successProperty: 'success',
root: 'data',
messageProperty: 'message'
},
writer: {
type: 'json',
writeAllFields: false,
root: 'data'
}
}
},
columns: {
items: [
{ text: 'ID', dataIndex: 'login_id', editor: 'textfield', width: 200 },
{ text: 'Login Name', dataIndex: 'login_name', editor: 'textfield', width: 200 },
{ text: 'Firstname', dataIndex: 'login_firstname', editor: 'textfield', width: 200 },
{ text: 'Middlename', dataIndex: 'login_middlename', editor: 'textfield', width: 200 },
{ text: 'Lastname', dataIndex: 'login_lastname', editor: 'textfield', width: 200 },
{ text: 'Email', dataIndex: 'login_email', editor: 'textfield', width: 200 },
{ text: 'Mobile', dataIndex: 'login_mobile', editor: 'textfield', width: 200 },
{ text: 'Status', dataIndex: 'login_status', editor: 'textfield', width: 200 }
]
},
listeners: {
itemdblclick: function(dv, record, item, index, e) {
// This is row index
alert(index);
}
}
})
}
});
I've a HTML page with ExtJs editable grid. Edit is working fine, but i want to get Id field value of the edited row, but can't figured it out... i want to populate another array of values with Id, Name and Email field values of edited ROW...
Ext.onReady(function() {
Ext.create('Ext.data.Store', {
storeId:'myArray',
fields:['id','name', 'email'],
data:{'items':[
{"id":"1", "name":"Lisa", "email":"lisa#ArrayData.com"},
{"id":"2", "name":"Bart", "email":"bart#ArrayData.com"},
{"id":"3", "name":"Homer", "email":"home#ArrayData.com"},
{"id":"4", "name":"Marge", "email":"marge#ArrayData.com"}
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'ArrayData',
store: Ext.data.StoreManager.lookup('myArray'),
columns: [
{header: 'Id', dataIndex: 'id'},
{header: 'Name', dataIndex: 'name', editor: 'textfield'},
{header: 'Email', dataIndex: 'email', flex:1,
editor: {
xtype: 'textfield',
allowBlank: false
}
}
],
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
listeners : {
scope: this,
edit: function (theEditor, e, eOpts)
{
console.log();
}
}
})
],
height: 200,
width: 500,
renderTo: Ext.getBody()
});
});
#
#
Thanks #Hariharan and #Dipti for your valuable help... the working code is-
Ext.create('Ext.data.Store', {
storeId:'myArray',
fields:['id','name', 'email'],
data:{'items':[
{"id":"1", "name":"Lisa", "email":"lisa#ArrayData.com"},
{"id":"2", "name":"Bart", "email":"bart#ArrayData.com"},
{"id":"3", "name":"Homer", "email":"home#ArrayData.com"},
{"id":"4", "name":"Marge", "email":"marge#ArrayData.com"}
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
var array_edited=Ext.create('Ext.data.Store', {
storeId:'myArray_edited',
fields:['id','name', 'email'],
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'ArrayData',
store: Ext.data.StoreManager.lookup('myArray'),
columns: [
{header: 'Id', dataIndex: 'id'},
{header: 'Name', dataIndex: 'name', editor: 'textfield'},
{header: 'Email', dataIndex: 'email', flex:1,
editor: {
xtype: 'textfield',
allowBlank: false
}
}
],
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
listeners : {
scope: this,
edit: function(editor, e) {
array_edited.add({
id: e.record.get('id'),
name: e.record.get('name'),
email: e.record.get('email')
});
}
}
})
],
height: 200,
width: 500,
renderTo: Ext.getBody()
});
Ext.create('Ext.grid.Panel', {
title: 'ArrayDataEdited',
store: Ext.data.StoreManager.lookup('myArray_edited'),
columns: [
{header: 'Id', dataIndex: 'id'},
{header: 'Name', dataIndex: 'name'},
{header: 'Email', dataIndex: 'email', flex:1
}
],
selType: 'cellmodel',
height: 200,
width: 500,
renderTo: Ext.getBody()
});
Please refer below answer, i hope it will help you.
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
listeners : {
edit : function(editor, e) {
alert("Edited id value : " + e.record.get('id'));
}
}
})
],
check this, you have gridPanel with three columns , using sm you can select values of editables, after save you can call fnctChange function and use the new values.
hope this will help you.
var gridPanel = new Ext.grid.GridPanel({
region : 'west',
width : 360,
height : 250,
trackMouseOver : false,
disableSelection : true,
autoscroll : true,
loadMask : true,
margins : '3 3 3 0',
sm : sm,
viewConfig : {
forceFit : true
},
store : store,
// grid columns
columns : [ sm, {
id : 'columnNames',
header : "<b>Select the column names to be displayed</b>",
dataIndex : 'columnNames',
renderer : renderColumnNames,
width : 360,
sortable : true
}, { id : 'col1ID',
header : "",
dataIndex : 'Col1',
hidden : true,
sortable : true
}, {
id : 'col2ID',
header : "",
dataIndex : 'Col2',
hidden : true,
sortable : true
}]
});
var settingPanelMsg = " <b>Change save</b><br></br>"
var settingPanel = new Ext.Panel({
region : 'center',
width : 390,
height : 250,
margins : '3 0 3 3',
collapsible : true,
html : settingPanelMsg
})
winSetting = new Ext.Window({
title : 'Customize Your chnage',
layout : 'border',
closable : false,
height : 300,
width : 730,
items : [ gridPanel, settingPanel ],
buttons : [ {
text : 'Close',
handler : function(e, target, panel) {
winLibSetting.close();
}
}, {
text : 'Save',
handler : function() {
if (fnctChange() == true) {
winLibSetting.close();
}
}
} ]
});
winLibSetting.show();
function fnctChange() {
var L1 = sm.getSelections();
for (i = 0; i < L1.length; i++) {
var col1value = L1[i].data.col1ID;
if (L1[i].data.col2ID == true) {
var colName= L1[i].data.columnNames;
Ext.MessageBox.alert(' ',
'colName :'+colName);
}
}
return true;
}
i want to save data (result) but three fields with the same name. when one is enabled others are disabled. it works for me. but the problem is that when i edit it from grid, two ,, added with values......... [in extjs 4 mvc]
here is my view
Ext.define('Ext4Example.view.employee.Education' ,{
extend: 'Ext.window.Window',
alias : 'widget.education',
modal:true,
autoShow: true,
bodyPadding: 5,
initComponent: function () {
this.items = [
{
xtype: 'form',
id:'form',
bodyStyle: {
background: 'none',
padding: '10px',
border: '0'
},
items: [
{
xtype: 'fieldcontainer',
items: [
{
xtype: 'combobox',
fieldLabel: 'Result Type',
emptyText:'Select Result Type',
displayField:'type',
valueField:'id',
store: 'TypeStocks',
name: 'type',
id:'type',
width: 265,
allowBlank:false,
anchor:'95%',
listeners : {
'select': {
fn: function (combo, value) {
var value=combo.getValue();
if(value =='1'){
Ext.getCmp('cgpa').hide();
Ext.getCmp('jak').hide();
Ext.getCmp('sc').hide();
Ext.getCmp('range').hide();
Ext.getCmp('range').disable();
Ext.getCmp('cgpa').disable();
Ext.getCmp('division').enable();
Ext.getCmp('division').show();
}
else if(value =='2'){
Ext.getCmp('division').disable();
Ext.getCmp('division').hide();
Ext.getCmp('cgpa').enable();
Ext.getCmp('cgpa').show();
Ext.getCmp('jak').show();
Ext.getCmp('sc').show();
Ext.getCmp('range').enable();
Ext.getCmp('range').show();
}
}
}
}
},
{
xtype:'combobox',
fieldLabel: 'Division',
name: 'result',
emptyText:'Select Result',
store: Division,
id:'division',
width: 265,
anchor:'95%',
allowBlank:false
},
{
xtype:'fieldcontainer',
layout: 'hbox',
items:[
{
xtype:'label',
text:'Score',
hidden: true,
id:'sc'
},
{
xtype:'textfield',
name: 'result',
hidden: true,
width: 68,
margin:'0 0 0 75',
id:'cgpa',
anchor:'95%',
emptyText:'Score',
vtype : 'radius',
allowBlank:false
},
{
xtype:'textfield',
name: 'result',
hidden: true,
width: 68,
margin:'0 0 0 75',
id:'gpa',
anchor:'95%',
emptyText:'Score',
vtype : 'radiuss',
allowBlank:false
},
{
xtype:'label',
text:'of',
hidden: true,
margin:'0 5 0 5',
id:'jak'
},
{
xtype: 'combobox',
emptyText:'Range',
store: range,
name: 'range',
id: 'range',
margin:'0 5 0 5',
width: 65,
hidden: true,
anchor:'95%',
allowBlank:false,
listeners : {
'select': {
fn: function (combo, value) {
var value=combo.getValue();
if(value =='5.00'){
Ext.getCmp('outOf').setValue(1);
Ext.getCmp('cgpa').enable();
Ext.getCmp('cgpa').show();
Ext.getCmp('gpa').setValue('');
Ext.getCmp('gpa').disable();
Ext.getCmp('gpa').hide();
}
else if(value =='4.00'){
Ext.getCmp('outOf').setValue(0);
Ext.getCmp('gpa').enable();
Ext.getCmp('gpa').show();
Ext.getCmp('cgpa').setValue('');
Ext.getCmp('cgpa').disable();
Ext.getCmp('cgpa').hide();
}
}
}
}
}]
},
{
xtype: 'button',
text: 'SAVE',
iconCls: 'savee',
handler: function () {
var form = this.up('form').getForm(),
values = form.getValues();
var education = Ext.create('Ext4Example.model.EducationModel',values);
// if (form.isValid()) {
education.save({
success: function(education) {
var store = Ext.data.StoreManager.get('EducationStocks');
store = !store ? Ext.create("EducationStocks") : store;
store.load();
},
failure: function(education){
Ext.Msg.alert('Failed', 'Data already exits');
}
});
// }
}
},
{
xtype: 'button',
text: 'Cancel',
margin:'0 0 0 5',
scope: this,
handler: this.close
}]
}]
}];
this.callParent(arguments);
}
});
---------------
model
Ext.define('Ext4Example.model.EducationModel', {
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [
{name: 'result', mapping:'result', type: 'string'} ,
{name: 'outOf', mapping:'outOf', type: 'int'}
],
proxy: {
type: 'ajax',
noCache: false,
api: {
create : '${createLink(controller:'education', action: 'create')}'
},
actionMethods: {
create : 'POST'
},
reader: {
type: 'json',
root: 'data',
totalProperty : 'total',
successProperty : 'success',
messageProperty : 'message',
implicitIncludes: true
},
writer: {
type: 'json',
root: 'data',
writeAllFields: true
},
simpleSortMode: true
},
belongsTo: [{model:'Ext4Example.model.ExamModel', name:'exams'}]
});
If two of more fields have the same name, when the form is submitted, the fields with the same name are clubbed together into an array and then submitted. So, if you check the parameter submitted to the server, they will be :
type : typeValue
result : [resultFromCombo, resultFromTextField1, resultFromTextField2]
range : rangeValue
So in the server, I think you are directly converting the result array into a string and saving it. On converting the result array to a string it will convert to resultFromCombo, resultFromTextField1, resultFromTextField2. Hence you are getting the 2 commas in your grid.