Good day all, I'm entering in a big EXT JS project and unluckily I'm totally nood in Ext js, I'm trying to learn as much as possible from tuts and examples, but I'm struck on this basic problem.
I have two different datepickers defined as follow:
items: {
xtype: 'panel',
layout: 'hbox',
items: [{
title: 'FROM',
margin: '5',
items: {
xtype: 'datepicker',
start: true,
reference: 'startDate',
maxDate: new Date(),
maxText: 'Future dates are not available',
bind: {
value: '{startDate}'
},
showToday: false,
listeners: {
select: 'checkDateInterval'
}
}
}, {
title: 'TO',
margin: '5',
items: {
xtype: 'datepicker',
start: false,
reference: 'endDate',
bind: {
value: '{endDate}'
},
maxDate: new Date(),
showToday: false,
listeners: {
select: 'checkDateInterval'
}
}
}]
}
I've succefully defined the controller, where I have done a simple "console.log()" of everything the datepicker passed me:
Ext.define('xxx.xxx.xxx.xxxxxxxSetupController', {
extend: 'Ext.app.ViewController',
alias: 'controller.investmentsetupcontroller',
checkDateInterval: function (data){
console.log("data: ", data);
}
});
and that is working as expected.
The only issue is that I received a whole object full of data in the console.log, and I imagine that there should be a easier way to get the two selected dates. May I ask you some advice to handle this? my goal is to get those two dates, makes some calculations and call another function with the data.
thanks in advance.
To achieve this you need use data.value
your code will be like
checkDateInterval: function (data){
console.log("data: ", data.value);
}
Also check the fiddle here. Fiddle
Related
I've searched the net for answer but didn't find anything. Hope you can help.
So I am relativly new to extJs. I have a navigation bar on the left. When I press the first button there, a new window opens, which contains a table and loads its data automatically. The first time it works perfect but when I close the window and open it again I get the error "cannot call method getRange of null".
If I open the second window (when I click the other button in my navigation bar), I have 4 tabs, which contain a table each. Each Tab has a toolbar with buttons (create, change, etc.). Here happens the same thing as by the first window.
I can also print those tables as a List and the first time works fine, but when I cancel the print action I get the error again.
I made sure that all buttons and tables have a different reference, so I really don't know what this could be.
Any ideas?
I add my panels, which will open the new windows here:
items: [
{
xtype: 'tabpanel',
region: 'center',
items: [{
// 1. Tab
xtype: 'componentTap-panel',
title: UMA.Locale.rm.component.componentTitle,
id: 'componentTab'
}, {
// 2. Tab
title: UMA.Locale.rm.componentGroup.componentGroupTitle,
xtype: 'componentGroupTap-panel',
id: 'componentGroupTab'
}, {
// 3. Tab
title: UMA.Locale.rm.componentTemplateTitle,
xtype: 'componentTamplate-panel',
id: 'componentTemplateTab'
},
{
//4.Tab
title: UMA.Locale.rm.inventoryTitle,
xtype: 'inventoryTab-panel',
id: 'inventoryTab'
}
]
}
]
When the window opens I add my table and toolbar:
items: [{
xtype: 'toolbar',
region: 'north',
reference: 'componentToolbar',
items: [{
text: UMA.Locale.rm.buttonCreate,
action: 'createComp'
}, {
text: UMA.Locale.rm.buttonChange,
action: 'changeComp'
}, {
text: UMA.Locale.rm.buttonMove,
action: 'moveComp'
}, {
text: UMA.Locale.rm.buttonDelete,
action: 'deleteComp'
},{
text: UMA.Locale.rm.buttonPrint,
action: 'print',
margin: {
left: 8
}, {
xtype: 'componentTable-panel',
region: 'center'
}, {
xtype: 'componentsFilter-panel',
width: 300,
region: 'east'
}]
and then autoload my table:
items:[{
xtype: 'filtergrid',
reference: 'componentGrid',
paging: true,
hideHeaders: false,
region: 'center',
selModel: new Ext.selection.RowModel({
mode: "MULTI"
}),
store: {
model: 'Component',
autoLoad: true
},
columns: [{ ...
As Sergey Novikov mentioned that getRange() is a store method.
I also faced the same error for my grid's store and after some review again and again I found that whenever I close the tab and reopen it again I am getting two instance of grid's view (which can be checked by grid.getView()) and then I reached a conclusion that whenever the grid is creating the second time the selection model of grid view is having two instances because of I am using the code for selModel as new Ext.selection.CheckboxModel({
showHeaderCheckbox: true,
width: 50,
mode: 'MULTI'
})
then I changed the code for selModel as
selModel: {
selType: 'checkboxmodel',
showHeaderCheckbox: true,
width: 50,
mode: 'MULTI'
}
and the error is gone for me.
Hope this will help you. :)
Use the Object() constructor to test whether the object is one of three subtypes:
null object
object object
array object
For example:
function foo() { return {"hi":"bye" } }
function bar() { return null }
function baz() { return [1,2,3] }
function testObject(myObject)
{
if (Object(myObject).hasOwnProperty("0") )
{
/* Call getRange */
return 'yes';
}
else
{
/* throw an exception */
return 'no';
}
}
console.log(testObject(foo()), testObject(bar()), testObject(baz()) );
I am new to ext js
I am sorry if I couldn't explain my problem properly
My problem is the time field in grid is displays as blank
It displays the value if change both the type to string from date in model and disable rendering function formatTime .
Below is the part of response json,model and view. I have copied the code from another working site.
Please tell me how can debugg and find the solution and what will be possible reasons
Extjs 4.2 mvc
Value in json response
"actualstarttime":"02:00 AM"
model
{name: 'actualstarttime', type: 'date'},
View
{
header: 'Time',
dataIndex: 'actualstarttime',
width: 85,
renderer: this.formatTime,
editor: {
xtype: 'timefield',
id : 'e_actualstarttime',
/*allowBlank: false,*/
minValue: '12:00 AM',
maxValue: '23:00 PM',
increment: 30,
anchor: '100%',
editable : false,
format: 'h:i A',
submitFormat: 'h:i A',
listeners: {
change: function(roweditor, changes, record, rowIndex) {
me.calculateInterval(roweditor, changes, record, rowIndex);
},
afterrender: function( roweditor, changes, record, rowIndex ) { //TECHNOKRAFTS: Added Listner to apply validation depending on the status
me.checkstatusvalidation(roweditor, changes, record, rowIndex);
}
}
}
}
Formattime function called in render
formatTime : function (value){
return value ? Ext.Date.dateFormat(value, 'g:i A') : '';
}
You need to add the dateFormat to your field definition.
Ext.define("Model", {
extend: "Ext.data.Model",
fields: [{
name: "actualstarttime",
format: "h:i A"
}]
});
Demo
How do I use JS in a Sencha Touch view?
Ext.define('project.view.viewexample', {
extend: 'Ext.Panel',
xtype: 'asd',
config: {
styleHtmlContent: true,
scrollabe: 'vertical',
title: 'TITLE!',
Html: '<html>code and also JS?'
}
});
I have htmlcode which includes jscode (within Script-tags). It doesn't seem to work to use in this matter, am I right? I've also tried to use tpl, but it doesn't change anything.
Anyone know how to properly use JS? A somewhat better alternative would be to use it within the controller, but in that case I don't know how to pass the data.
EDIT:
I've come somewhat closer to a solution I think. This code below is clearly wrong, but maybe someone can see what I'm doing wrong:
Ext.define('projext.view.viewexample', {
extend: 'Ext.Panel',
xtype: 'gps',
config: {
styleHtmlContent: true,
scrollabe: 'vertical',
title: 'GPS',
tpl: 'Här var det GPS'
},
constructor: function() {
this.getPosition();
},
getPosition: function() {
var geo = Ext.create('Ext.util.Geolocation', {
autoUpdate: false,
listeners: {
locationupdate: function(geo) {
alert('New latitude: ' + geo.getLatitude());
},
locationerror: function(geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {
if(bTimeout){
alert('Timeout occurred.');
} else {
alert('Error occurred.');
}
}
}
});
geo.updateLocation();
}
});
The html config needs to be lower-case.
Ext.define('project.view.viewexample', {
extend: 'Ext.Panel',
styleHtmlContent: true,
scrollabe: 'vertical',
title: 'TITLE!',
html: 'define your html'
});
I have a gridpanel that allows inline editing of a column. This column uses a combobox as the editor, and neither the "change" event nor the "select" event give me something usable to backtrace the edited value to get the changed row from the gridpanel.
I believe Ext floats the editor's combobox so therefore I can't do something simple like
combo.up()
To return to the grid.
Here is the grid panel from the view:
{
xtype: 'gridpanel',
title: 'Important Projects',
id: 'importantProjectsGrid',
dockedItems: [],
flex: 1,
columns: [
{ header: 'Quote Name', dataIndex: 'QuoteName', flex: 4 },
{ header: 'Quote Status', dataIndex: 'QuoteStatusID', flex: 6, editor: {
xtype: 'combobox',
editable: false,
action: 'QuoteStatus',
selectOnTab: true,
store: 'statuses',
queryMode: 'local',
displayField: 'Description',
valueField: 'Description'
} }
],
store: 'myimpprojects',
selModel: {
selType: 'cellmodel'
},
plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})]
}
Here is the controller code pertaining to this:
init: function () {
this.control({
'[action=QuoteStatus]': {
change: function (combo, new_value, old_value, opts) {
// I need to go back up from this combobox
// to get the row that this value was edited in
// to grab an ID value from that row's data
// in order to make an ajax request
}
}
});
},
Thanks for any help!
You can monitor store's update event.
init: function () {
this.getMyimpprojectsStore().on('update', function(store, record) {
// do something with record
});
// ...
},
Try putting the listener on the CellEditing plugin. There are events for beforeedit, edit, and validateedit that receive an object containing references to the grid, the record, field, row and column indexes, and more. You should be able to check for the combobox in the event handler and handle your information from there.
Quick link to the doc page: Ext.grid.plugin.CellEditing
I'm convinced that the update plugin will handle the update automatically, through the api of the underlying store and post the data automatically to the server if the proxy as autoSync to true.
Example of the configured proxy:
Ext.define('MyApp.store.YourStore', {
extend: 'Ext.data.Store',
model: 'MyApp.model.YourGridModel',
autoSync: true, //Commits the changes realtime to the server
proxy: {
type: 'ajax',
batchActions : true, //Commits the changes everytime a value is changed if true o otherwise store the changes and batch update them in 1 single post
api: {
read: 'path/to/select',
create: 'path/to/create',
update: 'path/to/update',
destroy: 'path/to/delete'
},
reader: {
type: 'json',
root: 'results',
successProperty: 'success'
},
writer: {
type: 'json',
writeAllFields: true
},
listeners: {
exception: function(proxy, response, operation){
Ext.MessageBox.show({
title: 'REMOTE EXCEPTION',
msg: operation.getError(),
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}
},
listeners: {
write: function(proxy, operation){
var response = Ext.JSON.decode(operation.response.responseText);
if(response.success == true)
{
//TODO: Proxy - Messageboxes might be a little anoying we might instead use the status bar in teh grid or something so show status of the operation
Ext.MessageBox.show({
title: this.xFileLibraryTitle,
msg: response.message,
icon: (response.success == true)? Ext.MessageBox.INFO : Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}
}
});
I would look specially for the two configs: "autoSync" and "batchActions"
Hope this helps you further with your issue!
I am having trouble getting a ComboBox in ExtJS to display the dropdown items. I originally was using an XmlStore to load the data dynamically, but to make sure that wasn't the problem, I took an existing ComboBox that uses a simple ArrayStore (and currently works elsewhere in my application) to see if it would work, still with no luck.
When using Chrome's developer tools, when I click on the ComboBox element, I get ext-all-debug.js:41166 - Uncaught TypeError: Cannot call method 'getStyle' of undefined and nothing shows up for a dropdown.
Here is my code:
EventForm = Ext.extend(Ext.form.FormPanel, {
constructor: function(config) {
config = Ext.apply({
items: [
{
layout: 'column',
xtype: 'container',
items: [
{
layout: 'form',
xtype: 'container',
columnWidth: 0.5,
items: [
{
fieldLabel: 'My Combo Box'
name: 'mycombobox',
xtype: 'combo',
store: new Ext.data.ArrayStore({
fields: ['size'],
data: [
['50'],
['100'],
['150'],
['200']
]
}),
displayField: 'size',
valueField: 'size',
forceSelection: true,
editable: false,
triggerAction: 'all',
mode: 'local',
listWidth: 60,
width: 60
}
]
}, {
// another column here similar to above
}
]
}
]
}, config);
EventForm.superclass.constructor(config);
}
});
You are not calling the constructor of EventForm's superclass correctly. Change the last line of your constructor function to read:
EventForm.superclass.constructor.call(this, config);
Your data array must contain a list of objects, and the keys you provided by fields must be the keys your data refers to in those objects. The correct syntax for your data array could be:
data: [
{'size':'50'},
{'size':'100'},
{'size':'150'},
{'size':'200'}
]
(could be, because I have no chance right now to verify)