Related
I have two combobox, values are coming from database i am using json to populate the same. Second combo gets populated when the first combo changes. First time when we set the value of the first combo it works like magic. But second time, it does not get bind. and throws an error
This is my running code:
<script type="text/javascript">
Ext.onReady(function() {
var serverStore = Ext.create('Ext.data.Store', {
storeId: 'serverStore',
fields: [
{
name: 'u_hostname',
mapping: 'u_hostname',
type: 'string'
}
],
proxy: {
type: 'ajax',
url: '/list/data/dbapi/getRecordData',
extraParams: {
type: 'table',
useSql: true,
sqlQuery: 'select distinct(u_hostname) from SCRIPT_SCHEDULE'
},
reader: {
type: 'json',
root: 'records'
}
},
autoLoad: true
});
var dpsStore = Ext.create('Ext.data.Store', {
storeId: 'dpsStore',
fields: [
{
name: 'u_username',
mapping: 'u_username',
type: 'string'
},
{
name: 'u_hostname',
mapping: 'u_hostname',
type: 'string'
}
],
proxy: {
type: 'ajax',
url: '/list/data/dbapi/getRecordData',
extraParams: {
type: 'table',
useSql: true,
},
reader: {
type: 'json',
root: 'records'
}
},
autoLoad: true
});
var dpsCombo = Ext.create('Ext.form.ComboBox',{
id: 'dpsCombo',
fieldLabel: 'Username',
hidden: false,
margin: '5 0 0 25',
queryMode: 'local',
valueField: 'u_username',
displayField: 'u_username'
});
var serverCombo = Ext.create('Ext.form.ComboBox',{
id: 'serverCombo',
fieldLabel: 'Server Name',
hidden: false,
margin: '5 0 0 25',
store: serverStore,
queryMode: 'local',
valueField: 'u_hostname',
displayField: 'u_hostname',
listeners: {
change: changeStore
}
});
function changeStore(combo, value){
var store;
store = dpsStore;
var combobox = Ext.getCmp('dpsCombo');
combobox.clearValue();
console.log(value);
store.getProxy().setExtraParam("sqlQuery", `select distinct(u_username) from SCRIPT_SCHEDULE where u_hostname ='${value}'`);
console.log(value);
combobox.bindStore(store);
store.load();
}
Ext.create('Ext.container.Viewport', {
id: 'processviewport',
layout: 'border',
items: [{
xtype: 'panel',
id: 'filterPanel',
layout: 'hbox',
title: 'Data filter',
region: 'north',
collapsible: true,
items: [{
xtype: 'panel',
layout: 'hbox',
flex: 2,
items:[
{
xtype: 'panel',
layout: 'vbox',
items: [
serverCombo,
dpsCombo
]
}]
}]
}]
});
});
</script>
Error :
Uncaught TypeError: Cannot read property 'call' of undefined
The issue the combobox was not rendering data on the second change was resolved by adding lastQuery: field in the second combo.
I am editing a row in EXTJS grid on clicking the edit action link. On clicking the edit link of a row a new window opens with all the data of the row and "Save" and "Cancel" button.
On clicking the "Save" button, it is saving the record in database. But I want the row should also get refreshed without refreshing the page.
I am new to EXTJS.
Can any one help me to do the same.
Here is my code.
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.grid.plugin.BufferedRenderer'
]);
Ext.define('TestResult', {
extend: 'Ext.data.Model',
fields: [
{
name: 'ID',
type: 'int'
},
{
name: 'jobNo',
type: 'int'
},
{
name: 'stageCode',
type: 'String'
},
{
name: 'productTitle',
type: 'String'
},
{
name: 'brand',
type: 'String'
},
{
name: 'category',
type: 'String'
},
{
name: 'ftpDate',
type: 'Date'
}],
idField: 'ID'
});
Ext.onReady(function() {
var store = Ext.create('Ext.data.Store', {
model: 'TestResult',
autoLoad: true,
autoSync: true,
proxy: {
type: 'ajax',
url : 'data.jsp',
reader :
{
type : 'json'
},
writer :
{
type : 'json'
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
width: 700,
height: 500,
title: 'Buffered Grid of records',
store: store,
loadMask: true,
plugins: 'bufferedrenderer',
selModel: {
pruneRemoved: false
},
viewConfig: {
trackOver: false
},
features: [{
ftype: 'groupingsummary',
groupHeaderTpl: 'Department: {name}',
showSummaryRow: false
}],
// grid columns
columns:[{
text: 'ID',
sortable: true,
dataIndex: 'ID',
groupable: false,
locked: true,
width: 70
}, {
text: 'Job No.',
sortable: true,
dataIndex: 'jobNo',
groupable: false,
locked: true,
width: 120
}, {
text: 'Version',
dataIndex: 'stageCode',
groupable: false
}, {
text: 'Product Title',
dataIndex: 'productTitle',
groupable: false
}, {
text: 'Brand',
dataIndex: 'brand',
groupable: false
}, {
text: 'Category',
dataIndex: 'category',
width: 200,
groupable: false
}, {
text: 'FTP Date',
dataIndex: 'ftpDate',
xtype: 'datecolumn',
groupable: false
},
{
xtype:'actioncolumn',
header:'Edit',
width:50,
items: [{
icon: 'assets/images/edit.png', // Use a URL in the icon config
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
editForm.show();
editForm.down('form').loadRecord(rec);]
}],
renderTo: Ext.getBody()
});
var editForm = new Ext.Window({
title: 'Edit Window',
items:[
{
xtype: 'form',
url: 'UpdateController',
items: [
{
xtype: 'hidden',
fieldLabel: 'ID',
name: 'ID',
allowBlank: false,
readOnly: true
},
{
xtype: 'textfield',
fieldLabel: 'Job No.',
name: 'jobNo',
allowBlank: false,
readOnly: true
},
{
xtype: 'textfield',
fieldLabel: 'Version',
name: 'stageCode',
allowBlank: false,
readOnly: true
},
{
xtype: 'textfield',
fieldLabel: 'Product Title',
name: 'productTitle',
allowBlank: false
},
{
xtype: 'textfield',
fieldLabel: 'Category',
name: 'category',
allowBlank: false
},
{
xtype: 'textfield',
fieldLabel: 'Brand',
name: 'brand',
allowBlank: false
},
{
xtype: 'datefield',
fieldLabel: 'FTP Date',
name: 'ftpDate',
allowBlank: false
}],
buttons : [{
text : 'Save',
handler: function()
{
this.up('form').getForm().submit(
{
success: function(f,a)
{
store.save();
var win = Ext.WindowManager.getActive();
if (win)
{
win.hide();
}
},
failure: function(f,a)
{
//Ext.Msg.alert('Warning', 'Error');
Ext.Msg.alert('Warning', a.result.errormsg);
this.up('window').hide();
}
});
}
},
{
text: 'Cancel',
handler: function()
{
this.up('window').hide();
}
}]
}
]
});
});
Thanks
In your this.up('form').getForm().submit success handler you can update record, which you loaded into form, by using Ext.form.Basic updateRecord method.
So just add into success handler code:
// update record with form data
f.updateRecord();
// mark record as synchronized with server (because you already sent data to server with form submit method)
f.getRecord().commit();
I'm new to Sencha Touch2 and I'm trying to start off my app by loading arbitrary data from a simple store before I go on to using a proxy. My view shows but the data is not populating. I've seen this question but nothing that has helped me solve. Any help and patience is appreciated. Thanks in adavance!
My Model
Ext.define('SenchaFirstApp.model.Distributors', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 't', type: 'string'},
{name: 'distr', type: 'string'},
{name: 'group', type: 'string'},
{name: 'site', type: 'string'},
{name: 'status', type: 'string'},
{name: 'actuve', type: 'string'},
{name: 'assigned', type: 'string'},
{name: 'state', type: 'string'},
{name: 'schedule', type: 'string'},
{name: 'finished', type: 'string'} ],
}
});
My View
var distrStore = Ext.create('SenchaFirstApp.store.DistributorStore');
Ext.define('SenchaFirstApp.view.DistributorView', {
extend: 'Ext.dataview.DataView',
requires: [distrStore, 'Ext.data.Store', 'Ext.dataview.List'],
model: 'SenchaFirstApp.model.Distributors',
xtype: 'mainlist',
fullscreen: true,
config:
{
fullscreen: true,
layout: 'fit',
border: 5,
title: 'Distributors',
html: 'My datalist',
autoLoad: true,
items:{
title: 'Setup',
xtype:'list',
store: distrStore,
fields: [
{
text: 'T',
width: 1,
sortable: false,
hideable: false,
dataIndex: 't'
},
{
text: 'Distributor',
width: 50,
sortable: false,
hideable: false,
dataIndex: 'distr'
},
{
text: 'Group',
width: 20,
sortable: false,
hideable: false,
dataIndex: 'group'
},
{
text: 'Site Name',
width: 20,
sortable: false,
hideable: false,
dataIndex: 't'
},
{
text: 'Status',
width: 5,
sortable: false,
hideable: false,
dataIndex: 'status'
},
{
text: 'Active',
width: 5,
sortable: false,
hideable: false,
dataIndex: 'active'
},
{
text: 'State',
width: 2,
sortable: false,
hideable: false,
dataIndex: 'state'
},
{
text: 'Scheduled',
width: 10,
sortable: false,
hideable: false,
dataIndex: 'schedule'
},
{
text: 'Finished',
width: 10,
sortable: false,
hideable: false,
dataIndex: 'finished'
}
]
}
}
});
distrStore.load();
My Store
Ext.define('SenchaFirstApp.store.DistributorStore', {
extend: 'Ext.data.Store',
requires: ['SenchaFirstApp.model.Distributors', 'Ext.dataview.DataView'],
config: {
// xtype: 'distrlist',
storeId: 'mainlist',
model: 'SenchaFirstApp.model.Distributors',
autoLoad: true,
data: [
{t: 'S', distr: 'Smart Systems', site: 'Smart Temps', status: "done", active: 'Yes', assigned: 'Me', state: 'IN', schedule: 'today', finished: 'today'},
{t: 'I', distr: 'People', site: 'This One', status: "done", active: 'Yes', assigned: 'You', state: 'NC', schedule: 'yesterday', finished: 'tomorrow'}
]}});
app.js
Ext.Loader.setConfig({enabled:true});
Ext.application({
name: 'SenchaFirstApp',
stores: ['DistributorStore'],
models: ['Distributors'],
views: ['DistributorView'],
requires: ['SenchaFirstApp.view.DistributorView', 'Ext.dataview.DataView', 'SenchaFirstApp.model.Distributors', 'SenchaFirstApp.store.DistributorStore', 'Ext.dataview.List'],
launch: function() {
Ext.fly('appLoadingIndicator');
Ext.Viewport.add(Ext.create('SenchaFirstApp.view.DistributorView'));
}
});
You do not need to create an instance of your store:
var distrStore = Ext.create('SenchaFirstApp.store.DistributorStore');
Because when you define your store in your application...
Ext.application({
stores: ['DistributorStore'],
...
});
...it is automatically created for you. To get a reference of your store in your view, simply use a string with the name:
{
xtype: 'list',
store: 'DistributorStore',
...
}
Other notes
You also do not need to load it using .load() because you have set autoLoad to true in your store config.
Your view should extend Ext.Container, not Ext.dataview.DataView. DataView is used to show data (basically an abstract Ext.List. Because you have a list as an item, you can just put it inside a container.
You have set fullscreen: true on the class as well as in the config. You only need to put it inside the config - but it isn't really neccessary because you are creating and inserting your view into Ext.Viewport (in your app.js) which is already fullscreen.
You do not need fields config inside your list. You should use a itemTpl to create the template for each row.
my bbox config :
{
xtype: 'combobox',
editable: false,
store: 'my.store',
displayField: 'name',
valueField: 'id',
name: 'rule',
fieldLabel: 'Rule',
allowBlank: true
}
my model:
Ext.define('rule', {
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [
{name: 'id', type: 'int'},
name,
{name: 'json', type: 'string'},
{name: 'json2', type: 'string'}
]
});
my store:
Ext.define('Et.store.odinkod.Rules', {
extend: 'Ext.data.Store',
pageSize: 50,
proxy: {
headers: {'hash': 'hashnumber1'},
type: 'rest',
url: 'api/rule',
reader: {type: 'json', root: 'data'},
writer: {type: 'json', root: 'data'}
},
/*
listeners: {
load: function() {
if(count == 0){
count++;
var instance = Ext.create('Et.model.rule', {
id: '',
accountHash: '',
name: 'Always',
json: '',
uiJson: '',
comment: ''
});
this.add(instance);
}
}
},
*/
autoLoad: true,
autoSync: true,
model: 'rule'
});
so i want to see additional "name" field in the dpopbox without making new record
i can solve my problem if i do "add" method at the store. but thats bad way for me
You cannot use the normal way to add the new item to the store. It will sync with the DB because of your configs autoLoad: true, autoSync: true to the store.
You still can achieve your goal by directly handle the Element of the dropbox, even with the DOM of the dropbox (try Component.getEl().dom). However it is just work-around and is not recommended because the store may fire errors when loading/syncing and/or you will get the data duplicated when the dropbox re-render itself after any actions cause store load.
I have a store on extjs4 that return a list of objects, and i want to set the reader property to be able to count the elements so i can use paging afterward.
For reference, the example that extjs use already comes with a count property(totalCount) and the type of object listed(topics), while mine dont have it, just the list.
for reference:
example
Also, in my code the grid doesnt recognize the limit of results per page, but the paging toolbar does:
var sm = Ext.create('Ext.selection.CheckboxModel');
Ext.define('Cliente', {
extend: 'Ext.data.Model',
fields: [{
name: 'ID',
type: 'int'
}, {
name: 'Nome',
type: 'string'
}, {
name: 'Email',
type: 'string'
}, {
name: 'RazaoSocial',
type: 'string'
}, {
name: 'TipoDeCliente',
type: 'string'
}],
idProperty: 'ID'
});
var store = Ext.create('Ext.data.Store', {
pageSize: 3,
model: 'Cliente',
remoteSort: true,
proxy: {
type: 'ajax',
url: 'http://localhost:4904/Cliente/ObterClientes',
extraParams: {
nome: '',
tipopessoa: '',
email: '',
cpf: '',
estado: '',
cidade: '',
cep: ''
},
reader: {
type: 'json',
root: 'data'
},
simpleSortMode: true
},
sorters: [{
property: 'Email',
direction: 'DESC'
}]
});
var pluginExpanded = true;
var grid = Ext.create('Ext.grid.Panel', {
width: 500,
height: 250,
title: 'Array Grid',
store: store,
selModel: sm,
loadMask: true,
viewConfig: {
id: 'gv',
trackOver: false,
stripeRows: false
},
columns: [{
id: 'gridid',
text: "ID",
dataIndex: 'ID',
hidden: true
}, {
text: 'Nome',
width: 150,
sortable: true,
dataIndex: 'Nome'
}, {
text: 'Tipo de Cliente',
width: 100,
sortable: true,
dataIndex: 'TipoDeCliente'
}, {
text: 'Email',
width: 150,
sortable: true,
dataIndex: 'Email'
}],
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Exibindo clientes {0} - {1} of {2}',
emptyMsg: "Nenhum cliente"
}),
renderTo: 'clientes',
});
store.loadPage(1);
The store needs the total count to calculate the paging parameters and to show the total. Your server side implementation must change to add that count with your data.
Also load the data like this store.load(); instead of loadPage.
EDIT: you also have an extra comma here: renderTo: 'clientes', I would suggest running your code through JSLint.