ExtJS 5.0.1 tagfield - forms

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;
},
});

Related

Submit all of grid rows with Extjs form submit

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.

ExtJS 3.4 - Select row after load store of my gridpanel

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

extjs 4 MVC - form is undefined

I'm using EXT.JS 4 with MVC.
I have a view and a controller declared as below:
view/company/MarketData.js
Ext.define('Market.view.company.MarketData', {
extend: 'Ext.form.Panel',
requires: ['Market.store.HistoricalMarketData'],
store:'HistoricalMarketData',
xtype: 'companyMarketData',
initComponent: function() {
this.callParent();
},
items: [{
xtype:'fieldset',
columnWidth: 0.5,
border:true,
padding:5,
//disabled:true,
collapsible: false,
defaultType: 'textfield',
defaults: {anchor: '100%'},
layout: 'anchor',
items :[{
fieldLabel: 'Time',
//xtype: 'displayfield',
name: 'time',
readOnly:true
}, {
fieldLabel: 'Open',
//xtype: 'displayfield',
name: 'open'
}, {
fieldLabel: 'High',
//xtype: 'displayfield',
name: 'high'
}, {
fieldLabel: 'Low',
//xtype: 'displayfield',
name: 'low'
}, {
fieldLabel: 'Close',
//xtype: 'displayfield',
name: 'close'
}, {
fieldLabel: 'Volume',
//xtype: 'displayfield',
name: 'volume'
}]
}]
});
view/controller/ChartController.js
Ext.define('Market.controller.ChartController', {
extend:'Ext.app.Controller',
stores:['HistoricalMarketData'],
models: ['MarketData'],
views: ['company.MarketData'],
init: function() {
this.control({
'#companyChartItemId series[type=column]': {
itemmouseup:this.onItemMouseUp
},
'#companyChartItemId': {
mouseenter:this.onMouseEnter
}
});
},
onItemMouseUp: function (item) {
//do something
},
onMouseEnter: function (e) {
var view = this.getCompanyMarketDataView();
var form = view.superclass.getForm();
var store = this.getHistoricalMarketDataStore();
var data = store.getAt(0);
form.loadRecord(data);
}
});
the problem is that onmouseenter event the form is undefined:
onMouseEnter: function (e) {
var view = this.getCompanyMarketDataView();
var form = view.superclass.getForm();
Any thoughts how can I recover the form from the view?
You can use Ext.ComponentQuery.query(), which returns an array of matching components.
For example
Ext.ComponentQuery.query('companyMarketData')[0].doSomething();
It is good practice to use itemIds for your components.
Also, did you try passing the default params to the onMouseEnter function?
You seem to be calling view.superclass.getForm(), but you are not passing the view param, which should be first in order. Instead, you are passing e.

Chained Selectfields -- Sencha Touch 2.0

I am using the Sencha Touch 2.0 KitchenSink example to try to learn some of the basics. I am getting stuck on chained selectfields though.
I am going off the tutorial here but with the different setup I am being thrown off. The code below runs perfectly in the Forms.js file in kitchensink, but I am missing on the actual chainedselect part of it.
EDIT: What I am asking is how to make chained selectfields. I have the datastores and the selectfields in the example code, but not a working chained selectfield from first to second.
Ext.regModel('First', {
idProperty: 'FirstID',
fields: [{
name: 'FirstID',
type: 'int'
}, {
name: 'FirstName',
type: 'string'
}]
});
Ext.regModel('Second', {
idProperty: 'SecondID',
fields: [{
name: 'SecondID',
type: 'int'
},{
name: 'FirstID',
type: 'int'
}, {
name: 'SecondName',
type: 'string'
}]
});
var firstStore = new Ext.data.Store({
model: 'First',
data: [{
FirstID: 1,
FirstName: 'Kenworth'
}, {
FirstID: 2,
FirstName: 'Peterbilt'
}],
autoLoad: true
});
var secondStore = new Ext.data.Store({
model: 'First',
data: [{
SecondID: 1,
FirstID: 1,
SecondName: 'T800'
}, {
SecondID: 2,
FirstID: 1,
SecondName: 'T700'
}, {
SecondID: 3,
FirstID: 1,
SecondName: 'T660'
}, {
SecondID: 4,
FirstID: 1,
SecondName: 'T470'
}],
autoLoad: true
});
Ext.define('Kitchensink.view.Forms', {
extend: 'Ext.tab.Panel',
requires: [
'Ext.form.Panel',
'Ext.form.FieldSet',
'Ext.field.Number',
'Ext.field.Spinner',
'Ext.field.DatePicker',
'Ext.field.Select',
'Ext.field.Hidden'
],
config: {
activeItem: 0,
tabBar: {
// docked: 'bottom',
ui: 'dark',
layout: {
pack: 'center'
}
},
items: [
{
title: 'Basic',
xtype: 'formpanel',
id: 'basicform',
iconCls: 'refresh',
items: [
{
xtype: 'fieldset',
title: 'Enter Data',
instructions: 'Please enter the information above.',
defaults: {
labelWidth: '35%'
},
items: [
{
xtype: 'selectfield',
name: 'firstfield',
label: 'First',
store: firstStore,
displayField: 'FirstName',
valueField: 'FirstID'
}, {
xtype: 'selectfield',
name: 'secondfield',
label: 'Second',
store: secondStore,
displayField: 'SecondName',
valueField: 'SecondID'
}
]
}
]
}
]
},
onFirstChange: function(selectField, value){
var secondSelectField = this.items.get(1);
secondSelectField.store.clearFilter(); // remove the previous filter
// Apply the selected Country's ID as the new Filter
secondSelectField.store.filter('FirstID', value);
// Select the first City in the List if there is one, otherwise set the value to an empty string
var firstValue = secondSelectField.store.getAt(0);
if(firstValue){
secondSelectField.setValue(firstValue.data.SecondID);
} else {
secondSelectField.setValue('');
}
}
});

ExtJS 4 MVC Application: Form undefined error

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.