My grid panel:
new Ext.grid.GridPanel({
title: "Utilisateurs",
layout: 'fit',
style: marginElement,
columns: mesColonnesUtil,
id: 'gridPanelUtil',
width: '70%',
colspan: 2,
collapsible: false,
layout: 'fit',
autoWidth: true,
monitorResize: true,
height: 200,
store: storeUtil,
stripeRows: true,
selModel: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
listeners: {
click: function () {
this.selModel.getSelected();
}
}
});
My store:
var storeUtil = new Ext.data.JsonStore({
proxy: proxyGrUtil,
baseParams: {
method: 'storeUtil',
gr: ''
},
autoLoad: true,
fields: ["Nom", "Prenom", "LDAPUser"],
root: "rows",
totalProperty: "total",
successProperty: "success"
});
My combobox with select event, I load my grid panel with params:
{
xtype: 'combo',
store: storeGrUtil,
id: 'comboGrUtil_GrUtil',
width: 300,
valueField: "id",
displayField: "lib",
triggerAction: 'all',
mode: 'local',
listeners: {
select: function () {
Ext.getCmp('gridPanelUtil').store.load({
params: {
gr: Ext.getCmp('comboGrUtil_GrUtil').getValue() // this the value of items selected combobox
}
})
}
}
}
After this event, I can't select a row in my grid panel, why ?
I don't understand.
The problem is the call of the load event of the store. You have to execute the row selection in this event and not after the call. If I remember well, the grid is completely loaded in this event. Take a look of the code tag above.
If it not working, I suggest to take a look at other event. Maybe with rowinserted of the gridView.
var storeUtil = new Ext.data.JsonStore({ proxy: proxyGrUtil,
baseParams: { method: 'storeUtil', gr: '' },
autoLoad: true,
fields: ["Nom", "Prenom", "LDAPUser"],
root: "rows",
totalProperty: "total",
successProperty: "success",
listeners:
load: function(e, records, options){
Ext.getCmp("gridPanelUtil").getSelectionModel().selectRow(maLigneASelectionner);
}
}
});
you need to use the selectionModel of the grid, maybe you can pass a callback when calling load to the store
store.load({
callback: function(records, operation, success) {
//operation object contains all of the details of the load operation
//records contains all the records loaded
console.log(records);
}
});
the you can call
grid.getSelectionModel( ).select(object/index);
//you need to pass record instance or index
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
});
}
});
I am creating a Todo application with ExtJS 6. My application should fetch data, here are Todos list from a Server using RESTful web service, and add new Todo task and send this new task to store in the Server. For the fetching part, it was successfully to show the data from the server, but I still facing a problem with the adding data and send back to the server.
Here are components that I have:
A View called ToDoList which contains 1 textfield and 1 button to add new Todo task:
Ext.define('ToDo.view.toDoList.ToDoList',{
extend: 'Ext.panel.Panel',
requires: [
'ToDo.view.toDoList.ToDoListController',
'ToDo.view.toDoList.ToDoListModel'
],
xtype: 'app-todoList',
controller: 'todoList',
viewModel: {
type: 'todoList'
},
items: [{
xtype: 'container',
items: [{
xtype: 'container',
layout: 'hbox',
cls: 'task-entry-panel',
defaults: {
flex: 1
},
items: [{
reference: 'newToDo',
xtype: 'textfield',
emptyText: 'Enter a new todo here'
},
{
xtype: 'button',
name: 'addNewToDo',
cls: 'btn-orange',
text: 'Add',
maxWidth: 50,
handler: 'onAddToDo'
}]
}]
}]
});
My ViewModel called ToDoListModel which contains store object named todos, which including 3 parameters: id, desc and done.
Ext.define('ToDo.view.toDoList.ToDoListModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.todoList',
stores:{
todos: {
fields: [{
name: 'id',
type: 'string'
},
{
name: 'desc',
type: 'string'
},
{
name: 'done',
type: 'boolean'
}],
autoLoad: true,
sorters: [{
property: 'done',
direction: 'ASC'
}],
proxy: {
type: 'rest',
url: 'http://localhost:8082/RegistrationForm/tasks/',
reader: {
type: 'json'
},
writer: {
type: 'json'
}
}
}
}
});
And My ViewController called: ToDoListController looks like:
Ext.define('ToDo.view.toDoList.ToDoListController', {
extend: 'Ext.app.ViewController',
alias: 'controller.todoList',
views: ['ToDo.view.toDoList.ToDoList'],
init: function(){
var me = this;
this.getViewModel().data.todos.load(function(records){
Ext.each(records, function(record){
console.log(record);
me.addToDoToView(record);
});
});
Ext.getBody().on('click', function(event, target){
me.onDelete(event, target);
}, null, {
delegate: '.fa-times'
});
},
onAddToDo: function () {
var store = this.getViewModel().data.todos;
var desc = this.lookupReference('newToDo').value.trim();
**HOW CAN I ADD NEW OBJECT TO STORE AND PERFORM POST REQUEST HERE TO THE SERVER**
},
addToDoToView: function(record){
this.view.add([{
xtype: 'container',
layout: 'hbox',
cls: 'row',
items: [{
xtype: 'checkbox',
boxLabel: record.get('desc'),
checked: record.get('done'),
flex: 1
},
{
html: '<a class="hidden" href="#"><i taskId="'+ record.get('id') + '" class="fa fa-times"></i></a>'
}]
}]);
},
onDelete: function(event, target){
var store = this.getViewModel.data.todos;
var targetCmp = Ext.get(target);
var id = targetCmp.getAttribute('taskId');
store.remove(store.getById('id'));
store.sync({
success: function(){
this.view.remove(targetCmp.up('.row').id)
},
scope: this
});
}
});
And when the user click to the Add Button, the function onAddToDo() in the Controller will be call, here it will get the new task from the textfield (here desc variable), create a new Todo object and then send this object to the server using POST request. My service in the server will look like:
//ADD new Todo
#RequestMapping(value = "/tasks/", method = RequestMethod.POST)
public ResponseEntity<Void> createUser(#RequestBody Todo todo, UriComponentsBuilder ucBuilder) {
//add this new Todo object to the database
return new ResponseEntity<Void>(headers, HttpStatus.CREATED);
}
What I would like to do is after user entering new Task, I will pack it as new object, structure look like: {'id'=1, 'desc'='what user entered','done'=false} and send it as the RequestBody of the POST method to the server. Can anyone guide me how can I do that? Thank you
You can add the record to the store by using add() function.
store.add({id:1, desc:'what user entered',done:false});
Then you can call sync() function which will call the create api of the store and send the inserted data to server.
store.sync();
sync() synchronizes the store with server in 3 cases that are new record creation, record updation and record deletion. So here when we add a new record and call sync(), it will send only the newly added record to the server as it is not present at server to the URL specified in store
I have a grid panel in a form. Any row of the grid panel have a filefield. I want to send any row (name field and filename field) to server.
Model:
Ext.define('FM.model.DefineCode', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'filename', type: 'string'}
],
validations: [
{type: 'presence', field: 'id'},
{type: 'presence', field: 'name'},
{type: 'presence', field: 'filename'}
]
});
Store:
Ext.define('FM.store.DefineCode', {
extend: 'Ext.data.Store',
model: 'FM.model.DefineCode',
autoLoad: true,
data: []
});
View:
Ext.define('FM.view.map.DefineCode', {
extend: 'Ext.window.Window',
title: 'Define Code',
alias: 'widget.mmDefineCode',
width: 600,
modal: true,
items: [{
xtype: 'form',
items: [{
xtype: 'gridpanel',
title: 'myGrid',
store: 'DefineCode',
columns: [
{
text: 'Id',
xtype: 'rownumberer',
width: 20
}, {
text: 'Name',
dataIndex: 'name',
flex: 1,
editor:{
xtype: 'textfield'
}
}, {
text: 'File',
dataIndex: 'filename',
width: 200,
editor:{
xtype: 'filefield',
emptyText: 'Select your Icon',
name: 'photo-path',
buttonText: '',
flex: 1,
buttonConfig: {
iconCls: 'icon-upload-18x18'
},
listeners: {
change: function(e, ee, eee) {
var grid = this.up('grid');
var store = grid.getStore();
var newStore = Ext.create('FM.store.DefineCode',{});
store.insert(store.data.items.length, newStore);
}
}
},
}, {
text: '',
width: 40
}
],
height: 200,
width: 600,
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
]}
],
}],
buttons: [{text: 'OK', action: 'OK'}],
initComponent: function() {
var me = this;
Ext.apply(me, {});
me.callParent(arguments);
}
});
Controller:
...
form.submit({
url: 'icon/create',
});
When I submit form, only last row is sending to server.
Where is problem?
Why you using this ?
var newStore = Ext.create('FM.store.Path', {});
store.insert(store.data.items.length, newStore);
try using rowEditing to edit/submit 1 row data :
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2,
clicksToMoveEditor: 1,
listeners: {
'validateedit': function(editor, e) {},
'afteredit': function(editor, e) {
var me = this;
var jsonData = Ext.encode(e.record.data);
Ext.Ajax.request({
method: 'POST',
url: 'your_url/save',
params: {data: jsonData},
success: function(response){
e.store.reload({
callback: function(){
var newRecordIndex = e.store.findBy(
function(record, filename) {
if (record.get('filename') === e.record.data.filename) {
return true;
}
return false;
}
);
me.grid.getSelectionModel().select(newRecordIndex);
}
});
}
});
return true;
}
}
});
and place it to your plugin.
I don't try it first, but may be this will help you a little.
AND this is for your controller to add a record from your grid, you need a button to trigger this function.
createRecord: function() {
var model = Ext.ModelMgr.getModel('FM.model.DefineCode');
var r = Ext.ModelManager.create({
id: '',
name: '',
filename: ''
}, model);
this.getYourgrid().getStore().insert(0, r);
this.getYourgrid().rowEditing.startEdit(0, 0);
}
check this for your need, this is look a like. You need to specify the content-type.
And for your java need, please read this method to upload a file.
Can anyone explain me, what am I doing wrong?
I'm trying to load data to store and select some of that on form load.
Here is what I came up with so far:
https://fiddle.sencha.com/#fiddle/cjd
Ext.define('TagModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'some_id',
type: 'int'
}, {
name: 'some_value',
type: 'string'
}]
});
Ext.define('MyPanel',{
extend: 'Ext.panel.Panel',
renderTo: Ext.getBody(),
title: 'Some title',
width: 200,
heigh: 500,
layout: 'anchor',
items: [{
xtype: 'tagfield',
anchor: '100%',
displayField: 'some_value',
valueField: 'some_id',
store: Ext.create('Ext.data.Store', {
model: 'TagModel',
data: [{
some_id: 0,
some_value: 'value0'
}, {
some_id: 1,
some_value: 'value1'
}]
}),
// value: ['0']
}]
});
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('MyPanel');
}
});
It works well, but if you uncomment line 40, which should tell component to select items by their valueField config, it shows error in the console:
Uncaught TypeError: Cannot read property 'isModel' of undefined ext-all-debug.js:144157
According to the specification, value can be set as an array of strings associated to this field's configured valueField.
As posted by the OP Панов Владимир:
OK, I've found a solution:
The problem is in the source code of ExtJS. If anyone have same problem, you can use this override:
Ext.override(Ext.form.field.Tag, {
findRecord: function(field, value) {
var store = this.store,
matches;
if (store) {
matches = store.queryBy(function(rec) {
return rec.get(field) === value;
});
}
return matches ? matches.getAt(0) : false;
},
});
I am new to ExtJS 4 and am trying to implement a simple application in MVC style. The documentation is really good and this is one of the topics covered in the Form package guide, but it doesn't seem to work in my case.
The app basically can create, edit and delete articles.The creation and editing are in pop-up windows.
The pop-up window contains a form with a text field and html-editor.
Please click on the link below,this is the error in Google Chrome Console when I click on the submit button in the 'window'
http://www.freeimagehosting.net/mjig7
Here is the code which I've written
Model:
Ext.define('AM.model.Article', {
extend: 'Ext.data.Model',
fields: ['name', 'data'],
proxy: {
type: 'rest',
url: 'users/data',
reader: {
type: 'json',
root: 'myJaxBean',
successProperty: 'success'
},
writer: {
type: 'json'
}
}
});
View:
Ext.define('AM.view.New', {
extend: 'Ext.window.Window',
alias : 'widget.new',
title : 'New Article',
autoShow: true,
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
layout: 'fit',
bodyStyle:'padding:5px 5px 0',
width: '70%',
height: '40%',
initComponent: function() {
this.items = [
{
xtype: 'form',
anchor: '99%',
items: [
{
xtype: 'textfield',
name : 'name',
fieldLabel: 'Article Name',
anchor: '99%'
},
{
xtype: 'htmleditor',
name : 'data',
fieldLabel: 'Article',
anchor: '99% -25'
}
],
buttons: [
{
text: 'Submit',
handler: function() {
var form = this.up('form').getForm(), // get the basic form
record = form.getRecord(); // get the underlying model instance
if (form.isValid()) { // make sure the form contains valid data before submitting
form.updateRecord(record); // update the record with the form data
record.save({ // save the record to the server
success: function(user) {
Ext.Msg.alert('Success', 'User saved successfully.')
},
failure: function(user) {
Ext.Msg.alert('Failure', 'Failed to save user.')
}
});
} else { // display error alert if the data is invalid
Ext.Msg.alert('Invalid Data', 'Please correct form errors.')
}
}
},
{
text: 'Cancel',
scope: this,
handler: this.close
}
]
}
],
this.callParent(arguments);
}
});
and finally the code in my controller which makes the window visible
Controller:
.....
'viewport > panel > panel > tbar button[action=newarticle]' :{
click: this.newArticle
},
....
newArticle: function(button){
var view = Ext.widget('new');
},
Please point me in the right direction in case I am doing something wrong.
Thanks in advance.
Check the docs getRecord():
Returns the last Ext.data.Model instance that was loaded via
loadRecord
so it's clear that you haven't load any record, so you getRecord() returns undefined. And you are getting your error further.