I have an extjs form panel. Based on the value selected in the combo box, I need to display a fieldset multiple times. That is,display the field set once if value chosen is 1, twice if value chosen is 2.
The problem that I am facing is that, the field set is being displayed only once. Since, I am changing the title of the fieldset, I can tell more clearly that the fieldset being displayed is the one in the last iteration of the for loop.
However,I can see the log messages in the js console for all the iterations of the for loop which means that the loop is being executed properly.
Here is my code:
Ext.define('ELM.view.cl.Edit', {
extend : 'Ext.form.Panel',
alias : 'widget.cform',
addMode : false,
layout : 'fit',
autoShow : true,
initComponent : function() {
this.items = this.buildItems();
this.callParent(arguments);
},
buildItems : function() {
return [ {
xtype : 'form',
id : 'details',
items : [
{
xtype : 'fieldset',
columnWidth : 0.5,
title : 'Details',
items : [
{
fieldLabel : 'Number Of Scripts Required',
xtype : 'combo',
name : 'noOfScriptsRequired',
id : 'noOfScriptsRequired',
store : new Ext.data.SimpleStore({
fields : [ 'no', 'val' ],
data : [['1','1'],['2','2'],['3','3']]
}),
displayField : 'no',
valueField : 'val',
listeners : {
select : function(combo, value) {
var formpanel = Ext.widget('cform');
var sd = this.up('form').getComponent(
'scriptdetails');
for ( var i=1; i<=combo.getValue();i++){
console.log(i);
var title="Script details "+i;
sd.setTitle(title);
sd.show();
sd.hidden = false;
console.log(sd);
}
}
}
}, ]
}, {
xtype : 'fieldset',
id : 'scriptdetails',
columnWidth : '0.5',
hidden : true,
title : 'Script Details',
items : [ {
xtype : 'textfield',
fieldLabel : 'Script Name',
name : 'scriptName'
} ]
}
]
} ];
}
});
UPDATE: Here is the working code:
{
fieldLabel : 'Name :',
xtype : 'textfield',
name : 'name'
},{
fieldLabel : 'Number Of Scripts Required',
xtype : 'combo',
name : 'noOfScriptsRequired',
id : 'noOfScriptsRequired',
store : new Ext.data.SimpleStore({
fields : [ 'no', 'val' ],
data : [ [ '1', '1' ], [ '2', '2' ],[ '3', '3' ] ]
}),
displayField : 'no',
valueField : 'val',
listeners : {
select : function(combo, value) {
var dynamicPanel = Ext.getCmp("dynamicPanel");
var scriptField = {
xtype : 'fieldset',
items : [
{
xtype : 'textfield',
fieldLabel : 'Script Name',
name : 'scriptName'
},
{
xtype : 'textfield',
fieldLabel : 'Script Parameters',
name : 'scriptParameters'
} ]
};
dynamicPanel.removeAll(true);
for ( var i = 0; i < combo.getValue(); i++) {
var index = dynamicPanel.items.length;
var j = i + 1;
scriptField.title = "Script Details "+ j;
dynamicPanel.insert(index,scriptField);
dynamicPanel.doLayout();
}
}
}
Thanks in advance
You are using id:'scriptdetails' in fieldset. In web pages each component or element should have an unique id. If there are elements with same id then there will be problems in rendering the elements like single element is rendered with errors or element may not be rendered.
In your case as you have to repeat the field set, don't not use fixed id. Use a random generated id from server or use 'itemId' which ExtJS provides.
Refer: here and here
Update:
Working fiddle is here
Ext.onReady(function() {
var store = new Ext.data.ArrayStore({
id: 0,
fields: [
'myId',
'displayText'
],
data: [
[1, '1'],
[2, '2'],
[3, '3'],
]
});
var scriptField = {
xtype: 'fieldset',
columnWidth: '0.5',
title: 'Script Details',
items: [{
xtype: 'textfield',
fieldLabel: 'Script Name',
hiddenName: 'scriptName'
}]
};
var container = new Ext.Panel({
layout: 'hbox',
height: '700px',
items: [{
xtype: 'panel',
id: 'parentContainer',
height: '700px',
layout: 'form',
items: [{
xtype: 'combo',
editable: false,
triggerAction: 'all',
mode: 'local',
store: store,
valueField: 'myId',
displayField: 'displayText',
fieldLabel: 'Show Number of Items',
listeners: {
select: function(combo, value) {
var dynamicPanel = Ext.getCmp("dynamicPanel");
dynamicPanel.removeAll(true);
for (var i = 0; i < combo.getValue(); i++) {
scriptField.title = "Script Details " + i;
dynamicPanel.add(scriptField);
dynamicPanel.doLayout();
dynamicPanel.ownerCt.doLayout();
dynamicPanel.ownerCt.ownerCt.doLayout();
}
}
}
}, {
xtype: 'panel',
id: 'dynamicPanel',
items: []
}]
}]
});
container.render(Ext.getBody());
});
Your buildItems code is executed once, at the beginning. Afterwards, you never really add any more items. Which you would want to do using this function: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.container.AbstractContainer-method-add
If you want to add an item, you have to create a new one. You can't add the same item into a container twice. So you would have to create them on the fly: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext-method-create
And for this, you should use some defined "blueprint", where you define that it is a fieldset, contains a textfield, and so on: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext-method-define
A blueprint of an item should never contain an id. I would refer to all the items by using form.items[i], and omit the id entirely.
You still have one problem, though: Your items all contain a textfield by the same name. This won't work well with submit(). But that's another story entirely.
Related
Hi I am in trouble with extjs 5 mvvm example. My store isn't recognized. I tried similliar solutions from stack but it still crashing.
Project structure:
structure
Code:
Message.js
Ext.define('Tgis.view.message.Message', {
extend : 'Ext.window.Window',
title: 'Wiadomosci',
requires : ['Tgis.view.message.MessageController'],
store: 'MessageStore',
alias : 'widget.message',
config : {
minHeight: 320,
minWidth:400,
bodyPadding : 10,
width : 500,
ghost : false,
bodyPadding : 10,
autoShow : true
},
items: [{
xtype:'panel',
layout : 'vbox',
items : [
{
xtype : 'mvvm-DateView' ,
flex : 1
},
{
xtype : 'mvvm-MessageView',
flex : 5
}]
}]});
Messagedate.js
Ext.define('Tgis.view.message.MessageDate', {
extend : 'Ext.grid.Panel',
xtype : 'mvvm-DateView',
store : 'MessageStore',
columns: [
{
text : 'Data',
dataIndex : 'date'
}
]});
MessageMaster.js
Ext.define('Tgis.view.message.MessageMaster', {
extend : 'Ext.form.Panel',
xtype : 'mvvm-MessageView',
requires : [
'Tgis.view.message.MessageViewModel'
],
title : 'Wiadomosci',
frame : true,
padding : 10,
viewModel : {
type : 'detailform' // references DetailViewModel
},
items : [
{
xtype : 'textfield',
bind : '{rec.message}',
fieldLabel : 'Tresc:'
},
{
xtype : 'hiddenfield',
bind : '{rec.id}'
}
]});
MessageModel.js
Ext.define('Tgis.view.message.MessageModel', {
extend : 'Ext.data.Model',
fields : [
{
name : 'date',
type : 'date'
},
{
name : 'message',
type : 'string'
},
{
name : 'id',
type : 'integer'
}
]});
Ext.define('Tgis.view.message.MessageStore', {
extend : 'Ext.data.Store',
model : 'Tgis.view.message.MessageModel',
storeId: 'MessageStore',
data : [
{
'date' : '28.05.1994',
'message' : 'lisa#simpsons.com',
'id' : '1'
}
]});
MessageController.js
Ext.define('Tgis.view.message.MessageController', {
extend : 'Ext.app.Controller',
init: function() {
this.control({
'mvvm-DateView': {
select : this.onGridSelect
}
});
},
onGridSelect : function(grid, record, index, eOpts) {
// grab a reference to the Detail view...
// we could have used a controller "ref", but those can also be problematic
var detailView = Ext.ComponentQuery.query('mvvm-DateView')[0];
//set the form's ViewModel binding
detailView.getViewModel().setData({ rec: record });
}});
MessageViewModel.js
Ext.define('Tgis.view.message.MessageViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.detailform',
data : {
rec : null
}});
Main.js
xtype: 'app-main',
controller: 'main',
viewModel: {
type: 'main'
},
layout: {
type: 'border'
},
items: [{
xtype: 'panel',
bind: {
title: '{name}'
},
region: 'west',
width: 250,
split: true,
defaultType : 'button',
layout : 'vbox',
items : [{
text : 'Wiadomości',
handler : 'onClickMessages'
},{
text : 'Wyczyść LC',
handler : 'onClearMessages'
}]
},{
region: 'center',
xtype: 'tabpanel',
items:[{
title: 'Tab 1',
html: '<h2>Content appropriate for the current navigation.</h2>'
}]
}]});
MainController.js
Ext.define('Tgis.view.main.MainController', {
extend: 'Ext.app.ViewController',
alias: 'controller.main',
onClickButton: function () {
Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this);
},
onConfirm: function (choice) {
if (choice === 'yes') {
//
}
},
onClickMessages : function(button) {
Ext.Ajax.request({
url : 'http://localhost:8080/Messagess/res',
method : 'GET',
success : function(response) {
var json = Ext.decode(response.responseText);
//var itemsArray = new Array();
/*for (var i = 0; i < json.data.length; i++) {
var date = new Date(json.data[i].date);
var messageTxt = Ext.create('Ext.form.field.TextArea', {
fieldLabel :date.toLocaleString(),
value : json.data[i].message,
editable : false,
grow : true,
width : '100%'
});
if (localStorage.getItem('date') != 'null')
itemsArray.push(messageTxt);
}
var checkbox = Ext.create('Ext.form.field.Checkbox', {
id : 'checkboxmessage',
boxLabel : 'Nie pokazuj ponownie'
});
itemsArray.push(checkbox);*/
Ext.create('Tgis.view.message.Message', {
//messagess: json.data
//Ext.getCmp('usernameID').setValue('JohnRambo');
/*items: itemsArray,
buttons : [{
xtype : 'button',
text : 'Zamknij',
handler : 'onCloseClick'
}]*/
})
}
});
},
onClearMessages : function(button) {
localStorage.setItem('date', '0');
}});
MainModel.js
Ext.define('Tgis.view.main.MainModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
data: {
name: 'Tgis'
}});
Call store like this in view solved in my project
store: {
type: 'MessageStore'
}
You have defined a "store template" but not created a store instance.
If you want to create multiple stores of that type (e.g. one for each grid), do it like this:
xtype:'grid',
store:Ext.create('MyApp.store.SomeStore',{
...
}),
If you only want a single store of that type, just add the store to stores:[] array in Application.js and it should work.
Uncaught TypeError: Cannot read property 'items' of null
the error is inside initComponent
my error show when i use my xtype: 'treepanel', i think the error inside the initComponent
userName = localStorage.getItem("userName");
Ext.define('TutorialApp.view.main.Main', {
extend : 'Ext.container.Container',
requires :
[
'TutorialApp.view.main.MainController',
'TutorialApp.view.main.MainModel',
'TutorialApp.store.MainTree'
],
xtype : 'app-main',
controller: 'main',
plugins : 'viewport',
viewModel :
{
type : 'main'
},
layout : {
type : 'border'
},
items :
[
{
xtype : 'panel',
bind :
{
title: '{name} '+userName+''
},
region : 'west',
html : '<ul><li>This area is commonly used for navigation, for example, using a "tree" component.</li></ul>',
width : 250,
split : true,
collapsible : true,`enter code here`
bbar :
[
{
text : 'Button',
handler : 'onClickButton'
}
],
items : [
{
xtype : 'treepanel',
rootVisible : true,
store : 'MainTree',
initComponent: function()
{
// declare store
this.store = new TutorialApp.store.MainTree();
// declare all items
this.items = [
{
title: 'Tree'
}
];
this.callParent();
}
}
]
},
{
region : 'center',
xtype : 'tabpanel',
items :
[
{
title : 'Tab 1',
html : '<h2>Content appropriate for the current navigation.</h2>'
}
]
}
]
});
This tree store comes
its a simple store
Ext.define('TutorialApp.store.MainTree', {
extend: 'Ext.data.TreeStore',
root: {
text: 'Root',
expanded: true,
children: [
{
text: 'Child 1',
leaf: true
},
{
text: 'Child 2',
leaf: true
},
{
text: 'Child 3',
expanded: true,
children: [
{
text: 'Grandchild',
leaf: true
}
]
}
]
}
});
any help ?
i think the error inside the initComponent
initComponent is not really supposed to be passed as a config option. If you need to apply your own logic in initComponent, you have to derive your own class. So, instead of:
{
xtype: 'treepanel',
rootVisible: true,
store: 'MainTree',
initComponent: function() {
// declare store
this.store = new TutorialApp.store.MainTree();
// declare all items
this.items = [
{
title: 'Tree'
}
];
this.callParent();
}
}
define your own tree panel:
Ext.define('MyTreePanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.mytreepanel',
initComponent: function() {
// declare store
this.store = new TutorialApp.store.MainTree();
// declare all items
this.items = [
{
title: 'Tree'
}
];
this.callParent();
}
});
and use its xtype:
{
xtype: 'mytreepanel',
rootVisible: true,
store: 'MainTree'
}
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!
So I have a view, and a controller linked to that view, and I would like to dynamically assign values to a xtype item in the view via store.
So for example, I would like dynamically setup layouts (please have a look at the proveded code) and urls
items: [
{
itemId: 'nav_home',
id: 'homeView',
layout: "{layout}",
items: [{
xtype: 'articlelist',
id: 'latestNews',
url: {url},
}
],
},
Could anyone lead me how to approach this task?
Thanks
You can use initialize function to render components based on some condition. Here is an example :
Ext.define('MyApp.view.MyView', {
extend: 'Ext.Container',
alias : 'widget.myview',
config: {
items : [],
mylayout: null
},
initialize : function(){
var me = this;
if(me.config.mylayout == 'horizontal'){
me.add({
xtype : 'panel',
layout : 'hbox',
items : [{
xtype : 'panel',
html : 'first content'
},
{
xtype : 'panel',
html : 'second content'
}]
});
} else if(me.config.mylayout == 'vertical'){
me.add({
xtype : 'panel',
layout : 'vbox',
items : [{
xtype : 'panel',
html : 'first content'
},
{
xtype : 'panel',
html : 'second content'
},
{
xtype : 'panel',
html : 'third content'
}]
});
}
me.callParent();
}
});
You can create this view like this:
var myView = Ext.create("MyApp.view.MyView", {
mylayout : 'vertical'
});
mylayout could be any configuration object you want to pass.
I have a combobox and now I want to create a dynamic textfields on change of this combo box in Extjs 4 and i am following the Mvc structure of Extjs .
Mycombo is below
{
xtype : 'combo',
store : 'product.CategoryComboBox',
name: 'category',
id:'category',
displayField: 'name',
valueField: 'idProductCategory',
multiSelect : false,
fieldLabel: 'Category',
allowBlank: false,
allowQueryAll : false,
forceSelection : true,
typeAhead: true,
triggerAction: 'all',
delimiter : ',',
width: 300,
queryMode:'local',
listeners:{select:{fn:function(combo, value) {}
}
You can add a FieldSet like this to your form
{
xtype: 'fieldset',
itemId: 'field_container',
layout: 'anchor',
border: 0,
style: { padding: '0' },
fieldDefaults: {
// field defaults
},
defaultType: 'textfield'
}
so when the combobox changes its value you just do the following
var container = this.down('fieldset[itemId="field_container"]');
container.removeAll();
var fieldsToAdd = [
{ name: 'field1', xtype: 'textfield', value: 'xxxxxx' },
{ name: 'field2', xtype: 'textfield', value: 'yyyyyyy' }
];
container.add(fieldsToAdd);
this way you can decide what the fieldsToAdd contains based on the combobox value.
Set an id to the textfield, then configure the listeners property of your combo as follows :
listeners: {
change: function (combo, value) {
Ext.get('idOfYourTextfield').setValue(value);
}
}
Field container allows to have multiple form fields on the same line, so you could do that:
{
xtype: 'fieldcontainer',
layout: 'hbox',
items: {
xtype: 'combo',
// your config here
listeners: {
change: function () {
this.up('fieldcontainer').add({
xtype: 'textfield',
value: this.getValue()
});
}
}
}
}
Edit
I guess you'll need to test if the text field already exists:
change: function () {
var ct = this.up('fieldcontainer'),
textField = ct.down('textfield');
if (textField) {
textField.setValue(this.getValue());
} else {
ct.add({
xtype: 'textfield',
value: this.getValue()
});
}
}