I am new to ext js (working on ext js 6.2) and trying to get values from combo box to get 3d bar chart from selected value, but neither I am getting selected value nor the chart with selected value. Please help me getting out of this problem.
my codes are as under :
2FAData.js:
Ext.define('LICApp.store.2FAData', {
extend: 'Ext.data.Store',
alias: 'store.2fa-data',
requires: [
'Ext.data.reader.Xml'
],
autoLoad: true,
fields: ['name', 'cnt', 'zone'],
groupField: 'zone',
proxy: {
type: 'ajax',
cors: 'true',
url: 'http://localhost:8080/UserManagement/rest/BiodataController/bio',
method: 'POST',
reader: {
type: 'xml',
record: 'biodata',
rootProperty: 'biodatas'
}
},
});
Basic.js
Ext.define('LICApp.view.charts.bar3d.Basic', {
extend: 'Ext.Panel',
xtype: 'bar-basic-3d',
controller: 'bar-basic-3d',
requires: [
'Ext.chart.theme.Muted',
'LICApp.store.2FAData',
'Ext.grid.feature.Grouping'
],
width: 1300,
items: [{
xtype: 'combobox',
hideLabel: true,
store: {
type: '2fa-data'
},
valueField: 'zone',
displayField: 'zone',
typeAhead: true,
queryMode: 'local',
triggerAction: 'query',
emptyText: 'Select a Zone...',
selectOnFocus: true,
width: 200,
indent: true
},
{
xtype: 'cartesian',
flipXY: true,
reference: 'chart',
width: '100%',
height: 500,
insetPadding: '40 40 30 40',
innerPadding: '3 0 0 0',
theme: {
type: 'muted'
},
store: {
type: '2fa-data',
},
animation: {
easing: 'easeOut',
duration: 500
},
interactions: ['itemhighlight'],
axes: [{
type: 'numeric3d',
//position: 'bottom',
//fields: 'name',
//maximum: 150000,
//majorTickSteps: 10,
renderer: 'onAxisLabelRender',
//title: 'Number of Employees',
grid: {
odd: {
fillStyle: 'rgba(245, 245, 245, 1.0)'
},
even: {
fillStyle: 'rgba(255, 255, 255, 1.0)'
}
}
}, {
type: 'category3d',
position: 'left',
fields: 'name',
label: {
textAlign: 'right'
},
grid: true
}],
series: [{
type: 'bar3d',
xField: 'name',
yField: 'cnt',
style: {
minGapWidth: 10
},
highlight: true,
label: {
field: 'cnt',
display: 'insideEnd',
renderer: 'onSeriesLabelRender'
},
tooltip: {
trackMouse: true,
renderer: 'onSeriesTooltipRender'
}
}],
sprites: [{
type: 'text',
text: 'Implementation of 2FA Biometric - Progress Chart',
fontSize: 22,
width: 100,
height: 30,
x: 40, // the sprite x position
y: 20 // the sprite y position
}, {
type: 'text',
text: 'Source: 2FA Data Server',
fontSize: 10,
x: 12,
y: 490
}]
}],
tbar: [
'->',
{
text: 'Preview',
handler: 'onPreview'
}
],
listeners: {
select: 'onItemSelected'
}
});
BasicController.js
Ext.define('LICApp.view.charts.bar3d.BasicController', {
extend: 'Ext.app.ViewController',
alias: 'controller.bar-basic-3d',
onAxisLabelRender: function (axis, label, layoutContext) {
return Ext.util.Format.number(layoutContext.renderer(label) );
},
onSeriesLabelRender: function (v) {
return Ext.util.Format.number(v);
},
onSeriesTooltipRender: function (tooltip, record, item) {
var formatString = '0,000 ';
tooltip.setHtml(record.get('zone') + ': ' +
Ext.util.Format.number(record.get('cnt'), formatString));
},
onPreview: function () {
if (Ext.isIE8) {
Ext.Msg.alert('Unsupported Operation', 'This operation requires a newer version of Internet Explorer.');
return;
}
var chart = this.lookupReference('chart');
chart.preview();
},
onItemSelected: function (sender, record) {
var zone = combo.getValue();
},
});
You should attach a select listener to your combobox:
{
xtype: 'combobox',
hideLabel: true,
store: {
type: '2fa-data'
},
valueField: 'zone',
displayField: 'zone',
typeAhead: true,
queryMode: 'local',
triggerAction: 'query',
emptyText: 'Select a Zone...',
selectOnFocus: true,
width: 200,
indent: true,
listeners: {
select: 'onItemSelected' //this one
}
}
Notice in your onItemSelected method in your ViewController:
onItemSelected: function (sender, record) { //<- param is sender
//var zone = combo.getValue(); //you are using combo, this is undefined
var zone = sender.getValue();
// or better yet, why not use the `record` parameter?
var theValue = record[0].data.zone;
},
The binding feature of Sencha Ext JS MVVM architecture helps to write declarative code and avoid writing handlers in controllers. Since it's a migration to 6.2, this approach can be taken to remove unnecessary handlers in the controller. Here's a small example on this.
Update:
With reference to the provided example, please read the following points:
The parent class Panel has a View Model, which is available down the hierarchy to combo box and chart components.
View Model has a data property rec, which holds reference to the selected record from combo box. The selection property of combo box is bound to this rec property. It means that the moment a new record is selected from combo box, the rec property of View Model gets updated.
The View Model also has two stores - comboStore and chartStore
a. comboStore: - contains complete data set. It is bound to the combobox.
b. chartStore:- is the child store of comboStore (a child store takes its data from the parent store but has additional capability of filtering and sorting, independent of the parent store.). It is bound to the chart component and filters on the rec.name property (i.e the moment rec is updated, filtering is triggered.) So, technically, this store always contains only the selected record from combo box. And since chart is bound to this store, it gets updated too and shows the selected record's 3dbar graph.
Here's the inline code. Please see the comments for more.
Ext.define('MyPanel', {
extend: 'Ext.panel.Panel',
layout: 'vbox',
//Declare parent class view model
//This view model will be available down the hierarchy
viewModel: {
//Declare viewmodel's static data properties
data: {
//This references the selected record from combo box
rec: null,
},
//Declare stores for this viewmodel
stores: {
//Declare store for combo box containing complete dataset
comboStore: {
fields: ['name', 'apples', 'oranges'],
data: [{
name: 'Eric',
apples: 10,
oranges: 13
}, {
name: 'Mary',
apples: 7,
oranges: 20
}, {
name: 'John',
apples: 5,
oranges: 12
}, {
name: 'Bob',
apples: 2,
oranges: 30
}, {
name: 'Joe',
apples: 19,
oranges: 17
}, {
name: 'Macy',
apples: 13,
oranges: 4
}]
},
//Declare store for chart component
chartStore: {
//This is child store of 'ComboStore'. Its data source is 'comboStore'
source: '{comboStore}',
//This filters this child store to contain only the selected record from combo box
filters: [{
//This filters the store by 'name' property, which is the 'displayField' of combo box
property: 'name',
//This binding helps to filter by the selected record's 'name' property
//'rec' is the selecte record which is available in the view model
value: '{rec.name}'
}],
}
}
},
items: [{
xtype: 'mycombo',
bind: {
//This binding provides 'comboStore' data to the combobox
store: '{comboStore}',
//The selection property of combo box is published to the viewmodel
//and its reference is stored in the viewmodel data property 'rec'
selection: '{rec}'
}
}, {
xtype: 'mychart',
bind: {
//This binding provides 'chartStore' data to the chart component
//Since it is bound, the moment this store is updated/filtered, the chart view gets updated too
store: '{chartStore}'
}
}]
});
Please change listeners for select event instead of panel to combobox. Panel don't have select event.
I have created an Sencha Fiddle demo for combobox select/change both event. it will show how it is working. Hope this will help you to solve you problem or achieve your functionality.
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [{
"abbr": "AL",
"name": "Alabama"
}, {
"abbr": "AK",
"name": "Alaska"
}, {
"abbr": "AZ",
"name": "Arizona"
}]
});
// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
margin: 10,
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody(),
listeners: {
select: function (combo, record) {
Ext.Msg.alert('Success', 'Congrtas you have selected <b>' + record.get("name") + '</b>');
}
/*change: function (combo, newValue,oldValue) {
Ext.Msg.alert('Success', 'Congrtas you have selected <b>' + newValue + '</b>');
}*/
}
});
Related
I have a widget with combobox & flow I need is something like this,
At first combo is disabled.
Each row has edit icon & when I click on edit only that particular combo should be enabled.
Then when I save the record the enabled combo should be disabled again.
Step 3 is not working for me.
{
text: 'TC',
dataIndex: 'scrTC',
xtype: 'widgetcolumn',
widget: {
xtype: 'combo',
store: 'TCStore',
valueField: 'value',
displayField: 'displayValue',
matchFieldWidth: false,
bind: {
readOnly: {
isReadOnly
}
}
}
}
I have also tried onwidgetattach method, but after save this method is not called so its not working.
onWidgetAttach: function(column, widget, record) {
if (condition) {
widget.setReadOnly(false);
} else {
widget.setReadOnly(true);
}
}
Anyone has an idea?
Edit 2:
I have inserted readOnly:true to my leaf records dynamically.
In View Model create a isReadOnly function,
Ext.define('MainViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
data: {
isReadOnly: function (record) {
return record.get('readOnly');
}
}
});
And in treeGrid its,
{
text: 'TC',
dataIndex: 'scrTC',
xtype: 'widgetcolumn',
widget: {
xtype: 'combo',
store: 'TCStore',
valueField: 'value',
displayField: 'displayValue',
matchFieldWidth: false,
bind: {
readOnly: '{isReadOnly}'
}
}
}
On first load combobox is readOnly as expected, but when i click on edit button in row it creates a new row below & i have set readOnly=false. But still the combobox is not binding as readOnly false n making it editable.
You need to use record.readOnly for widgetcolumn to bind config for combobox. Like this
bind: {
readOnly: '{record.readOnly}'
}
You can check here with working fiddle.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create({
xtype: 'grid',
title: 'Binding Example',
width: '100%',
viewModel: {
stores: {
gridStore: {
type: 'store',
fields: ['name', 'abrr', {
//This readOnly for widgetcolumn of combobox
name: 'readOnly',
//By default vlaue is true
defaultValue: true,
type: 'boolean'
}],
data: [{
name: 'Substation A',
"abbr": "AL",
readOnly: true
}, {
name: 'Substation B',
"abbr": "AK"
}, {
name: 'Substation C',
"abbr": "AZ",
}, {
name: 'Substation D',
"abbr": "AK"
}]
},
states: {
type: 'store',
fields: ['abbr', 'name'],
data: [{
"abbr": "AL",
"name": "Alabama"
}, {
"abbr": "AK",
"name": "Alaska"
}, {
"abbr": "AZ",
"name": "Arizona"
}]
}
}
},
bind: '{gridStore}',
columns: [{
text: 'Name',
flex: 1,
dataIndex: 'name',
width: 120
}, {
text: 'Select',
flex: 1,
xtype: 'widgetcolumn',
dataIndex: 'abbr',
widget: {
xtype: 'combo',
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
bind: {
store: '{states}',
readOnly: '{record.readOnly}'
}
}
}, {
text: 'Edit',
width: 50,
xtype: 'widgetcolumn',
widget: {
xtype: 'button',
iconCls: 'x-fa fa-edit',
handler: function (btn) {
//Set the read only fase on button click
btn.getWidgetRecord().set('readOnly', false);
}
}
}],
renderTo: Ext.getBody()
});
}
});
Intro:
I need to call the backend controller to see if the user is admin. If the user is NOT admin, hide the toolbar in the application. Currently the var is successfully changing; However, it is changing after the view is already created causing the view to always have the toolbar visable.
Problem:
Need to check backend to see if user is in the admin group.
Need to return true if they are in admin group
MyCode:
var adminBool = false;
function CheckAdmin() {
debugger;
var a;
Direct.Report.IsAdmin(this.results, a);
debugger;
};
function results(result, constructor, c, d, e, f, g, h) {
debugger;
this.adminBool= result.adminUser; //returns bool
}
Ext.define('Ext.View.MyViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.AdministrationViewModel',
init: this.CheckAdmin(),
data: {
addNew: true,
update: true,
gridData: null,
isAdmin: this.adminBool
}
});
Synopsis:
Call the backend controller for admin status
Return bool
Update viewModel with bool respectively
ViewModel property,'isAdmin', will bind with hidden property to hide unwanted actions for non admins
UPDATE:
Basically I need a way to delay "isAdmin: this.adminBool" check to after the backend call is finished.
As you are using ViewModel.
So you can use set() method to update your viewmodel field.
I have created an sencha fiddle demo using viewmodel. You can check, how it is working in fiddle. In this fiddle I have not used any API, it just example regarding of ViewModel. Hope this will help you to solve your problem or achieve your requirement.
//ViewModel
Ext.define('MyViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.AdministrationViewModel',
data: {
isAdmin: true
}
});
//Panel
Ext.create('Ext.panel.Panel', {
title: 'ViewModel example',
width: '100%',
renderTo: Ext.getBody(),
viewModel: 'AdministrationViewModel',
layout: {
type: 'vbox', // Arrange child items vertically
align: 'stretch', // Each takes up full width
padding: 10
},
defaults: {
margin: 10
},
items: [{
xtype: 'combo',
height: 40,
fieldLabel: 'Choose Admin or user',
emptyText: 'Choose Admin or user',
labelAlign: 'top',
store: {
fields: ['name', 'value'],
data: [{
"value": true,
"name": "Admin"
}, {
"value": false,
"name": "User"
}]
},
queryMode: 'local',
displayField: 'name',
valueField: 'value',
listeners: {
select: function (combo, record) {
var viewModel = combo.up('panel').getViewModel(),
isAdmin = record.get('value');
//If selected value is {Admin} then we will show toolbar otherwise in case of {User} hide
viewModel.set('isAdmin', !isAdmin);
}
}
}, {
xtype: 'toolbar',
width: '100%',
height: 50,
padding: 10,
bind: {
hidden: '{isAdmin}'
},
items: [{
// xtype: 'button', // default for Toolbars
text: 'Admin',
}, {
xtype: 'splitbutton',
text: 'Split Button'
},
// begin using the right-justified button container
'->', // same as { xtype: 'tbfill' }
{
xtype: 'textfield',
name: 'field1',
emptyText: 'enter search term'
},
// add a vertical separator bar between toolbar items
'-', // same as {xtype: 'tbseparator'} to create Ext.toolbar.Separator
'text 1', // same as {xtype: 'tbtext', text: 'text1'} to create Ext.toolbar.TextItem
{
xtype: 'tbspacer'
}, // same as ' ' to create Ext.toolbar.Spacer
'text 2', {
xtype: 'tbspacer',
width: 50
}, // add a 50px space
'text 3'
]
}]
});
I am using ExtJs to create a combobox.
Here is my code:
Ext.define('Form.FormTypeDialog', {
extend : 'Ext.Window',
id: 'formTypeDialog',
formId: null,
callbackFunction : null,
modal: true,
statics : {
show : function(formId, callback) {
Ext.create(Form.FormTypeDialog", {
formId : formId,
callbackFunction : callback
}).show();
}
},
constructor : function(config) {
var me = this;
Ext.apply(this, {
buttons : [
{
text:"#{msgs.form_create_dialog_button_cancel}",
cls : 'secondaryBtn',
handler: function() {
me.close();
}
},
{
text:"#{msgs.form_create_dialog_button_next}",
handler: function() {
// Get selected form type
}
}
]
});
this.callParent(arguments);
},
initComponent:function() {
this.setTitle("#{msgs.form_create_dialog_title}");
this.setHeight(175);
this.setWidth(327);
var formTypeStore = Mystore.Store.createRestStore({
url : getRelativeUrl('/rest/form/formTypes'),
root: 'objects',
fields: ['name','value']
});
this.form = new Ext.form.Panel({
style:'padding:15px;background-color:#fff' ,
border:false,
bodyBorder:false,
items:[
new Ext.form.Label({
text: "#{msgs.form_create_dialog_select_type_label}",
margin: "25 10 25 5"
}),
new Ext.form.ComboBox({
id: 'createformTypeCombo',
margin: "8 10 25 5",
allowBlank: false,
forceSelection: true,
editable:false,
store: formTypeStore,
valueField: 'value',
displayField: 'name',
width: 260,
emptyText: '#{msgs.form_create_dialog_select_type}'
})
]
});
this.items = [
this.form
];
this.callParent(arguments);
}
});
I am creating this window on a xhtml page on a button click using :
Form.FormTypeDialog.show(null, showFormWindowCallBack);
It works fine and combo box is displayed and I can select value.
But if I open and close it 4 times, then in next show it shows the values but It do not allow me to select the last two value. I can only select first value.
Please suggest.
Note: I have tried copying and executing this code in forms of other pages of my application. But behavior is same in all cases.
This combobox is on a Ext.Window.
EDIT:
JSON RESPONSE FROM Rest:
{"attributes":null,"complete":true,"count":3,"errors":null,"failure":false,"metaData":null,"objects":[{"name":"Application
Provisioning Policy Form","value":"Application"},{"name":"Role
Provisioning Policy Form","value":"Role"},{"name":"Workflow
Form","value":"Workflow"}],"requestID":null,"retry":false,"retryWait":0,"status":"success","success":true,"warnings":null}
I have re-created this code, I had some errors showing in Firefox using your code directly so I've changed some things.
Running the code below and calling Ext.create("Form.FormTypeDialog", {}).show(); in the console window, then closing the window and repeating does not replicate this issue. Could you try using the code I have and see if you still have the same problem.
Ext.application({
name: 'HelloExt',
launch: function () {
Ext.define('Form.FormTypeDialog', {
extend: 'Ext.Window',
id: 'formTypeDialog',
formId: null,
callbackFunction: null,
modal: true,
constructor: function (config) {
var me = this;
Ext.apply(this, {
buttons: [
{
text: "#{msgs.form_create_dialog_button_cancel}",
cls: 'secondaryBtn',
handler: function () {
me.close();
}
},
{
text: "#{msgs.form_create_dialog_button_next}",
handler: function () {
// Get selected form type
}
}
]
});
this.callParent(arguments);
},
initComponent: function () {
this.setTitle("#{msgs.form_create_dialog_title}");
this.setHeight(175);
this.setWidth(327);
var myData = [
["Application Provisioning Policy Form", "Application"],
["Role Provisioning Policy Form", "Role"],
["Workflow Form", "Workflow"],
];
var formTypeStore = Ext.create("Ext.data.ArrayStore", {
fields: [
'name',
'value'
],
data: myData,
storeId: "myStore"
});
this.form = Ext.create("Ext.form.Panel", {
style: 'padding:15px;background-color:#fff',
border: false,
bodyBorder: false,
items: [
Ext.create("Ext.form.Label", {
text: "#{msgs.form_create_dialog_select_type_label}",
margin: "25 10 25 5"
}),
Ext.create("Ext.form.ComboBox", {
id: 'createformTypeCombo',
margin: "8 10 25 5",
allowBlank: false,
forceSelection: true,
editable: false,
store: formTypeStore,
valueField: 'value',
displayField: 'name',
width: 260,
emptyText: '#{msgs.form_create_dialog_select_type}'
})
]
});
this.items = [
this.form
];
this.callParent(arguments);
}
});
Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
handler: function() {
Ext.create("Form.FormTypeDialog", {}).show();
}
});
}
});
You can also play around with this code using / forking from this Fiddle
It is not clear what your problem is.
I use remote combo follows:
Ext.define('ComboRemote', {
extend: 'Ext.form.ComboBox',
xtype: 'ComboRemote',
emptyText: 'empty',
width: 75,
displayField: 'name',
valueField: 'id',
store: {
model: 'ComboModel',
proxy: {
type: 'rest',
url: '/serv/Res',
extraParams: {
query: ''
},
reader: {
root: "result", type: 'json'
}
},
autoLoad: true,
},
queryMode: 'remote',
pageSize: false,
lastQuery: '',
minChars: 0});
Ext.define('ComboModel', {
extend: 'Ext.data.Model',
fields: [
'id',
'name'
]});
I hope to help
Try these possible solutions
1. Make AutoLoad property for store as true.
2. Add delay of some ms
I am using Extjs 4.2 grid for my application. In my grid there is an option to select multiple rows and to delete them(via checkbox). But I am but the selected rows not returning any values.
Bellow is my code..
###########################################################################
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../js/extjs_4_2/examples/ux/');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.ux.grid.FiltersFeature',
'Ext.toolbar.Paging',
'Ext.ux.PreviewPlugin',
'Ext.ModelManager',
'Ext.tip.QuickTipManager',
'Ext.selection.CheckboxModel'
]);
Ext.onReady(function(){
Ext.tip.QuickTipManager.init();
Ext.define('ForumThread', {
extend: 'Ext.data.Model',
fields: [
{name: 'patient_name'},
{name: 'referrer_provider'},
{name: 'admit_date'},
{name: 'added_date'},
{name: 'billing_date'},
{name: 'dob'},
{name: 'loc_name'},
{name: 'physician_name'},
{name: 'imploded_diagnosis_name'},
{name: 'imploded_procedure_name'},
{name: 'imploded_optional_name'},
{name: 'imploded_quick_list_name'},
{name: 'med_record_no'},
{name: 'message'}
],
idProperty: 'bill_id'
});
var url = {
remote: '../new_charges_json.php'
};
// configure whether filter query is encoded or not (initially)
var encode = false;
// configure whether filtering is performed locally or remotely (initially)
var local = false;
// create the Data Store
var store = Ext.create('Ext.data.Store', {
pageSize: 10,
model: 'ForumThread',
remoteSort: true,
proxy: {
type: 'jsonp',
url: (local ? url.local : url.remote),
reader: {
root: 'charges_details',
totalProperty: 'total_count'
},
simpleSortMode: true
},
sorters: [{
property: 'patient_name',
direction: 'DESC'
}]
});
var filters = {
ftype: 'filters',
// encode and local configuration options defined previously for easier reuse
encode: encode, // json encode the filter query
local: local, // defaults to false (remote filtering)
// Filters are most naturally placed in the column definition, but can also be
// added here.
filters: [{
type: 'string',
dataIndex: 'patient_name'
}]
};
// use a factory method to reduce code while demonstrating
// that the GridFilter plugin may be configured with or without
// the filter types (the filters may be specified on the column model
var createColumns = function (finish, start) {
var columns = [
{
menuDisabled: true,
sortable: false,
xtype: 'actioncolumn',
width: 50,
items: [{
icon : '../js/extjs_4_2/examples/shared/icons/fam/user_profile.png', // Use a URL in the icon config
tooltip: 'Patient Profile',
renderer: renderTopic,
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
//alert("Bill Id: " + rec.get('bill_id'));
//Ext.Msg.alert('Bill Info', rec.get('patient_name')+ ", Bill Id: " +rec.get('bill_id'));
window.location.href="../newdash/profile.php?bill_id="+rec.get('bill_id');
}
},
]
},
{
dataIndex: 'patient_name',
text: 'Patient Name',
sortable: true,
// instead of specifying filter config just specify filterable=true
// to use store's field's type property (if type property not
// explicitly specified in store config it will be 'auto' which
// GridFilters will assume to be 'StringFilter'
filterable: true
//,filter: {type: 'numeric'}
}, {
dataIndex: 'referrer_provider',
text: 'Referring',
sortable: true
//flex: 1,
}, {
dataIndex: 'admit_date',
text: 'Admit date',
}, {
dataIndex: 'added_date',
text: 'Sign-on date'
}, {
dataIndex: 'billing_date',
text: 'Date Of Service',
filter: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y')
}, {
dataIndex: 'dob',
text: 'DOB'
// this column's filter is defined in the filters feature config
},{
dataIndex: 'loc_name',
text: 'Location',
sortable: true
},{
dataIndex: 'physician_name',
text: 'Physician (BILLED)',
sortable: true
},{
dataIndex: 'imploded_diagnosis_name',
text: 'Diagnosis'
},{
dataIndex: 'imploded_procedure_name',
text: 'Procedure'
},{
dataIndex: 'imploded_optional_name',
text: 'OPT Template'
},{
dataIndex: 'imploded_quick_list_name',
text: 'Quick List'
},{
dataIndex: 'med_record_no',
text: 'Medical Record Number'
},{
dataIndex: 'message',
text: 'TEXT or NOTES'
}
];
return columns.slice(start || 0, finish);
};
var pluginExpanded = true;
var selModel = Ext.create('Ext.selection.CheckboxModel', {
columns: [
{xtype : 'checkcolumn', text : 'Active', dataIndex : 'bill_id'}
],
checkOnly: true,
mode: 'multi',
enableKeyNav: false,
listeners: {
selectionchange: function(sm, selections) {
grid.down('#removeButton').setDisabled(selections.length === 0);
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
//width: 1024,
height: 500,
title: 'Charge Information',
store: store,
//disableSelection: true,
loadMask: true,
features: [filters],
forceFit: true,
viewConfig: {
stripeRows: true,
enableTextSelection: true
},
// grid columns
colModel: createColumns(15),
selModel: selModel,
// inline buttons
dockedItems: [
{
xtype: 'toolbar',
items: [{
itemId: 'removeButton',
text:'Charge Batch',
tooltip:'Charge Batch',
disabled: false,
enableToggle: true,
toggleHandler: function() { // Here goes the delete functionality
alert(selModel.getCount());
var selected = selModel.getView().getSelectionModel().getSelections();
alert(selected.length);
var selectedIds;
if(selected.length>0) {
for(var i=0;i<selected.length;i++) {
if(i==0)
{
selectedIds = selected[i].get("bill_id");
}
else
{
selectedIds = selectedIds + "," + selected[i].get("bill_id");
}
}
}
alert("Seleted Id's: "+selectedIds);return false;
}
}]
}],
// paging bar on the bottom
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Displaying charges {0} - {1} of {2}',
emptyMsg: "No charges to display"
}),
renderTo: 'charges-paging-grid'
});
store.loadPage(1);
});
#
It's giving the numbers in alert dialogue of the selected rows,here
alert(selModel.getCount());
But after this it's throwing a javascript error "selModel.getView is not a function" in the line bellow
var selected = selModel.getView().getSelectionModel().getSelections();
I changed it to var selected = grid.getView().getSelectionModel().getSelections(); Still it's throwing same kind of error(grid.getView is not a function).
Try this
var selected = selModel.getSelection();
Instead of this
var selected = selModel.getSelectionModel().getSelections();
You already have the selection model, why are you trying to ask to get the view to go back to the selection model? It's like doing node.parentNode.childNodes[0].innerHTML.
selModel.getSelection(); is sufficient. Also be sure to read the docs, there's no getView method listed there for Ext.selection.CheckboxModel, so you just made that up!
How to solve this error Uncaught TypeError: Cannot read property 'dom' of undefined in extjs?
I`m using dnd and put dnd code into layout browser
code :
// Generic fields array to use in both store defs.
var fields = [{
name: 'id',
type: 'string',
mapping: 'id'
}, {
name: 'lab_name',
type: 'string',
mapping: 'lab_name'
}, {
name: 'lab_address1',
type: 'string',
mapping: 'lab_address1'
}, {
name: 'lab_address2',
type: 'string',
mapping: 'lab_address2'
}, {
name: 'lab_poskod',
type: 'string',
mapping: 'lab_poskod'
}, {
name: 'lab_bandar',
type: 'string',
mapping: 'lab_bandar'
}, {
name: 'lab_negeri',
type: 'string',
mapping: 'lab_negeri'
}, {
name: 'lab_tel',
type: 'string',
mapping: 'lab_tel'
}, {
name: 'lab_fax',
type: 'string',
mapping: 'lab_fax'
}];
// create the data store
var gridStore = new Ext.data.JsonStore({
fields: fields,
autoLoad: true,
url: '../industri/layouts/getLab.php'
});
// Column Model shortcut array
var cols = [{
id: 'name',
header: "Id",
width: 10,
sortable: true,
dataIndex: 'id'
}, {
id: 'name',
header: "Laboratory Name",
width: 200,
sortable: true,
dataIndex: 'lab_name'
}, {
id: 'name',
header: "Laboratory Name",
width: 200,
sortable: true,
dataIndex: 'lab_address1'
}];
// declare the source Grid
var grid = new Ext.grid.GridPanel({
ddGroup: 'gridDDGroup',
store: gridStore,
columns: cols,
enableDragDrop: true,
stripeRows: true,
autoExpandColumn: 'name',
width: 325,
margins: '0 2 0 0',
region: 'west',
title: 'Data Grid',
selModel: new Ext.grid.RowSelectionModel({
singleSelect: true
})
});
// Declare the text fields. This could have been done inline, is easier to read
// for folks learning :)
var textField1 = new Ext.form.TextField({
fieldLabel: 'Laboratory Name',
name: 'lab_name'
});
// Setup the form panel
var formPanel = new Ext.form.FormPanel({
region: 'center',
title: 'Generic Form Panel',
bodyStyle: 'padding: 10px; background-color: #DFE8F6',
labelWidth: 100,
margins: '0 0 0 3',
width: 325,
items: [textField1]
});
var displayPanel = new Ext.Panel({
width: 650,
height: 300,
layout: 'border',
padding: 5,
items: [
grid,
formPanel
],
bbar: [
'->', // Fill
{
text: 'Reset Example',
handler: function() {
//refresh source grid
gridStore.loadData();
formPanel.getForm().reset();
}
}
]
});
// used to add records to the destination stores
var blankRecord = Ext.data.Record.create(fields);
/****
* Setup Drop Targets
***/
// This will make sure we only drop to the view container
var formPanelDropTargetEl = formPanel.body.dom;
var formPanelDropTarget = new Ext.dd.DropTarget(formPanelDropTargetEl, {
ddGroup: 'gridDDGroup',
notifyEnter: function(ddSource, e, data) {
//Add some flare to invite drop.
formPanel.body.stopFx();
formPanel.body.highlight();
},
notifyDrop: function(ddSource, e, data) {
// Reference the record (single selection) for readability
var selectedRecord = ddSource.dragData.selections[0];
// Load the record into the form
formPanel.getForm().loadRecord(selectedRecord);
// Delete record from the grid. not really required.
ddSource.grid.store.remove(selectedRecord);
return (true);
}
});
var tabsNestedLayouts = {
id: 'tabs-nested-layouts-panel',
title: 'Industrial Effluent',
bodyStyle: 'padding:15px;',
layout: 'fit',
items: {
border: false,
bodyStyle: 'padding:5px;',
items: displayPanel
}
};
If you try and render a component to a dom element that isn't found (or dom ID that isn't found) you'll get that error. See the example below to reproduce the error - then comment out the bad renderTo and uncomment the renderTo: Ext.getBody() to resolve the issue.
see this FIDDLE
CODE SNIPPET
Ext.onReady(function () {
// Generic fields array to use in both store defs.
var fields = [{
name: 'id',
type: 'string',
mapping: 'id'
}, {
name: 'lab_name',
type: 'string',
mapping: 'lab_name'
}, {
name: 'lab_address1',
type: 'string',
mapping: 'lab_address1'
}, {
name: 'lab_address2',
type: 'string',
mapping: 'lab_address2'
}, {
name: 'lab_poskod',
type: 'string',
mapping: 'lab_poskod'
}, {
name: 'lab_bandar',
type: 'string',
mapping: 'lab_bandar'
}, {
name: 'lab_negeri',
type: 'string',
mapping: 'lab_negeri'
}, {
name: 'lab_tel',
type: 'string',
mapping: 'lab_tel'
}, {
name: 'lab_fax',
type: 'string',
mapping: 'lab_fax'
}];
// create the data store
var gridStore = new Ext.data.JsonStore({
fields: fields,
autoLoad: true,
url: '../industri/layouts/getLab.php'
});
// Column Model shortcut array
var cols = [{
id: 'name',
header: "Id",
width: 10,
sortable: true,
dataIndex: 'id'
}, {
id: 'name',
header: "Laboratory Name",
width: 200,
sortable: true,
dataIndex: 'lab_name'
}, {
id: 'name',
header: "Laboratory Name",
width: 200,
sortable: true,
dataIndex: 'lab_address1'
}];
// declare the source Grid
var grid = new Ext.grid.GridPanel({
ddGroup: 'gridDDGroup',
store: gridStore,
columns: cols,
enableDragDrop: true,
stripeRows: true,
autoExpandColumn: 'name',
width: 325,
margins: '0 2 0 0',
region: 'west',
title: 'Data Grid',
selModel: new Ext.grid.RowSelectionModel({
singleSelect: true
})
});
// Declare the text fields. This could have been done inline, is easier to read
// for folks learning :)
var textField1 = new Ext.form.TextField({
fieldLabel: 'Laboratory Name',
name: 'lab_name'
});
// Setup the form panel
var formPanel = new Ext.form.FormPanel({
region: 'center',
title: 'Generic Form Panel',
bodyStyle: 'padding: 10px; background-color: #DFE8F6',
labelWidth: 100,
margins: '0 0 0 3',
width: 325,
items: [textField1]
});
var displayPanel = new Ext.Panel({
width: 650,
height: 300,
layout: 'border',
renderTo:Ext.getBody(),
padding: 5,
items: [
grid,
formPanel
],
bbar: [
'->', // Fill
{
text: 'Reset Example',
handler: function () {
//refresh source grid
//gridStore.loadData();
formPanel.getForm().reset();
}
}
]
});
// used to add records to the destination stores
var blankRecord = Ext.data.Record.create(fields);
/****
* Setup Drop Targets
***/
// This will make sure we only drop to the view container
var formPanelDropTargetEl = formPanel.body.dom;
var formPanelDropTarget = new Ext.dd.DropTarget(formPanelDropTargetEl, {
ddGroup: 'gridDDGroup',
notifyEnter: function (ddSource, e, data) {
//Add some flare to invite drop.
formPanel.body.stopFx();
formPanel.body.highlight();
},
notifyDrop: function (ddSource, e, data) {
// Reference the record (single selection) for readability
var selectedRecord = ddSource.dragData.selections[0];
// Load the record into the form
formPanel.getForm().loadRecord(selectedRecord);
// Delete record from the grid. not really required.
ddSource.grid.store.remove(selectedRecord);
return (true);
}
});
var tabsNestedLayouts = {
id: 'tabs-nested-layouts-panel',
title: 'Industrial Effluent',
bodyStyle: 'padding:15px;',
layout: 'fit',
items: {
border: false,
bodyStyle: 'padding:5px;',
items: displayPanel
}
};
});
It means that the object which you expect to have the dom attribute is undefined.
EDIT:
The error generates at this line:
formPanel.body.dom
It means that the formPanel is not rendered because you are trying to access its body property. This property is Available since: Ext 4.1.3
I'm seeing a similar error in code that executes for validation. What I'm doing has nothing to do with directly accessing the DOM, however I'm still getting a similar condition. The answer above is incomplete, the dom property is available on some ui elements in 3.x...
in earlier versions of Extjs (3.x) the property is mainBody.dom and not body.dom
directly from the source of hasRows() for grids in 3.4:
var fc = this.**mainBody.dom**.firstChild;
return fc && fc.nodeType == 1 && fc.className != 'x-grid-empty';