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'.
Related
Ext.define('MyApp.model.Facility', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.proxy.Ajax'
],
config: {
fields: [
{
name: 'FacilityId'
},
{
name: 'FacilityName'
}
]
}
});
Ext.define('MyApp.store.FacilityStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.Facility'
],
config: {
autoLoad: true,
model: 'MyApp.model.Facility',
storeId: 'FacilityStore',
proxy: {
type: 'ajax',
batchActions: false,
url: 'http://localhost/QuickFind/Services/EquipmentService.asmx/GetFacilities',
headers: {
'content-type': 'application/json'
},
reader: {
type: 'json',
rootProperty: 'd'
}
}
}
});
And trying the load the data into the list.
Ext.define('MyApp.view.facilityList', {
extend: 'Ext.dataview.List',
alias: 'widget.facilityList',
config: {
docked: 'top',
height: 200,
id: 'datalist',
ui: 'round',
scrollable: true,
store: 'FacilityStore',
onItemDisclosure: true,
itemTpl: [
'<div><p>{Facility.FacilityName}</p></div>'
]
}
});
and my controller launch i am binding the data to the list:
Ext.define('MyApp.controller.Facility', {
extend: 'Ext.app.Controller',
config: {
refs: {
dataList: '#dataList',
mainNav: 'mainNav'
}
},
launch: function() {
var me = this;
debugger;
Ext.getStore('FacilityStore').load();
var group_store = Ext.getStore("FacilityStore");
me.facilityList.setStore(group_store);
}
Store is loaded with records but it's not displaying in the list.
I hope u have solved ur problem by this moment,but still to answer the question u have posted..the problem is the itemtpl u have written..
ur's
itemTpl: [
'<div><p>{Facility.FacilityName}</p></div>'
]
The field u have mentioned is FacilityName so to get the record's from the store Facility
U just need to do this in ur itemtpl to get data in list:
itemTpl: [
'<div><p>{FacilityName}</p></div>'
]
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
This code populates datagrid with json formated data received from /api/notes/ by tornado app...
$(document).ready(function () {
dataSource = new kendo.data.DataSource({
pageSize: 10,
autoSync: true,
transport: {
read: {
url: '/api/notes/',
dataType: 'json',
type: 'GET'
},
create: {
url: '/api/notes/',
dataType: 'json',
type: 'POST'
},
update: {
url: '/api/notes/',
dataType: 'json',
type: 'PUT'
}
},
schema: {
data: function(reply) { return reply.rows; },
model: {
id: "id",
fields: {
id: { type: "string" },
name: { type: "string" },
author: { type: "string" },
}
}
},
});
$("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
height: 300,
editable: true,
toolbar: ["create", "save", "cancel"],
columns: [
{ field: "id", title: "ID", width: 150 },
{ field: "name", title: "Book", width: 150 },
{ field: "author", title: "Author", width: 100 },
{ command: "destroy", title: " ", width: 110 }
],
});
});
if I click create instead of popping up a row, like here a post triggered with empty data parameter, what's wrong here
Try it with autoSync removed or set to false on the DataSource. According to the docs:
Enables (true) or disables (false) the automatic invocation of the sync() method for each change made.
So I think when you try to insert the row, it immediately puts it into the DataSource, causing it to do a sync(). The demo you linked to doesn't specify autoSync either.
I am new to ExtJs and I am using ExtJs4.
Now As shown in below image, There is one textfield named keywords, What I want to do is When I click on the button it will pass data of textfield to servlet and display resulted record in grid.
Now I have no idea how to do this. I am receiving JSON data response from servlet but don't know how to reload the store and refresh the grid.
Below is code for my store and grid.
Ext.define("Post", {
extend: 'Ext.data.Model',
proxy: {
type: 'ajax',
url: '/ezdi/searchServlet',
method: 'POST',
reader: {
type: 'json',
root: 'rows'
//,totalProperty: 'totalCount'
}
},
fields: [{
name: 'docid',
mapping: 'docid'
}, {
name: 'mrn',
mapping: 'mrn'
}, {
name: 'fname',
mapping: 'fname'
}]
});
var gridDataStore = Ext.create('Ext.data.Store', {
model: 'Post'
});
// Data store for grid end
Ext.define('Ezdi.Grid', {
extend: 'Ext.grid.GridPanel',
alias: 'widget.ezdigrid',
initComponent: function() {
var config = {
store: gridDataStore,
columns: [{
header: "DocID",
width: 100,
sortable: true,
dataIndex: 'docid'
}, {
header: "MRN",
width: 100,
sortable: true,
dataIndex: 'mrn'
}, {
header: "FirstName",
width: 100,
sortable: true,
dataIndex: 'fname'
}],
viewConfig: {
forceFit: false,
autoLoad: false
},
loadMask: true
};
}
});
You could use:
{
xtype: 'button',
text: 'Search',
handler: function() {
store.clearFilter(); //clear previous search value
var searchValue = Ext.getCmp("textFieldId").getValue(); //get new value
store.load().filter('jsonGridFielName', searchValue); //load filtered data
}
}
And for for multiple textfield search:
//FILTERS
var searchValue1 = Ext.getCmp("textFieldId1").getValue(); //value1
var searchValue2 = Ext.getCmp("textFieldId2").getValue(); //value2
var noValue = "0000xxxx"; //no Value, for empty field, use value that you are sure it is not going to be searched!!!
var clear = store.clearFilter(); //shortcut
if (!searchValue1 && !searchValue2) {
clear;
store.load().filter("jsonGridFielName1", noValue);
} else if (searchValue1) {
clear;
store.load().filter('jsonGridFielName1', searchValue1);
//...else if(searchValue n...)...
} else {
clear;
store.load().filter('jsonGridFielName2', searchValue2);
}
ezdigrid.js
// Data store for grid start
Ext.define("Post", {
extend: 'Ext.data.Model',
proxy: {
type: 'ajax',
url: '/ezdi/searchServlet',
method: 'GET',
reader: {
type: 'json',
root: 'rows'
//,totalProperty: 'totalCount'
}
},
fields: [{
name: 'docid',
mapping: 'docid'
}, {
name: 'mrn',
mapping: 'mrn'
}, {
name: 'fname',
mapping: 'fname'
}]
});
var gridDataStore = Ext.create('Ext.data.Store', {
// pageSize: 10,
model: 'Post'
});
// Data store for grid end
Ext.define('Ezdi.Grid', {
extend: 'Ext.grid.GridPanel',
alias: 'widget.ezdigrid',
initComponent: function() {
var config = {
store: gridDataStore,
columns: [{
//id:'ms',
header: "DocID",
width: 100,
sortable: true,
dataIndex: 'docid'
}, {
header: "MRN",
width: 100,
sortable: true,
dataIndex: 'mrn'
}, {
header: "FirstName",
width: 100,
sortable: true,
dataIndex: 'fname'
}],
viewConfig: {
forceFit: false,
autoLoad: false
},
loadMask: true
}; // eo config object
// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));
// call parent
Ezdi.Grid.superclass.initComponent.apply(this, arguments);
// load the store at the latest possible moment
this.on({
afterlayout: {
scope: this,
single: true,
fn: function() {
this.store.load({
params: {
start: 0,
limit: 30
}
});
}
}
});
} // eo function initComponent
});
demo.html
//handler for button click event
fbar: [{
xtype: 'button',
text: 'Search',
handler: function() {
var value = Ext.getCmp('_keyword').getValue(); //_keyword is textField
gridDataStore.load().filter('keywords', value);
}
}]
MyServlet
keyword = request.getParameter("keywords");
//code for quesry processing
Use extraParams in your model.
extraParams: {
keywords: 'your-value'
}
Put following code in your button click handler.
gridDataStore.proxy.extraParams.keywords = 'new value';
gridDataStore.load();