I'm trying to understand how it works. I have view:
roleSwitch: SC.SelectView.design({
layout: {top:38, height: 20, width: 256 },
items: [{ title: 'a', isEnabled: YES, checkbox: NO },
{ title: 'b', isEnabled: YES, checkbox: NO }],
itemTitleKey: 'title',
themeName: 'role',
showCheckbox: NO
})
I can't find any other information about SelectView. How i can pre-select item, where selection goes, why do I get an error each time when i make a selection?
Selection:
Lets say you have this:
MyApp.roleController = SC.ObjectController({
selectedRoleId: 1;
})
Then in your view:
roleSwitch: SC.SelectView.design({
layout: {top:38, height: 20, width: 256 },
items: [{ title: 'a', isEnabled: YES, checkbox: NO, roleId: 1 },
{ title: 'b', isEnabled: YES, checkbox: NO, roleId: 2 }],
itemTitleKey: 'title',
themeName: 'role',
showCheckbox: NO,
itemValueKey: 'roleId',
valueBinding: 'MyApp.roleController.selectedRoleId'
})
Your selection will be bound to the 'selectedRoleId' of the roleController
Related
I have this json data:
{
id: 1,
name: 'something',
description: 'somethingsomething',
customers: [{
id: 1,
username: 'cust1'
}, {
id: 2,
username: 'cust2'
}]
}
While I have no problems displaying the first three fields on the gridpanel, I however have an issue retrieving the array object for the customers field. My model goes like this:
fields: [
'id', {
name: 'name',
sortType: Ext.data.SortTypes.asUCString
},
'permanent', {
name: 'description',
Type: Ext.data.SortTypes.asUCString
}, {
name: 'customers',
Type: Ext.data.SortTypes.asUCString
}, {
name: 'username',
Type: Ext.data.SortTypes.asUCString,
mapping: 'customers[0].username'
}
]
When I try to access customers[0].username, it only retrieves the ones on that specified index. Removing the index number returns undefined as I assume it is looking for what index to return from. How do I properly retrieve all of customers: [] and display it to my grid where it is structured as:
{
xtype: 'gridpanel',
store: oStore,
viewConfig: {
loadMask: false,
enableTextSelection: true
},
hideHeaders: false,
bodyBorder: true,
columns: [{
text: 'Customer',
dataIndex: 'username',
flex: 1
}, {
header: '',
xtype: 'actioncolumn',
itemId: 'remove-player-btn',
width: 50,
sortable: false,
resizable: false,
menuDisabled: true,
items: [{
icon: 'resources/img/x.png',
tooltip: 'Remove Player',
scope: oMe
}],
editor: {
xtype: 'text',
name: 'deleteRow'
}
}]
}
You can use convert function available in model.This convert function is used for some calculation purpose & map response data for our needs.For example I will map username as below:
fields: [
{
name:'username',
convert:function(value,model)
{
return model.data.customers.username;
}
}
]
Use same technique for id field.Reply if any issues.
I have a gridpanel on a panel window that loads a certain store:
xtype: 'gridpanel',
store: custStore,
viewConfig: {
loadMask: false,
enableTextSelection: true
},
hideHeaders: false,
bodyBorder: true,
id: 'playerslist-grid-id',
itemId: 'playerslist-grid-id',
viewConfig: {
deferEmptyText: false,
emptyText: 'No records yet'
},
columns: [{
text: 'Customer',
dataIndex: 'username',
flex: 1
}, {
header: '',
xtype: 'actioncolumn',
itemId: 'remove-player-btn',
width: 50,
sortable: false,
resizable: false,
menuDisabled: true,
hidden: bHide,
items: [{
icon: 'resources/img/x.png',
tooltip: 'Remove Player',
scope: oMe
}],
editor: {
xtype: 'text',
name: 'deleteRow'
}
}]
The custStore variable is handled like this.
var oMe = this;
oController = EcommBackoffice.Global.app_var.getController('CustomerTagsController'),
cStore = oController.getCustomerListStore(),
cDetails = cStore.first(),
customers = [];
customers = cDetails.get('customers');
var custStore = Ext.create('Ext.data.ArrayStore', {
model: 'CustomerList',
data: customers
});
I needed to put it in an array store as the data object is nested like so:
{
id: 1,
name: 'test',
description: 'test',
customers: [{
id: 001,
username: 'bob'
}, {
id: 001,
username: 'terese'
}, {
id: 001,
username: 'dab'
}, {
id: 001,
username: 'bba'
}, {
id: 001,
username: 'hello'
}]
}
On my controller I process a function that places custStore to it and other parameters before a request.
click: function() {
oController.addPlayerToTag(newPlayer, tagId, custStore);
}
Problem: How do I reload custStore on the gridpanel I'm on after a successful callback? I tried using custStore.load() but nothing happened.
If I understand correctly, you get a new array of customers back from the server and need to refresh the grid with that array. In that case I think you need to call setData on the custStore, passing in the new array of customers. Not sure if 4.2 has this method. If not, try setting custStore.data property.
If that alone doesn't work, try also calling reconfigure on the grid, passing in the custStore.
I want to prevent validation for form fields with display: none.
For example fields with ipv6 set to display: none, I dont want to check this fields with form isValid() method.
var form = new Ext.form.FormPanel({
frame: true,
bodyStyle: 'padding:5px 5px 0;',
items: [{
xtype: 'radiogroup',
id: 'ip_type',
fieldLabel: 'IPType',
columns: 2,
items: [{
boxLabel: 'IPv4',
name: 'ip_type',
inputValue: 'ipv4',
checked: true
}, {
boxLabel: 'IPv6',
name: 'ip_type',
inputValue: 'ipv6'
}],
listeners: {
'change': function(radioGroup, checkedRadio) {
if (checkedRadio.inputValue == 'ipv4') {
Ext.fly('ip').setStyle({
display: 'block'
});
Ext.fly('ipv6').setStyle({
display: 'none'
});
Ext.getCmp('ip').enable();
Ext.getCmp('ipv6').disable();
} else {
Ext.fly('ip').setStyle({
display: 'none'
});
Ext.fly('ipv6').setStyle({
display: 'block'
})
Ext.getCmp('ip').disable();
Ext.getCmp('ipv6').enable();
}
}
}
}, {
id: 'ip',
layout: 'column',
border: false,
hideBorders: true,
items: [{
layout: 'form',
items: [{
fieldLabel: 'IP',
xtype: 'ipv4field',
name: 'ip',
allowBlank: false,
regex: ipv4_reg,
}]
}, {
html: '/'
}, {
xtype: 'numberfield',
name: 'netmask',
allowBlank: false,
allowDecimals: false,
minValue: 0,
maxValue: 32,
width: 70
}]
}, {
id: 'ipv6',
layout: 'column',
border: false,
hideBorders: true,
items: [{
layout: 'form',
items: [{
fieldLabel: 'IP',
xtype: 'textfield',
name: 'ipv6',
allowBlank: false,
regex: ipv6_reg,
}]
}, {
html: '/'
}, {
xtype: 'numberfield',
name: 'netmaskipv6',
//allowBlank: false,
allowDecimals: false,
minValue: 0,
maxValue: 128,
width: 70
}]
}]
});
To avoid validation of radio you can use Ext.form.Radio.disabled or if you want to send field value during form submit you can set Ext.form.Radio.validationEvent to false.
Also its better to use ExtJS Ext.form.Radio.hidden property instead of css display.
i want to add multiselect functionality to a field.
here is my current code for configuring jtable.
how to implement multiselect functionality for a specified field
fields: {
firstName: {
title: 'name',
width: '20%'
},
surname: {
title: 'surname',
width: '20%'
},
userName: {
title: 'username',
width: '20%',
key: true,
create: true
},
enabled: {
title: 'status',
type: 'radiobutton',
options: [
{Value: true, DisplayText: 'enabled'},
{Value: false, DisplayText: 'disabled'}
],
width: '20%'
},
roles: {
/***********************************************
// i wanna to enable multi-select for this field
/***********************************************
title: 'roles',
options: [
{Value: "ROLE_ADMIN", DisplayText: "admin"},
{Value: "ROLE_USER", DisplayText: "user"}
]
}
}
Field Type should be multiselectddl
Make sure you are using the jTable files available in this repository
https://github.com/stanleyta/jtable/commit/6876303615a239dc409dee481a877a8f934f340d
I have a Gridpanel inside a vertical panel so that I can place something underneath the gridpanel. Everything renders no issues until I set the store property on the gridpanel. Then the window just goes white and nothing is rendered. There must be something small I am mising.
newWindow = Ext.create('Ext.window.Window', {
title: 'View Data',
height: 400,
width: 600,
layout: 'fit',
bodyPadding: 5,
resizable: false,
items:
[
{ xtype:'panel', layout:{ type:'vbox', pack:'center' }, items:
[
{ xtype: 'gridpanel', height:200, columns:
[
{ header: 'A', dataIndex: 'a'},
{ header: 'B', dataIndex: 'b' },
{ header: 'M', dataIndex: 'm' },
{ header: 'i', dataIndex: 'i' }
], store: store, forceFit: true, border: true
},
{ xtype:'panel', title: 'Hot Load', border: true, margin:'5', height:150, width: 500, layout:{ type:'hbox', pack:'center' }, bodyBorder: true, collapsible: true }
]
}
],
buttons:
[
{ text: 'OK' } ,
{ text: 'Cancel' }
]
});
It's probably an issue with the data in your store in some way - which you don't show in your code here.
I did create a jsFiddle using a store.. If you populate your store with some sample data and still get the rendering issues, I'd start with something similar to what is in this jsFiddle and add the extra formatting/configs to that.
I did remove the extra panel, and jsFiddle doesn't really handle Ext.window.Window so I used a panel there just for example.
http://jsfiddle.net/LgyLsmv2/
Ext.define('Example', {
extend: 'Ext.data.Model',
fields: [{
name: 'a'
}, {
name: 'b'
}, {
name: 'm'
}, {
name: 'i'
}]
});
var store = Ext.create('Ext.data.Store', {
model: 'Example',
data: [{
a: 'test A',
b: 'test B',
m: 'test M',
i: 'test I'
}, {
a: 'test A',
b: 'test B',
m: 'test M',
i: 'test I'
}, {
a: 'test A',
b: 'test B',
m: 'test M',
i: 'test I'
}]
});
newWindow = Ext.create('Ext.panel.Panel', {
title: 'View Data',
height: 400,
width: 600,
//layout: 'fit',
//bodyPadding: 5,
//resizable: false,
renderTo: Ext.getBody(),
items: [{
xtype: 'gridpanel',
//height: 200,
columns: [{
header: 'A',
dataIndex: 'a',
flex: 1
}, {
header: 'B',
dataIndex: 'b',
flex: 1
}, {
header: 'M',
dataIndex: 'm',
flex: 1
}, {
header: 'i',
dataIndex: 'i',
flex: 1
}],
store: store //,
//forceFit: true,
//border: true
}, {
xtype: 'panel',
title: 'Hot Load',
//border: true,
//margin: '5',
height: 150,
width: 500 //,
//layout: {
//type: 'hbox',
//pack: 'center'
//},
//bodyBorder: true,
//collapsible: true
}],
buttons: [{
text: 'OK'
}, {
text: 'Cancel'
}]
});