This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
I am working in extjs4 mvc.I am getting stuck at a point where I want to handle event when tab panels tab going to changed.I am using MVC structure in extjs4.
I am tried with tab change event but it never get fired when tab is changed.please give me some advise how to handle such condition...
here is my some code:--
1) my view file :---
Ext.define('am.view.center.centerTab',{
extend:'Ext.tab.Panel',
id:'centerTabId',
frame:true,
flex:1,
alias:'widget.CenterTab',
minTabWidth: 200,
border: 0,
style: {
borderColor: 'white',
//borderStyle: 'solid'
},
items:[
{
title:'Tab1',
},
{
title:'Tab2',
},
{
title:'Tab3'
}
]//end of items
});// End of login class
2) And here is my controller file some code :---
------
'CenterTab':
{
tabchange:this.tabChaged1
}
}); //end of control
},//end of init function
tabChanged1:function()
{
console.log("tab changed");
},
My requirement is whenever tab is chaged then the tabchange event get handled and particular function is called...
Please give me some advise...
You have misspelled the function name in your controller.
tabchange: this.tabChaged1 should be tabchange: this.tabChanged1
Related
I've found what I'm looking for but it's a jQuery example, it looks super clean and intuitive. Is there a way to do this with xtype 'datefield'? Is there a way to extend this field type to include a clock icon beside the date icon and have it behave the same way as in this example?
http://jsfiddle.net/rniemeyer/T3zge/
ko.kendo.bindingFactory.createBinding({
name: "kendoDateTimePicker",
defaultOption: "value",
events: {
change: "value",
open:
{
writeTo: "isOpen",
value: true
},
close: {
writeTo: "isOpen",
value: false
}
},
watch: {
enabled: "enable",
max: "max",
min: "min",
value: "value",
isOpen: ["open", "close"]
}
});
var viewModel = {
myDate: ko.observable(new Date())
};
ko.applyBindings(viewModel);
I'm still very much a newbie at this so perhaps somebody can lend some advice or point me in the right direction how I can figure this out. Thanks in advance! :)
I have created a DateTime plugin for ExtJS 4 and 5 few months ago.
Give it a try, its a little different than what you showed but works as intended:
https://github.com/gportela85/DateTimeField
Hope it helps
Extjs does have a separate Time Picker, but not a date/time picker combined. You would likely need to create a plugin, but if you are fairly new to this you may find it a little overwhelming.
You could search the forums for custom extensions/plugins people have created, I just came across this one for ExtJs 4.
I try to implement a virtual scrolling loading qx.ui.mobile.list.List. At least a lazy loading one. There is no event available by qooxdoo to know when the List is scrolled to the end. Is there some way to know the 'onScrollEnd' event or is there a better way?
The team added the feature in August, called waypoints. Here's the post. You need to define offsets at which you wish the event to be risen. Here's example from the post to illustrate the idea.
var scrollContainer = page._getScrollContainer();
scrollContainer.setWaypointsY(["0%", "50%", "100%", 200, ".waypoint"]);
scrollContainer.addListener("waypoint", function(evt)
{
console.log("Waypoint reached:" + evt.getData());
}, this);
Event payload has the following structure.
{
"offset" : 0,
"input" : "10%",
"index" : 0,
"element" : 0
}
There's also a complete demo in mobile showcase of lazy-loading list implemented with waypoints: showcase, code.
I need to get(retrieve) updated cell value in controller. (MVC)
So I tried this,
var modified = this.getItemGrid().getStore().getUpdatedRecords();
console.log(modified); // return [] empty array
var modified = this.getItemList_Store().getUpdatedRecords();
console.log(modified); // return [] empty array
but always it returns empty array even I updated some cell value.
anybody know what I am doing wrong?
Here is my part of view code,
Ext.define("App.view.orders.ItemList_view", {
extend: "Ext.grid.Panel",
alias: "widget.itemList_view",
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
initComponent: function () {
this.store = "ItemList_store";
this.columns = [
{
xtype: 'checkcolumn', text: "Ship", width: 50, dataIndex: "DR"
},
{ header: "test", width: 100, dataIndex: "test",
editor: {
xtype : 'textfield'
}
}
];
this.selModel = Ext.create("Ext.selection.CheckboxModel");
//this.selModel = Ext.create("Ext.selection.CellModel"); // It does not works either.
this.callParent(arguments);
},
.
.
.
Thank you!
[EDIT]
Thank you very much for your answer! I have some more question about editor grid.
Its much different from Ext3. so I'm very confusing now :(
Q1. How to collect edited record data (once click button)?
the event fired once the grid cell be changed.
but I want collect edited grid record once I click the 'Update edited cell' button, and I want to update all together at the once.
In Ext3, I did like this,
(button) click : function(){
var modified = mygridStore.getModifiedRecords();
var recordsToSend = [];
Ext.each(modified, function(record){
recordsToSend.push(record.data);
});
var grid = Ext.getCmp('grid');
grid.el.mask('Updating','x-mask-loading');
grid.stopEditing();
recordsToSend = Ext.encode(recordsToSend);
Ext.Ajax.request({
url : '/test/test',
params : {
data : recordsToSend
},
success : function(response){
grid.el.unmask();
alert(response.responseText);
mygridStore.commitChanges();
},
failure : function(response){
mygridStore.rejectChanges();
}
});
}
How can I change the code for Extjs4 ?
Q2. I don't know still how to find out for changed checkcolumn.
I tried this, but I does not work for checkcolumn (of cause I tested after change checkbox)
// grid coumn
{
xtype: 'checkcolumn', header: "My Check Column", width: 50, dataIndex: "CH"
}
-
// in control
'myGrid': {
validateedit: function (plugin, edit) {
console.log(edit);
},
checkchange: function (plugin, edit) {
console.log(edit);
console.log(edit.value);
}
}
Q3. When I click the cell to edit, the show some HTML tag in -_-;;
I really appreciate for your help. and thank you very much for your valuable time!
The editors (cell editors or row editors) do not commit their values to the store until you complete the edit - which means pressing ENTER or blurring the active cell editor by clicking elsewhere on the page, or clicking the save button on the row editor form .
If your purpose for reading the updated value in your editor is to perform some kind of validation I would suggest simply listening to the validateedit event in your grid's controller, as described here.
The second argument that this event passes to your handler contains a lot of data about the edit that you can then perform validation with. If the edit doesn't pass your validation you can return false from your handler and the value in the celleditor will revert to it's original value. The validateedit event gets fired from the editor grid itself so you would add an event handler in your controller for it like this:
Ext.define('MyApp.controller.MyController', {
init: function() {
this.control({
'mygridpanel': {
validateedit: function(plugin, edit) {
// silly validation function
if (edit.value != 'A Valid Value') {
return false;
}
},
},
});
},
});
But you should check out the link above to see all the different objects available in that second argument I named edit.
The validateedit event is fired right before the record is committed into the store - after the user has already clicked ENTER or blurred the editor, i.e., while the editor is closing.
If you are trying to get the celleditor's value before it starts to close, for some reason other than validation for example, you could get the active celleditor's value like this:
// myGrid is a reference to your Ext.grid.Panel instance
if (myGrid.editingPlugin.editing) {
var value = myGrid.editingPlugin.getActiveEditor().field.value
console.log('value: ' + value);
}
If there is no active editor then myGrid.editingPlugin.getActiveEditor().field would throw an error, that's why I wrapped a conditional around it.
One other point I should make, for validation in editor grids, I found that it is easiest to just put a validator config in the grid column's editor definition. That will give you all the handy validation CSS while the user is setting the field's value and alert him if there is a problem with the value before he tries to save it.
To get an idea of what I mean, try entering letters in the date column of this example. Mouse over the editor cell and you will get the error message.
EDIT
It seems I misunderstood you original question, I'll break down my answers to your questions above though,
Question 1
Once you have completed an edit (clicked ENTER or ), your call to mygridStore.getModifiedRecords() should be working fine because the record will have been committed to the store. I see that it was not working, I will cover that in a moment.
I should point out that ExtJS4 has a store.sync() method as covered here.
Instead of extracting the modified records from the store, encoding them, manually doing an ajax request to save them to the server and then manually committing them you can call this sync method and it will take care of all of these actions for you.
If you have different URLs to handle the different create, read, update, destroy operations fired off by your store's load and sync methods, you can use the store's proxy api config to map your URLs to these operations as covered here. Or you can set-up your server side controller to be able to differentiate between your store's load request (read operations default to HTTP GET) and it's sync requests (create, update and delete operations default as HTTP POST).
There could be many different ways to go about doing this on the server side, the way I usually do it is to have one SQL stored procedure for GET requests and one for POST requests for any given store. I include the store name as an extra param and then my server side controller runs the appropriate stored procedure based on whether it is a GET or a POST request.
Question 2
Cell editing doesn't support checkcolumn edits. You have to make a different handler to listen to changes on that, something like this:
checkchange: function (column, rowIndex, checked) {
var record = store.getAt(rowIndex),
state = checked ? 'checked' : 'unchecked'
console.log('The record:');
console.log(record)
console.log('Column: ' + column.dataIndex);
console.log('was just ' + state)
}
Your call to mygridStore.getModifiedRecords() should be able to pick up the check changes also however, they get committed to the grid's store right away after being checked. store.sync() would also pick up changes to checkcolumn.
Question 3
I can't completely tell what is causing that problem but it may be something strange going on with your validateedit event, your handler should be returning true or false.
As I said earlier, I misunderstood the reason you originally asked this question. I thought you were trying to do some kind of validation while an edit was in progress. Now I understand that you are trying to get all of the modified records from the store after all the editing is completed in order to save them to the database, I was thrown off because in ExtJS 4 a store is usually saved to the database with the sync method as I mentioned.
In other words, you don't need the validateedit event or checkchange event to get a list of modified records.
The actual problem you are having might be trouble with the store's getter methods (getModifiedRecords, getUpdatedRecords) in some 4.07 versions, take a look at this post and this one.
So with all that said, the best advice I can give you is 1) try out the stores sync method for saving modified data to the database and 2) upgrade to ExtJS 4.1, there were a lot of bugs that were straightened out between 4.07 and 4.1 which you should be able to take advantage of, I cut out about 75% of the overrides I was using to make things work when I switched over to 4.1.
EditedGrid.plugins[0].completeEdit();
This will make the active changes commit and call edit event also.
listeners: {
validateedit: function (editor, e) {
//console.log(editor);
var oldVal = editor.originalValue;
var newVal = editor.value;
}
}
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
I use Extjs4 and MVC. I would like to change my Model's fields dynamically...
Something like adding a variable number of fields... Any suggests?
You can use the model.setFields(fieldsArray) function, shown here in the API. This method replaces all existing fields on the model with whatever new fields you include in the argument. There is not a static getFields method to capture the existing fields so as not to overwrite them but it is easy enough to get them using model.prototype.fields.
I did this recently to attach dynamic permission setting fields to a "User" model before I loaded the user. Here's an example:
Ext.define('myApp.controller.Main', {
extend: 'Ext.app.Controller',
models: [
'User',
],
stores: [
'CurrentUser', // <-- this is not autoLoad: true
'PermissionRef', // <-- this is autoLoad: true
],
views: ['MainPanel'],
init: function() {
var me = this;
// when the PermissionRef store loads
// use the data to update the user model
me.getPermissionRefStore().on('load', function(store, records) {
var userModel = me.getUserModel(),
fields = userModel.prototype.fields.getRange();
// ^^^ this prototype function gets the original fields
// defined in myApp.model.User
// add the new permission fields to the fields array
Ext.each(records, function(permission) {
fields.push({
name: permission.get('name'),
type: 'bool'
});
});
// update the user model with ALL the fields
userModel.setFields(fields);
// NOW load the current user with the permission data
// (defined in a Java session attribute for me)
me.getCurrentUserStore().load();
});
}
});
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
I Want to separate the database functionality and logic part by having the database operations in the model and the logic part in the controller. Earlier I had all the code in the action part of the controller itself. I have tried something, but it doesn't work.
This is what I had earlier:
/* Controller */
function insertFormName(){
$formname=$_POST['formname'];
$ret = $this->Form->query("Select id from forms order by id DESC LIMIT 1");
$newid=$ret[0]['forms']['id'];
$this->Form->updateAll(array('Form.name' => "'$formname'"),array('Form.id' => $newid));
}
And now I changed it a bit, which doesn't work:
/* Controller */
function insertformname()
{
$this->data['Form']['formname']=$this->params['form']['formname'];
$this->Form->save($this->data);
$this->Form->updateAll(array('Form.name' => "'$formname'"),array('Form.id' => $newid));
}
/* Model */
function save($data)
{
$ret = $this->Form->query("Select id from forms order by id DESC LIMIT 1");
$newid=$ret[0]['forms']['id'];
$this->Form->updateAll(array('Form.name' => "'$formname'"),array('Form.id' => $newid));
return $newid;
}
EDIT:
I have tried it another way.. Have the entire functionality in the model and just call that function from the controller.Is this method correct?
/* Model */
function saveFormName($data)
{
$this->formname=$data[$this->name]['formname'];
$ret = $this->Form->query("Select id from forms order by id DESC LIMIT 1");
$newid=$ret[0]['forms']['id'];
$this->Form->updateAll(array('Form.name' => "'$formname'"),array('Form.id' => $newid));
}
/* controller */
function insertformname()
{
$this->data['Form']['formname']=$this->params['form']['formname'];
$this->Form->saveFormName($this->data);
}
It looks like you should probably revisit the Cake book (book.cakephp.org) and redo the lessons. If you setup your form correctly, you shouldn't have to manually assign $_POST['formname'] to $this->data. Try setting the field names in your form (in the HTML) to data[ModelName][FieldName].
Next:
$this->Form->updateAll(array('Form.name' => "'$formname'"),array('Form.id' => $newid));
Why are you updating data right after you saved it? Where do the $newid and $formname variables come from? You have them defined in the Model::save, but not in the controller.
This seems like you're trying to fight with the Cake automagic stuff too much. Perhaps you should repost your question, but please spell out your high level description rather than just a "why doesn't this work?" It looks to me like this could be simplified a ton, but, again, I'm not quite sure what your objectives are.
Respectfully,
Travis