Develop Reference

Create two grids in seperated panels - Ext JS

I want to make two grids in two side-by-side panels. I tried with following code:
Ext.define('BlackWhiteList', {
extend: 'Ext.panel.Panel',
xtype: 'blackwhitelist',
layout: {
type: 'table',
columns: 2,
tableAttrs: {
style: {
width: '100%'
}
}
},
defaults: {
border: false
},
fieldDefaults: {
labelWidth: 110,
anchor: '100%'
},
items: [{
title: 'Black List',
cls: 'blackList',
items: [
grid
]
},
{
title: 'White List',
items: [
grid
]
}
]
});
var store = Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: [
{ name: 'Lisa', email: 'lisa#simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart#simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'homer#simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge#simpsons.com', phone: '555-222-1254' }
]
});
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
]
});
But at the moment in only shows me the title "Black List" and "White List" with empty content. I get no error messages or anything which can show me what is wrong here.
I use ExtJS 6.

This is really a tricky question, You will need to fix 2 things in your code so that your code work.
First is how you are defining the grid and where you used it, the a/m code will yield undefined value for the grid by the time of execution. why? this is related to hoisting in JS, the JS will recognize the grid variable but will not assign it's value so when you are creating your Ext panel you have grid value equals to undefined.
So first thing is to move the var grid block of code to the top.
But now you will face a 2nd problem you will see only one grid is rendered, why?
Because the grid is an object which is reference type, and this will make the two panels try to show the same grid and this is impossible so it is shown only on one place.
So to fix this problem you need to use Ext.define for the grid and assign xtype to it, so when you use xtype in the panel more than one time Ext will create 2 complete diffrent instance of your grid. Or you can make var grid1 and var grid2 but this is not good
Finally a working example Fiddle
Code Sample
App.js
Ext.application({
name: 'Test',
requires: ['Test.MyGrid'],
launch: function () {
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
layout: {
type: 'table',
columns: 2,
tableAttrs: {
style: {
width: '100%'
}
}
},
defaults: {
border: false
},
fieldDefaults: {
labelWidth: 110,
anchor: '100%'
},
items: [{
title: 'Black List',
cls: 'blackList',
items: [{
xtype: 'myGrid'
}]
}, {
title: 'White List',
items: [{
xtype: 'myGrid'
}]
}
]
});
}
});
app/MyGrid.js
var store = Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: [
{ name: 'Lisa', email: 'lisa#simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart#simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'homer#simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge#simpsons.com', phone: '555-222-1254' }
]
});
Ext.define('Test.MyGrid', {
extend:'Ext.grid.Panel',
store: store,
xtype:'myGrid',
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
]
});
Hope I made things clear :)

Default selected value in a combobox

I have a combobox that I have in it two types of laptops, toshiba and hp. On load the selection default value is nothing. I want to make the default selected value Toshiba, so that it's initially selected. Such as in HTML "selected". Any help please?
laptops = Ext.create('Ext.data.Store', {
fields: ['abbr','value', 'name'],
data : [
{"abbr":"tosh","value":"toshibatypes", "name":"Toshiba"},
{"abbr":"hp","value":"hptypes", "name":"HP"}
]
});
toshibatypes = Ext.create('Ext.form.Panel', {
xtype: 'radiogroup',
defaultType: 'radio',
layout: 'hbox',
border:false,
id: 'toshiba',
width:'100%',
items: [
{
checked: true,
boxLabel: 'Toshiba 1',
name: 'toshibas',
inputValue: 'toshiba1',
xtype:'radiofield'
},
{
boxLabel: 'Toshiba 2',
name: 'toshibas',
inputValue: 'toshiba2',
xtype:'radiofield'
}
]
});
hptypes = Ext.create('Ext.form.Panel', {
xtype: 'radiogroup',
defaultType: 'radio',
layout: 'hbox',
border:false,
id: 'hp',
width:'100%',
items: [
{
checked: true,
boxLabel: 'HP 1',
name: 'hps',
inputValue: 'hp1',
xtype:'radiofield'
},
{
boxLabel: 'HP 2',
name: 'hps',
inputValue: 'hp2',
xtype:'radiofield'
}]
});
laptoptypes = Ext.create('Ext.form.ComboBox', {
store: laptops,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
editable:false,
width: 100,
onchange:onSelectChange(this),
});

Just set the value of the combobox to a value corresponding to a value from the store. So if you set valueField to 'abbr', one of the values of 'abbr' of the store can be used.
laptoptypes = Ext.create('Ext.form.ComboBox', {
store: laptops,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
value: 'tosh',
editable:false,
width: 100,
onchange:onSelectChange(this),
});

ExtJS View properties depending on (controller-side) flag

I defined a view that should be able to be called in two modes. There are only two differences depending on a flag:
title of view (config.title)
selectfield might be shown or hidden
Here is the simplified view:
Ext.define('MyApp.view.fancyView', {
xtype: 'fancyview',
extend: 'Ext.form.Panel',
config: {
cls: 'fancyviewclass',
title: "titleDependingOnFlag",
items: [
{
xtype: 'fieldset',
name: 'fieldsetFancy',
items: [
{
xtype: 'selectfield',
itemId: 'stateID',
usePicker: true,
label: 'state',
store: 'States',
name: 'StateID',
valueField: 'ID',
displayField: 'ID'
},
{
xtype: 'selectfield',
itemId: 'countryID',
usePicker: true,
label: 'country',
store: 'Countries',
name: 'CountryID',
valueField: 'ID',
displayField: 'ID',
//hidden: true
}
]
}
]
}
});
And of course there is a controller that creates this view. At the moment I'm passing the flag as config value, see
Ext.define('MyApp.controller.fancyController', {
...
raisedBasedOnTap:function (flag){
this.myFancyFlag = !!flag;
var myFancyView = Ext.create('FLSMOBILE.minimax.view.CallReportTimestampPlaceCar', {
myFancyFlag: me.myFancyFlag
});
app.pushView(myFancyView);
}
...
});
What would be the best approach to make the title depending on a flag (like title: fancyFlag? 'title1' : 'title2') and hide selectfield countryID based on the flag?
Thanks in advance!

