Super new to ExtJS here. I've been trying to fetch data from a local server that provides the data from a database using ExtJS, but to no avail.
The database data can be fetched via Get request at http://localhost:3000/repository of my local machine. I generated a default ExtJS app and have a PersonalViewStore.js with the following proxy:
proxy: {
type: 'rest',
url: 'http://localhost:3000/repository',
reader: {
type: 'json',
rootProperty: 'data'
}
}
Note that the JSON database data can be fetched at 'http://localhost:3000/repository'.
Inside of that same PersonalViewStore.js file, I've got:
fields: [
'field1', 'field2'
],
autoLoad: true,
And inside of the PersonalView.js file, I have adapted the columns to be of the same names as the fields that I am fetching from:
columns: [
{
text: 'field1',
dataIndex: 'field1',
editable: true,
width: 100,
cell: {userCls: 'bold'}
},
{
text: 'field2',
dataIndex: 'field2',
editable: true,
width: 150
}
],
I've also ensured that the data is properly fetched via POSTMAN at http://localhost:3000/repository. What could go wrong then? Nothing is shown on my ExtJS Grid at http://localhost:1841/#personnelview where the Grid is supposed to be shown, except for the column names 'field1' and 'field2'
Related
I have a form that has a field that gets populated by my store:
Ext.define('EcommBackoffice.store.TransactionProviderStatus', {
extend: 'Ext.data.Store',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'resources/data/providerstatus.json',
reader: {
type: 'json',
root: 'providerstatus'
}
},
fields: ['id', 'name']
});
My store contains a simple list of items:
{
providerstatus: [{
id: "EXPIRED",
name: "EXPIRED"
}, {
id: "ERROR",
name: "ERROR"
}, {
id: "FRAUD",
name: "FRAUD"
}, {
id: "PAID",
name: "PAID"
}, {
id: "UNCONFIRMED",
name: "UNCONFIRMED"
}]
}
Inside my form, the above store is then populated by a BoxSelect:
{
xtype: 'boxselect',
name: 'providerstatus',
fieldLabel: oMe.providerstatusField,
width: 468,
store: 'TransactionProviderStatus',
displayField: 'name',
valueField: 'id',
minChars: 2,
typeAhead: true
}
While this perfectly works, I also intend to add more items while the user types new values in it. Note that this BoxSelect is a multi-selection. Currently, when I type in random values on it, it simply clears it out.
How do I set up this particular field in such a way that I will be able to add more items, and include it as part of the data that will be passed on submit?
Did you try forceSelection:false for this boxselect.
When forceSelection is false, new records can be created by the user as they are typed. These records are not added to the combo's store. Multiple new values may be added by separating them with the delimiter, and can be further configured using the createNewOnEnter and createNewOnBlur configuration options.
Also check createNewOnEnter and createNewOnBlur
Create new on Enter for Box Select
Can u help me with rest store, please. I want my store become REST, I saw some samples where HttpProxy was used and tried to do the same, but it dosn't work.
As i noticed in samples store was always created like: var store = Ext.create...
If problem in this, then i don't know where to invoke Ext.create, and previously I always used storeId in grid and it worked well.
P.S. why grid couldn't be created without store data just with blank fields?
Here is my 'TestStore' code:
Ext.define('MVC.store.Notes', {
extend : 'Ext.data.Store',
requires : [
'MVC.model.Note'
],
storeId : 'TestStore',
model : 'MVC.model.Note',
autoLoad: true,
proxy: {
type: 'rest',
url: 'rest/notes',
reader: {
type: 'json',
rootProperty: 'data'
},
writer: {
type: 'json'
}
}
});
And Grid:
Ext.define('MVC.view.NotesGrid', {
extend: 'Ext.grid.Panel',
xtype: 'notesGrid',
title: 'Note-list',
// store: 'Notes',
store: 'TestStore',
columns: [
{
text: 'Name',
dataIndex: 'name',
flex: 1
},
{
text: 'Creation Date',
xtype: 'datecolumn',
format: 'd-m-Y',
dataIndex: 'createDate',
flex: 1
},{
text: 'Last Modified',
xtype: 'datecolumn',
format: 'd-m-Y',
dataIndex: 'modifiedDate',
flex:1
}, {
text: 'Text',
dataIndex: 'noteText',
flex: 3
}
]
});
Not answering the main question, only your side question:
When you Ext.define() a store, you define the class.
When you Ext.create() a store, you define the instance.
The class won't be able to hold any data, only an instance can.
If you add your store's class name to the stores array in your application definition in the main Application.js file, you tell your application to create one global store instance of that class.
From a store class with a fixed store Id, you can only create one instance per application; from a store class without a fixed storeId, you can create multiple instances (e.g. one per grid).
I am trying to implement a grid with a paging toolbar in ExtJS 5. I get the first page of data, however when advancing the grid will not update new data.
It appears that data.asp page is not being updated with a new starting value to update the .AbsolutePosition property of my recordset. So the grid keeps displaying the 1st page of information.
My code is below...
var gridStore = Ext.create('Ext.data.JSonStore', {
autoLoad: false,
fields: [
{name: 'field1', type: 'int'},
{name: 'field2', type: 'int'}
],
pageSize: 25,
proxy: {
type: 'ajax',
url: 'Data.asp',
reader: {
type: 'json',
rootProperty: 'rows',
totalProperty: 'totalCount',
}
}
});
gridStore.load({
params: {
start: 0,
limit: 25
}
});
grid = Ext.create('Ext.grid.Panel', {
renderTo: 'grid-Spec',
store: gridStore,
columns: [
{text: 'Field 1', width: 10, sortable: true, dataIndex: 'field1'},
{text: 'Field 2', width: 10, sortable: true, dataIndex: 'field2'}
],
height: 100,
width: 20,
selModel: { mode: 'SINGLE' },
dockedItems: [{
xtype: 'pagingtoolbar',
store: gridStore,
dock: 'bottom',
displayInfo: true
}]
});
Your code has some typos, but in general it looks OK.
Problem may lay on server side - when using ajax proxy, you must implement paging on server side. If you have implemented paging on server side, use some developer tools (for example in Chrome) and see if page number is submitted correctly. You should see start/page number in address (eg: http://fiddle.jshell.net/echo/json/?_dc=1410854522824&page=2&start=5&limit=5).
I made fiddle: http://jsfiddle.net/seur2aLx/9/ you can compare your code to mine (note that Ext.ux.data.reader.Json is there only to fake some data for grid).
I have incorporated paging into my code.. but my paging doesnt seem to be working correctly.
I am trying to display 3 result perpage.. but it showing all in one page and when you click next it repeating the same results.
Ext.require([
'Ext.data.*',
'Ext.grid.*'
]);
Ext.onReady(function(){
Ext.define('Book',{
extend: 'Ext.data.Model',
fields: [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: 'Author', mapping: 'ItemAttributes > Author'},
'Title', 'Manufacturer', 'ProductGroup'
]
});
// create the Data Store
var store = Ext.create('Ext.data.Store', {
pageSize: 3,
model: 'Book',
autoLoad: true,
proxy: {
// load using HTTP
type: 'ajax',
url: 'sheldon-2.xml',
// the return will be XML, so lets set up a reader
reader: {
type: 'xml',
// records will have an "Item" tag
record: 'Item',
idProperty: 'ASIN',
totalRecords: '#total'
}
}
});
// create the grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{text: "Author", flex: 1, dataIndex: 'Author', sortable: true},
{text: "Title", width: 180, dataIndex: 'Title', sortable: true},
{text: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
{text: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
],
renderTo:'example-grid-group-v3',
width: 540,
height: 200,
// paging bar on the bottom
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
})
});
});
The way it works is, you need to have a program (PHP or ASPX or some similar stuff) on the server that accepts paging information and sends out data in pages. In your case, it is a static XML file which will be returned in it's entirety when requested for. I am not sure if you can have all the data on the client side and still have ExtJS do the paging for you. You might want to do more research on different stores/proxies to find out if that is possible.
Buffered scrolling is another option for you if you want bring in all data from the server and render only the data that is shown currently.
Please move pageSize: 3 line into Ext.PagingToolbar object. Paging is handled on the server side.The client sends parameters to the server side, which the server needs to interpret and then respond with the approprate data. It seems sheldon-2.xml does not support paging and returns all records. See example in Ext.PagingToolbar documentation.
As part of my EXTJS 4 learning process, I am trying to establish a simple process of database connection - loading a value in a data Store - taking the value and placing it in a dataField.
The data is loaded fine from the php script and placed into the Store via a json call. (as confirmed through FireBug)
However, the dataField, does not seem to be able to load the value.
Here is what I have so far:
//Model definition
Ext.define('FingerModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'}
]
});
//Store Definition
var est_data = new Ext.data.Store({
model: 'FingerModel',
proxy: {
type: 'ajax',
url: 'finger.php',
extraParams: {opt: 'getName'},
reader: {
type: 'json',
root: 'results',
totalProperty: 'total'
}
},
autoLoad: true,
// turn off remote sorting
remoteSort: false
});
//Form definition
var fingerForm = Ext.create('Ext.form.Panel', {
width: 500,
title: 'Finger',
waitMsgTarget: true,
items: [{
xtype: 'fieldset',
title: 'Finger Form',
items: [{
xtype:'textfield',
fieldLabel: 'Location Name',
name: 'name'
}]
}]
});
fingerForm.getForm().loadRecord(FingerModel);
Anybody see anything obvious that I'm doing wrong?
Thanks in advance.
M.
Ext.form.field.Text does not have a 'store' property. How would it know which row of the store to use?
You should use Form.loadRecord() to load the model into the form, and it will set form fields with the same name as the model field names.