I have a simple grid and below is the basic config.
The grid wont show the date, its empty.
Have any idea y?
This is the json value returning fro, the server:
"StartAt":"\/Date(-62135596800000)\/"
Thanks
{
model: Ext.define(Ext.id(), {
extend: "Ext.data.Model",
fields: [ {
name: "StartAt",
type: "date",
dateFormat: "d-m-Y"
}]
}
.....
columns: {
items: [{
id: "StartAt",
xtype: "datecolumn",
flex: 1,
dataIndex: "StartAt",
text: "Offer Start At"
}]
The dateFormat you specified in the model doesn't match what is coming back from the server. The point of specifying it on the model is so it knows how to parse the string that comes from the server. You want: dateFormat: 'MS'. On the column, you want to configure: format: 'd-m-Y'.
In ExtJS 5, dateFormat: 'time' worked for me. dateFormat: 'ms' did not.
Related
I have a form with two chained comboboxes. The first chained combobox dictates the values that appear in the second. I have forceSelection:true on the second combobox so that when a user changes the first combo, the second will be set blank because it no longer will be a valid option. The chained combos function as expected but when I load a record into this form using getForm().loadRecord(record) the value for the first combo is set properly but the second is not unless I set forceSelection:false.
The following fiddle should make things pretty clear: sencha fiddle
Clicking "Load Record" should load in Fruits/Apple, but only Fruits is shown. Clicking "Load Record" a second time achieves the desired result. If you comment out forceSelection: true it works as expected but then the chained combos don't function as desired. Is there anything I'm doing wrong here?
It is not so easy. What is happening when you are running form.loadRecord(rec).
you set the FoodGroup combobox
you set the FoodName combobox. BUT the value is not there, because your filter did not switch to appropriate food groups. That is why commenting force selection helps. (That is why commenting filter also help).
turned on the filter of food names. Store now have new values.
You are clicking the button second time. The first combobox value is the same, filters are not trigged (triggered?), you already have appropriate values in the second store and the value is selected.
How to fix:
The fix is ugly. You can listen on store 'refresh' (it means the filters are triggered) and then set the second value (or set the values again).
Ext.define('Fiddle.view.FormModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.fiddle-form-model',
stores: {
foodgroups: {
fields: ['name'],
data: [{
foodgroupname: 'Fruits'
}, {
foodgroupname: 'Vegetables'
}]
},
foods: {
fields: ['foodgroupname', 'foodname'],
filters: {
property: 'foodgroupname',
value: '{selectedFoodgroup.foodgroupname}'
},
data: [{
foodname: 'Apple',
foodgroupname: 'Fruits'
}, {
foodname: 'Banana',
foodgroupname: 'Fruits'
}, {
foodname: 'Lettuce',
foodgroupname: 'Vegetables'
}, {
foodname: 'Carrot',
foodgroupname: 'Vegetables'
}]
}
}
});
Ext.define('Fiddle.view.Form', {
extend: 'Ext.form.Panel',
xtype: 'fiddle-form',
viewModel: {
type: 'fiddle-form-model'
},
title: 'Combos',
items: [{
xtype: 'combo',
itemId: 'FoodGroup', // To access FoodGroup
displayField: 'foodgroupname',
bind: {
store: '{foodgroups}',
selection: '{selectedFoodgroup}'
},
valueField: 'foodgroupname',
forceSelection: true,
name: 'foodgroup',
fieldLabel: 'Food Group',
value: 'Vegetables'
}, {
xtype: 'combo',
itemId: 'FoodName', // To access FoodName
bind: {
store: '{foods}'
},
queryMode: 'local',
forceSelection: true, //COMMENTING THIS OUT ACHIEVES DESIRED LOAD RECORD BEHAVIOR
displayField: 'foodname',
valueField: 'foodname',
name: 'food',
fieldLabel: 'Food',
value: 'Carrot'
}],
buttons: [{
text: 'Load Record',
handler: function (btn) {
// OUR UGLY FIX
var form = btn.up('form'),
foodGroupComboBox = form.down('combobox#FoodGroup'),
foodNameComboBox = form.down('combobox#FoodName'),
record = Ext.create('Ext.data.Model', {
foodgroup: 'Fruits',
food: 'Apple'
});
foodNameComboBox.getStore().on('refresh', function (store) {
form.loadRecord(record);
}, this, {
single: true
})
form.loadRecord(record);
}
}]
});
Ext.application({
name: 'Fiddle',
launch: function () {
var form = new Fiddle.view.Form({
renderTo: document.body,
width: 600,
height: 400
});
}
});
How to add rows to grid and add some values with in the columns
and then submit the data as json format to the rest api in EXTJS
Json data like :
[
{
"col1" : "john",
"col2" : "xyz",
"col3" : "01/05/2018"
},
{
"col1" : "bush",
"col2" : "xpao",
"col3" : "01/08/2018"
},
.......
]
Some thing like above
I want to add data as above in grid column and submit to API in EXTJS
Thanks in Advance -:)
I want to add data as above in grid column and submit to API
For this, You need to use the store.sync() and rowediting plugin for grid.
store.sync() synchronizes the store with its proxy. This asks the proxy to batch together any new, updated and deleted records in the store, updating the store's internal representation of the records as each operation completes.
The Ext.grid.plugin.RowEditing plugin injects editing at a row level for a Grid. When editing begins, a small floating dialog will be shown for the appropriate row. Each editable column will show a field for editing. There is a button to save or cancel all changes for the edit.
You can check with working FIDDLE
Note : I have used dummy api name you need to use your actual api with store proxy for create, read, update and delete records.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.data.Store', {
storeId: 'gridStore',
fields: ['col1', 'col2', 'col3'],
autoLoad: true,
pageSize: 25,
remoteSort: true,
proxy: {
type: 'ajax',
method: 'POST',
api: {
read: 'data.json',
update: 'your_update_api',
create: 'your_create_api',
destroy: 'your_delete_api'
},
reader: {
type: 'json'
},
writer: {
type: 'json',
encode: true,
root:'data'
}
},
});
Ext.create('Ext.grid.Panel', {
title: 'Add Row Example',
store: 'gridStore',
height: 300,
border: true,
renderTo: Ext.getBody(),
tools: [{
xtype: 'button',
iconCls: 'fa fa-plus-circle',
tooltip: 'Add New Record',
handler: function () {
let store = this.up('grid').getStore();
store.insert(0, {
col1: '',
col2: '',
col3: ''
})
}
}],
columns: [{
text: 'col1',
dataIndex: 'col1',
flex: 1,
editor: {
xtype: 'textfield'
}
}, {
header: 'col2',
dataIndex: 'col2',
editor: {
xtype: 'textfield'
},
flex: 1
}, {
header: 'col3',
dataIndex: 'col3',
editor: {
xtype: 'datefield',
dateFormat: 'd/m/Y'
},
flex: 1
}],
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
})
],
bbar:['->',{
text:'Submit Changes',
handler:function(){
this.up('grid').getStore().sync()
}
}]
});
}
});
In real life situation you will need the following components:-
1- Ext.data.Model -> [Record] to map your model and add you validations and logic if needed.
2- Ext.data.Store -> [Set of records] which will consume the model.
3- Proxy which will handle the call the the web service, proxy can be added to the model or the store.
4- Grid Row Editor or cell row editor to be able to insert you data.
This is a working example FIDDLE
When you press Add data the model is created [record], you can start editing the data based on the editor property in the columns, this record is stored in the grid store so you can add as many records as you need.
When you press submit the store.sync is responsible to read the proxy apis and send the data to your service, you will need to open your dev tools network inspect to see the data sent in the request as json.
I have a function used on the datepicker to limit dates selected to the first of the month... I invoke it by setting a class and listener, such as:
$( ".datepickfom" ).datepicker(
{
beforeShowDay: fom,
showOn: "both",
buttonImage: "/images/calendar.png",
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
dateFormat: "m/d/yy",
yearRange: "-25:+100",
constrainInput: true
}
);
the fom call:
function fom(date){
if (date.getDate() != 1) {
return [false, "", "Specify 1st of Month"];
}
return [true, ""];
}
This works great for regular forms.
I'm looking to extend this functionality to the HandsOnTable 'date' cell data types.
var $container_1 = $("#datatable_1");
var handsontable_1 = $container_1.data('handsontable');
$("#datatable_1").handsontable(
{ columns: [
{},
{},
{
type: 'date',
dateFormat: 'm/d/yy'
},
{},
{
type: 'dropdown',
source: ["","Y","N"]
},
{},
{}
]
});
This also works as it should, but the date lets me pick other dates besides the first.
Is there a way to attach the
beforeShowDay
option to the HOT cell call as well?
I figured this out... The parameters end up working their way in to the defaultOptions array.
type: 'date',
dateFormat: 'm/d/yy',
beforeShowDay: fom
is all it took, and of course a localization of my fom function.
I am having trouble with a date field being displayed in a Extjs grid. I am using php to do the query and return my data in json format. The database is SQL Server. The date is coming back in the json file as:
"TERMDATE":{"date":"2013-02-13 00:00:00","timezone_type":3,"timezone":"America/New_York"}
this is just the date field, there are other fields in the row and they all display properly.
I just want to display the date, should I be doing something in my php file or is there a way to pull the date out of what is being sent. The date field displays as [object Object] when the grid is refreshed.
Here is my SQL Statement:
SELECT CPK_USERS, FNAME, LNAME, STATUS, DEPARTMENT, Email, PHONE1, CellPhone, Work_Ext, HIREDATE, SUPERVISOR, TERMDATE FROM USERS where DELFLAG = 0 and CPK_USERS > 0 order by FNAME
Here is the first record returned in json format:
{"succuss":true,"data":[{"CPK_USERS":153,"FNAME":"Aaron","LNAME":"Booth","STATUS":"Out","DEPARTMENT":"Customer Support","Email":"aaron.booth#xxxxx.com","PHONE1":"2134354709","CellPhone":"6357662738","Work_Ext":"550","HIREDATE":{"date":"2008-06-09 00:00:00","timezone_type":3,"timezone":"America\/New_York"},"SUPERVISOR":"","TERMDATE":{"date":"2013-02-13 00:00:00","timezone_type":3,"timezone":"America\/New_York"}},
My model:
Ext.define('DHS.model.dhsusers.User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'CPK_USERS' },
{ name: 'FNAME' },
{ name: 'LNAME' },
{ name: 'STATUS' },
{ name: 'DEPARTMENT' },
{ name: 'Email' },
{ name: 'PHONE1' },
{ name: 'CellPhone' },
{ name: 'Work_Ext' },
{ name: 'HIREDATE' },
{ name: 'SUPERVISOR' },
{ name: 'TERMDATE' }
]
});
My View:
Ext.define('DHS.view.dhsusers.UserInfoList', {
extend: 'Ext.grid.Panel',
alias: 'widget.userinfolist',
frame: true,
store: Ext.create('DHS.store.dhsusers.UserInfo'),
columns:[
{text:"CPK_Users", dataIndex:'CPK_USERS', flex:1, hidden: true, hideable: false},
{text:"First Name", dataIndex:'FNAME', flex:1},
{text:"Last Name", dataIndex:'LNAME', flex:1},
{text:"Term Date", dataIndex:'TERMDATE', flex:1, type:'datecolumn'},
{text:"Email", dataIndex:'Email', flex:1},
{text:"Home Phone", dataIndex:'PHONE1', flex:1},
{text:"Cell", dataIndex:'CellPhone', flex:1},
{text:"Work Ext", dataIndex:'Work_Ext', flex:1}
]
});
I gues you are using TERMDATE as grid column, if you use TERMDATE.date(teorically) you will get riht display. but if you share extjs codes that will be better.
I'm new to Sencha, trying to implement a Sencha formpanel with a field to pick from a list of objects in a store. This seems like a sufficiently basic pattern that there must be a simple solution. I have a model which defines an ajax endpoint returning a json array (places) of name/id pairs:
Ext.define('MyApp.model.Place', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'name', type: 'string'},
{name: 'id', type: 'int'},
],
proxy: {
type: 'ajax',
url: '/m/places/',
reader: {
type: 'json',
rootProperty: 'places',
},
},
},
});
And a store:
Ext.define('MyApp.store.Place', {
extend: 'Ext.data.Store',
requires: ['MyApp.model.Place'],
config: {
model: 'MyApp.model.Place',
autoLoad: true,
sorters: [
{
property : 'name',
direction: 'ASC',
},
],
},
});
I want a read-only text field for the place name and a hidden field to submit the place id:
{
xtype: 'textfield',
name: 'place_name',
label: 'Place',
readOnly: true,
listeners: {
focus: function () {
var place_picker = Ext.create('Ext.Picker', {
slots: [
{
name: 'place_name',
title: 'Choose a Place',
store: Ext.create('MyApp.store.Place'),
itemTpl: '{name}',
listeners: {
itemtap: function (obj, index, target, record, e, eOpts) {
var form = Ext.getCmp('entityform');
form.setValues({
place_name: record.get('name'),
place_id: record.get('id'),
});
// how to dismiss the picker?
obj.parent.hide();
},
},
},
]
});
Ext.Viewport.add(place_picker);
place_picker.show();
},
},
},
{
xtype: 'hiddenfield',
name: 'place_id',
},
At this point, tapping the field causes the picker to slide up from the bottom and display the loading animation, but it is not being populated with the list of place names, although I can see that the ajax request has been made and that it has returned the expected json document.
I'll stop here and ask if I'm on the right track or is there some better approach out there?
Why isn't the picker being populated with the results of the ajax request? Is my use of itemTpl incorrect?
Am I setting the form fields in a sencha-appropriate way?
How should I dismiss the picker on itemtap? I somehow doubt that my use of hide() is the proper way.
Picker slots has an data config which is an array of objects. It should have a specific format with text and value.
slots :[
data : [{
text : someValue,
value : someValue1,}] ]
You need to add objects which has the fields text and value to slots.