How to populate form with JSON data using data store?

How to populate form with JSON data using data store? How are the textfields connected with store, model?
Ext.define('app.formStore', {
extend: 'Ext.data.Model',
fields: [
{name: 'naziv', type:'string'},
{name: 'oib', type:'int'},
{name: 'email', type:'string'}
]
});
var myStore = Ext.create('Ext.data.Store', {
model: 'app.formStore',
proxy: {
type: 'ajax',
url : 'app/myJson.json',
reader:{
type:'json'
}
},
autoLoad:true
});
Ext.onReady(function() {
var testForm = Ext.create('Ext.form.Panel', {
width: 500,
renderTo: Ext.getBody(),
title: 'testForm',
waitMsgTarget: true,
fieldDefaults: {
labelAlign: 'right',
labelWidth: 85,
msgTarget: 'side'
},
items: [{
xtype: 'fieldset',
title: 'Contact Information',
items: [{
xtype:'textfield',
fieldLabel: 'Name',
name: 'naziv'
}, {
xtype:'textfield',
fieldLabel: 'oib',
name: 'oib'
}, {
xtype:'textfield',
fieldLabel: 'mail',
name: 'email'
}]
}]
});
testForm.getForm().loadRecord(app.formStore);
});
JSON
[
{"naziv":"Lisa", "oib":"2545898545", "email":"lisa#simpson.com"}
]

The field names of your model and form should match. Then you can load the form using loadRecord(). For example:
var record = Ext.create('XYZ',{
name: 'Abc',
email: 'abc#abc.com'
});
formpanel.getForm().loadRecord(record);
or, get the values from already loaded store.

The answer of Abdel Olakara works great. But if you want to populate without the use of a store you can also do it like:
var record = {
data : {
group : 'Moody Blues',
text : 'One of the greatest bands'
}
};
formpanel.getForm().loadRecord(record);

I suggest you use Ext Direct methods. This way you can implement very nice and clean all operations: edit, delete, etc.

How to put repetitive code from an object literal into a function and call with parameters?

I have the following object literal being sent to an Ext JS Ext.FormPanel.
This form has a number of form fields, e.g. "Customer Contact", "Reason for Contact", etc.
Each of these need to be of type dropdown instead a simple text field as they are now.
I converted the first field to a dropdown:
var form_customer_contact = new Ext.FormPanel({
frame:true,
labelWidth: 110,
labelAlign: 'right',
bodyStyle:'padding:0',
width: 300,
height: 600,
autoScroll: true,
itemCls: 'form_row',
defaultType: 'displayfield',
items: [{
fieldLabel: 'Customer Contact',
name: 'customerContact',
allowBlank:false,
value: 'Mr. Smith'
},{
fieldLabel: 'Reason for Contact',
width: 150,
xtype: 'combo',
mode: 'local',
value: '1',
triggerAction: 'all',
forceSelection: true,
editable: false,
fieldLabel: 'Produkt',
name: 'reason',
hiddenName: 'reason',
displayField: 'name',
valueField: 'value',
store: new Ext.data.JsonStore({
fields : ['name', 'value'],
data : [
{name : 'data correction', value: '1'},
{name : 'new contact', value: '2'},
{name : 'missing information', value: '3'}
]
})
}, {
fieldLabel: 'Communication',
name: 'communication',
value: 'test'
}, {
fieldLabel: 'Related Order',
name: 'relatedOrder',
value: 'test'
}, {
fieldLabel: 'Date/Time',
name: 'dateTime',
value: 'test'
}, {
fieldLabel: 'Notes',
name: 'notes',
value: 'test'
}
]
});
Now all the other fields need to be converted to a dropdown as well, but since about 80% of the code will remain the same each, I want to simply call a function, e.g. like this:
getField('Reason for Contact', 'reason', {'data correction', 'new contact', 'missing information'})
getField('Communication', 'communication', {'telephone', 'fax', 'email'})
What is the best way to create a function or object in Javascript which can be called as described above in order to reduce the code bloat in this example?

You could create a factory function to do that like this:
var createCombo = function(label, name, values) {
var i, data = [];
for(i = 0; i < values.length; i++) {
data.push({ name: values[i], value: i+1+'' });
}
return new Ext.form.ComboBox({
fieldLabel: label,
name: name,
width: 150,
mode: 'local',
value: '1',
triggerAction: 'all',
forceSelection: true,
editable: false,
displayField: 'name',
valueField: 'value',
store: new Ext.data.JsonStore({
fields : ['name', 'value'],
data : data
})
});
};
Then in your list of items call it like this:
createCombo('Reason for Contact', 'reason', ['data correction', 'new contact', 'missing information'])

Extend reusable components by creating xtypes. http://www.sencha.com/learn/Manual:Component:Extending_Ext_Components