i created a basic sencha project via cmd:
sencha -sdk path/to/SDK generate app classic SandBox path/to/TARGET
in addition i changed the the data to a Personel.json
{ "items": [
{ "name": "Jean Luc", "email": "jeanluc.picard#enterprise.com", "phone": "555-111-1111" },
{ "name": "Worf", "email": "worf.moghsson#enterprise.com", "phone": "555-222-2222" },
{ "name": "Deanna", "email": "deanna.troi#enterprise.com", "phone": "555-333-3333" },
{ "name": "Data", "email": "mr.data#enterprise.com", "phone": "555-444-4444" }]}
store.Personnel.js
Ext.define('SandBox.store.Personnel', {
extend: 'Ext.data.Store',
alias: 'store.personnel',
autoLoad: true,
autoSync: true,
loading: true,
model: 'SandBox.model.Personnel',
proxy: {
type: 'ajax',
url: 'resources/json/Personnel.json',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
now i want to edit the values inside the table with the rowediting plugin.
view.main.List.js
Ext.define('SandBox.view.main.List',{
extend: 'Ext.grid.Panel',
xtype: 'mainlist',
requires: [
'SandBox.store.Personnel'
],
title: 'Personnel',
store: {
type: 'personnel'
},
plugins: {
ptype: 'rowediting'
},
columns: [{
text: 'Name', dataIndex: 'name',
editor:{
xtype: 'textfield',
emptyText: 'Name'
}},{
text: 'Email',
dataIndex: 'email',
flex: 1,
editor:{
xtype: 'textfield',
emptyText: 'Email'
}},{
text: 'Phone',
dataIndex: 'phone',
flex: 1 ,
editor:{
xtype: 'textfield',
emptyText: 'Phone'
}}
]});
if i try to change any value of the table always the first entry of the Personnel.json will insert in the whole row. so i try to disable the POST function from the update button and keep the changed data localy in cause i haven't actualy any backend. later i want to send explicit the POST request by a seperate "Send" button. i tried to customize the rowediting plugin like this in addition i changed the autoCancel in autoUpdate.
rowediting: {
clicksToMoveEditor: 1,
autoUpdate: false,
useButtonText: false,
saveBtnIconCls: 'fa fa-check green-color',
cancelBtnIconCls: 'fa fa-times red-color'
}
this way i get the following error:
Error: [Ext.createByAlias] Unrecognized alias: plugin.null ext-all-rtl-debug.js:15041:27
instantiateByAlias
http://localhost:1841/ext/build/ext-all-rtl-debug.js:15041:27
create
http://localhost:1841/ext/build/ext-all-rtl-debug.js:241654:26
constructPlugin
http://localhost:1841/ext/build/ext-all-rtl-debug.js:70680:26
constructPlugins
http://localhost:1841/ext/build/ext-all-rtl-debug.js:70708:33
initComponent
http://localhost:1841/ext/build/ext-all-rtl-debug.js:200605:26
callParent
http://localhost:1841/ext/build/ext-all-rtl-debug.js:12525:20
initComponent
http://localhost:1841/ext/classic/theme-neptune/overrides/panel/Table.js:9:9
constructor
http://localhost:1841/ext/build/ext-all-rtl-debug.js:67285:9
callParent
http://localhost:1841/ext/build/ext-all-rtl-debug.js:12525:20
constructor
http://localhost:1841/ext/build/ext-all-rtl-debug.js:200554:9
constructor
http://localhost:1841/ext/build/ext-all-rtl-debug.js:13168:20
widget
http://localhost:1841/ext/build/ext-all-rtl-debug.js:15582:20
create
http://localhost:1841/ext/build/ext-all-rtl-debug.js:27456:16
lookupComponent
http://localhost:1841/ext/build/ext-all-rtl-debug.js:140073:20
prepareItems
http://localhost:1841/ext/build/ext-all-rtl-debug.js:140658:32
add
http://localhost:1841/ext/build/ext-all-rtl-debug.js:139552:23
initItems
http://localhost:1841/ext/build/ext-all-rtl-debug.js:139975:17
callParent
http://localhost:1841/ext/build/ext-all-rtl-debug.js:12525:20
initItems
http://localhost:1841/ext/build/ext-all-rtl-debug.js:161148:9
initComponent
http://localhost:1841/ext/build/ext-all-rtl-debug.js:139936:9
callParent
http://localhost:1841/ext/build/ext-all-rtl-debug.js:12525:20
initComponent
http://localhost:1841/ext/build/ext-all-rtl-debug.js:161137:9
constructor
http://localhost:1841/ext/build/ext-all-rtl-debug.js:67285:9
constructor
http://localhost:1841/ext/build/ext-all-rtl-debug.js:13168:20
widget
http://localhost:1841/ext/build/ext-all-rtl-debug.js:15582:20
create
http://localhost:1841/ext/build/ext-all-rtl-debug.js:27456:16
lookupComponent
http://localhost:1841/ext/build/ext-all-rtl-debug.js:140073:20
prepareItems
http://localhost:1841/ext/build/ext-all-rtl-debug.js:140658:32
add
http://localhost:1841/ext/build/ext-all-rtl-debug.js:139552:23
initItems
http://localhost:1841/ext/build/ext-all-rtl-debug.js:139975:17
callParent
http://localhost:1841/ext/build/ext-all-rtl-debug.js:12525:20
initItems
http://localhost:1841/ext/build/ext-all-rtl-debug.js:161148:9
initComponent
http://localhost:1841/ext/build/ext-all-rtl-debug.js:139936:9
callParent
http://localhost:1841/ext/build/ext-all-rtl-debug.js:12525:20
initComponent
http://localhost:1841/ext/build/ext-all-rtl-debug.js:161137:9
callParent
http://localhost:1841/ext/build/ext-all-rtl-debug.js:12525:20
initComponent
http://localhost:1841/ext/build/ext-all-rtl-debug.js:247719:9
constructor
http://localhost:1841/ext/build/ext-all-rtl-debug.js:67285:9
constructor
http://localhost:1841/ext/build/ext-all-rtl-debug.js:13168:20
anonymous
http://localhost:1841/ext/build/ext-all-rtl-debug.js:3:8
create
http://localhost:1841/ext/build/ext-all-rtl-debug.js:15525:20
create
http://localhost:1841/ext/build/ext-all-rtl-debug.js:11458:20
applyMainView
http://localhost:1841/ext/build/ext-all-rtl-debug.js:96557:16
setter
http://localhost:1841/ext/build/ext-all-rtl-debug.js:10577:57
makeInitGetter/<
http://localhost:1841/ext/build/ext-all-rtl-debug.js:10556:24
initMainView
http://localhost:1841/ext/build/ext-all-rtl-debug.js:96329:13
onBeforeLaunch
http://localhost:1841/ext/build/ext-all-rtl-debug.js:96283:9
callParent
http://localhost:1841/ext/build/ext-all-rtl-debug.js:12525:20
onBeforeLaunch
http://localhost:1841/ext/build/ext-all-rtl-debug.js:96585:9
onProfilesReady
http://localhost:1841/ext/build/ext-all-rtl-debug.js:96217:9
constructor
http://localhost:1841/ext/build/ext-all-rtl-debug.js:96186:9
constructor
http://localhost:1841/ext/build/ext-all-rtl-debug.js:13168:20
createApp/<
http://localhost:1841/ext/build/ext-all-rtl-debug.js:96483:48
invoke
http://localhost:1841/ext/build/ext-all-rtl-debug.js:18581:17
doInvokeAll
http://localhost:1841/ext/build/ext-all-rtl-debug.js:18625:13
invokeAll
http://localhost:1841/ext/build/ext-all-rtl-debug.js:18594:13
handleReady
http://localhost:1841/ext/build/ext-all-rtl-debug.js:18550:13
handleReadySoon/me.timer<
http://localhost:1841/ext/build/ext-all-rtl-debug.js:18565:17
bind/<
http://localhost:1841/ext/build/ext-all-rtl-debug.js:6891:28
defer/<
http://localhost:1841/ext/build/ext-all-rtl-debug.js:7088:29
so i tried to override the plugin like this an add a new RoweditPlugin.js
Ext.grid.plugin.RowEditorButtons.override({
constructor: function(config)
{
var me = this,
rowEditor = config.rowEditor,
editPlugin = rowEditor.editingPlugin;
me.callParent(arguments);
me.insert(0,
{
cls: Ext.baseCSSPrefis + 'row-editor-update-button',
itemId: 'nbtn',
handler: editPlugin.newSave,
text: 'Update Local',
disabled: rowEditor.updateButtonDisabled
});
},
newSave: function(button)
{
this.completeEdit();
}
});
and changed the call from the plugin in List.js
plugins: {
ptype: 'rowediting',
autoUpdate: false
},
but now the rowEditPlugin is uneffected by my override. what can i do to change the default functionallity from the update button?
Related
I am using ExtJS 5.0.1. I have a grid which does not autoLoad. Once the store is manually loaded by using the click button in TopBar, the grid receives records.
I am trying to implement infinite scroll on this grid. My store has extra params that need to be passed to the backend in order to get the records. After the first page is loaded, for the second page, no extra params are passed to the backend. How can I correct this?
My store looks as follows ->
Ext.define('MyStore', {
// extend: 'Ext.data.BufferedStore',
extend: 'Ext.data.Store',
model : 'MyModel',
remoteSort: true,
buffered: true,
leadingBufferZone: 10,
trailingBufferZone: 10,
pageSize: 100,
proxy: {
type : 'rest',
format: 'json',
url : '/myApp/list',
extraParams: {
fromDate: '',
toDate: ''
},
reader: {
type: 'json',
rootProperty: 'data',
totalProperty: 'totalCount'
}
}
});
My Grid looks as follows-->
Ext.define('MyGridl', {
extend: 'Ext.grid.Panel',
requires: [
'MyStore'
],
layout: 'fit',
loadMask: true,
viewConfig: {
preserveScrollOnRefresh: true
},
initComponent: function() {
this.id = 'myGrid';
this.store = new MyStore();
this.callParent(arguments);
},
overflowY: 'auto',
frame: true,
columns: [{
xtype: 'rownumberer',
width: 50,
sortable: false
},{
text: 'Column1',
dataIndex: 'Col1',
flex: 1
},{
text: 'Column2',
dataIndex: 'Col2',
flex: 1
}
],
plugins: [
{
ptype: 'bufferedrenderer',
trailingBufferZone: 10,
leadingBufferZone: 10,
scrollToLoadBuffer: 10
}
],
tbar: {
items: [{
xtype : 'datefield',
id : 'fromDate',
emptyText: 'Enter From Date',
listeners : {
render : function(datefield) {
datefield.setValue(Ext.Date.add(new Date(), Ext.Date.DAY, -5));
}
}
},{
xtype : 'datefield',
id : 'toDate',
emptyText: 'Enter To Date',
listeners : {
render : function(datefield) {
datefield.setValue(new Date());
}
}
},{
xtype: 'button',
text: 'Filter by Date',
style: {
marginLeft: '15px'
},
scope: this,
handler: function(me){
var store = Ext.getStore('myStore'),
fromDay = me.up().down('#fromDate').getValue(),
toDay = me.up().down('#toDate').getValue();
store.removeAll();
store.load({
params:{
fromDate: fromDay,
toDate: toDay
}
});
}
}
]
}
});
I fixed this issue by adding
store.removeAll();
store.currentPage = 1;
store.getProxy().setExtraParam("fromDate", fromDay);
store.getProxy().setExtraParam("toDate", toDay);
store.load();
In app.js file i have added path of sqlite folder
Ext.Loader.setPath({
'Ext': 'touch/src',
'ConsultLite': 'app',
'Sqlite': 'sqlite'
});
My InitSQLite.js file is
Ext.define('ConsultLite.util.InitSQLite', {
singleton : true,
requires: [
'Sqlite.Connection',
'Sqlite.data.proxy.SqliteStorage',
'Ext.data.reader.Array'
],
initDb: function() {
Ext.ns('DbConnection');
this.DbConnection = Ext.create('Sqlite.Connection', {
dbName: 'ConsultLiteApp',
dbDescription: 'ConsultLiteApp Database',
dbVersion: '1.0',
dbSize: 200000,
});
},
getConnection: function() {
if(!Ext.isDefined(this.DbConnection)) this.initDb();
return this.DbConnection;
}
});
My Model file in which is i have used sqllite proxy
Ext.define('ConsultLite.model.Credential', {
extend: 'Ext.data.Model',
xtype: 'Credential',
config: {
fields: [
{ name : 'id', type : 'int' },
{ name: 'email', type: 'string'},
{ name: 'password', type: 'string'}
],
proxy: {
type: 'sqlitestorage',
dbConfig: {
tablename: 'credential',
dbConn: ConsultLite.util.InitSQLite.getConnection()
}
},
},
});
After executing sencha command "sencha app build production" above error come
I make an ajax request to the servlet that returns the result of a database query.
I can see with firebug the response and I want to put these results in a list (or other..) that I have already created.
I tried to read this post but it didn't help me..
Code:
this is the ajax request:
Ext.Ajax.request({
url: '/VIProject/Container',
success: function (action){alert('Lista caricata!'); console.debug(action); },
failure: function (){alert('Errore nel caricamento...');},
headers: {
'my-header': 'foo'
},
params: { action: "GETCONTAINERLIST" }
});
response from servlet(firebug):
{"message":"OK","container":[{"idOrdine":"1","numLotto":"123"},{"idOrdine":"2","numLotto":"321"},{"idOrdine":"3","numLotto":"876"}],"success":true}
list:
var listView = Ext.create('Ext.grid.Panel', {
width:425,
height:250,
id: 'lista',
collapsible:true,
title:'Simple ListView <i>(0 items selected)</i>',
store: //???
multiSelect: true,
viewConfig: {
emptyText: 'No images to display'
},
columns: [{
text: 'idOrdine',
flex: 15,
sortable: true,
dataIndex: 'idOrdine'
},{
text: 'Last Modified',
flex: 20,
sortable: true,
dataIndex: 'numLotto'
}]
});
How can I do?
I've modified your code to use a store:
Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: ['idOrdine', 'numLotto']
})
var listView = Ext.create('Ext.grid.Panel', {
width:425,
height:250,
id: 'lista',
collapsible:true,
title:'Simple ListView <i>(0 items selected)</i>',
store: store: {
model: MyModel,
autoLoad: true,
proxy: {
type: 'ajax',
url: '/VIProject/Container',
reader: {
type: 'json',
root: 'container'
}
}
},
multiSelect: true,
viewConfig: {
emptyText: 'No images to display'
},
columns: [{
text: 'idOrdine',
flex: 15,
sortable: true,
dataIndex: 'idOrdine'
},{
text: 'Last Modified',
flex: 20,
sortable: true,
dataIndex: 'numLotto'
}]
});
Even in this way it works:
var proxy=new Ext.data.HttpProxy({url:'/VIProject/Container'});
var reader=new Ext.data.JsonReader({},[
{name: 'idOrdine', mapping: 'idOrdine'},
{name: 'numLotto', mapping: 'numLotto'}
]);
var store=new Ext.data.Store( {
proxy:proxy,
reader:reader
});
store.load();
I tried in every way.. but i don't know what to do!
I want to get belongsTo record on datalist and show parent record fields.
Ext.define('MyApp.model.Customer', {
extend: 'Ext.data.Model',
config: {
fields: ['Id',
'EMail'],
hasMany: [{
model: 'MyApp.model.OutstandingInvoice',
name: 'OutstandingInvoice',
primaryKey: 'Id',
foreignKey: 'customerId',
foreignStore: 'OutstandingInvoices'
}]
}
});
Ext.define('MyApp.model.OutstandingInvoice', {
extend: 'Ext.data.Model',
config: {
fields: [
'InvoiceDate',
'InvoiceID',
'customerId'
],
belongsTo: [{
model: 'MyApp.model.Customer',
name: 'Customer',
primaryKey: 'Id',
foreignKey: 'customerId',
foreignStore: 'Customers'
}]
}
});
Ext.define('MyApp.store.OutstandingInvoices', {
extend: 'Ext.data.Store',
config: {
model: 'MyApp.model.OutstandingInvoice',
storeId: 'OutstandingInvoiceStore',
proxy: {
useDefaultXhrHeader: false,
type: 'ajax',
url : 'http://localhost/getOutstandingInvoices',
reader: {
type: 'json'
}
},
autoLoad: false
}
});
Ext.define('MyApp.store.Customers', {
extend: 'Ext.data.Store',
config: {
model: 'MyApp.model.Customer',
storeId: 'CustomerStore',
proxy: {
useDefaultXhrHeader: false,
type: 'ajax',
url : 'http://localhost/getCustJList',
reader: {
type: 'json'
}
},
autoLoad: false,
sorters: [{
property : 'FName',
direction: 'ASC'
}]
}
});
Ext.define('MyApp.view.OutstandingInvoices', {
extend: 'Ext.Panel',
xtype: 'outstandingInvoicesXType',
config: {
cls : 'invoiceSummaryCls',
scrollable: 'vertical',
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'Outstanding Invoices'
},
{
xtype : 'list',
scrollable: false,
store: 'OutstandingInvoiceStore',
cls : 'p10',
itemTpl: [
'<div>Invoice # {InvoiceID}</div>',
'<div>{InvoiceDate}</div>',
'<div>{Customer.Email}</div>', // I want to show Customer name here as its belongsTo Customer
],
listeners: {
itemtap:function (list, index, targe, rec, e, eOpts) {
console.log(rec)
}
}
}
]
}
});
I want to show Customer name in datalist but having issue with association or Xtemplate
I am getting this error
Uncaught Error: [ERROR][Ext.XTemplate#apply] Cannot read property 'Email' of undefined
Please help me out in this.
I'd recommend reading this article, its quite lengthy but the final List section is similar to your example.
I think the key point is you're not going to need separate stores. Sencha is going to create those automatically off the back of the associations. Make sure you move the proxies onto the models and set autoLoad: true
I want to populate the combobox dynamically based on the data I received from thr Url(which is servlet)
Below is my ExtJS code :
{
xtype:'combo',
id: 'shoutoutsTags',
fieldLabel: 'Tag',
value: '',
mode: 'local',
width: 200,
store: new Ext.data.JsonStore({
id:'ms',
url:'http://localhost:8080/ezdi/extServlet',
//totalProperty:'totalCount',
root:'rows',
fields:[
{name:'un'},
{name:'pwd'}
],
autoLoad:true
}),
displayField: 'un',
valueField: 'pwd',
typeAhead:true,
minChars:1,
forceSelection: true,
triggerAction: 'all',
hideTrigger:true
//hiddenName: 'mytag'
}
But I am getting below error and my Url is not being called:
msg : "You are using a ServerProxy but have not supplied it with a url."
sourceClass : "Ext.data.proxy.Server"
sourceMethod : "buildUrl" uncaught exception: You are using a ServerProxy
but have not supplied it with a
url.
Suggest me how can I overcome this error.
Ext.define("modelname", {
extend: 'Ext.data.Model',
proxy: {
type: 'ajax',
url : '/myServlet',
method:'POST',
reader: {
type: 'json',
root: 'rows'
//,totalProperty: 'totalCount'
}
},
fields: [
{name: 'name', mapping: 'name'}
]
});
var ds = Ext.create('Ext.data.Store', {
pageSize: 10,
model: 'modelName'
});
Your store needs to be updated to use the new Ext JS 4 data model:
var store = Ext.create('Ext.data.Store', {
model: 'MyNamespace.StoreModel',
proxy: {
type: 'ajax',
url: 'http://localhost:8080/ezdi/extServlet',
reader: {
type: 'json',
root: 'rows',
totalProperty: 'totalCount'
}
}
});
You'll notice here that the store has a property 'model', which is a string, and that there is no field mapping. This is because you'll also need to create a model for the store to reference, like so:
Ext.define('MyNamespace.StoreModel', {
extend: 'Ext.data.Model',
fields: [
{name:'un'},
{name:'pwd'}
]
});
Hope this helps!
Thats not a valid url, you'll want just '/ezdi/extServlet'.