I am quite new to extjs..and I installed ext js4 in my server. I get the following error. Not sure what it means:
Ext.grid.ColumnModel is not a constructor
here 's my link:
http://srikanthrajan.com/test/index.html
Now I get Ext.grid.RowSelectionModel is not a constructor
Basically I am trying the following tutorial:
http://www.sencha.com/learn/ext-js-grids-with-php-and-sql
RowModel is default so in your grid configurations try this:
selModel: { mode: 'SIMPLE' },
or
selModel: new Ext.selection.RowModel({singleSelect:false})
although singleSelect is not a config option of RowModel, so try:
selModel: new Ext.selection.RowModel({model:SIMPLE})
From ExtJs docs:
mode : String
Mode of selection. Valid values are:
SINGLE - Only allows selecting one item at a time. Use allowDeselect to allow deselecting >that item. This is the default.
SIMPLE - Allows simple selection of multiple items one-by-one. Each click in grid will >either select or deselect an item.
MULTI - Allows complex selection of multiple items using Ctrl and Shift keys.
EDIT:
I looked at the code in the tutorial you mentioned and noticed that it is for ExtJs 2.x and 3.x versions. Grid changed a lot from version 3 to 4. If you want to follow that tutorial you will need to have ExtJs 4 documentation at hand.
I think the columns for PresidentsColumnModel should be Ext.grid.column.Column, not Ext.grid.ColumnModel
Related
I have a quandary that I can't seem to resolve - any pointers would be hugely welcome.
When the tab link is clicked, the new tab opens, but the datatable within tabs 2 & 3 doesn't resize - tab1 is always ok.
I'm using datatables within boostrap tabs and the following code, which I've used on other sites and they work. This site i'm working in however, isn't playing ball - wondering if it's because it's BS5 causing a conflict ??
$('a[data-bs-toggle="tab"]').on("shown.bs.tab", function (e) {
$.fn.dataTable.tables({ visible: true})
.columns.adjust()
.responsive.recalc();
});
I've also tried the code provided by Datatables, and that doesn't seem to work either - in this case. https://datatables.net/examples/api/tabs_and_scrolling.html
The Problem
I think the line
$.fn.dataTable.tables({ visible: true})
is not valid DataTables syntax - and I would expect it to generate an error in your browser's console:
$.fn.dataTable.tables(...).columns is undefined
Suggested Solutions
You can re-write your approach in a couple of different ways (assuming you are using a recent version of DataTables).
The first two examples assume all your tables use a common CSS class name in their HTML <table> tags. In my case, I am using this:
<table id="example2" class="display dataTable cell-border" style="width:100%">
And therefore I will use the .dataTable class selector in the following examples.
Example One
$('button[data-bs-toggle="tab"]').on('shown.bs.tab', function (event) {
$.fn.dataTable.Api('.dataTable')
.columns.adjust()
.responsive.recalc();
} );
Example Two
$('button[data-bs-toggle="tab"]').on('shown.bs.tab', function (event) {
$('.dataTable').DataTable()
.columns.adjust()
.responsive.recalc();
} );
Note that the above example uses DataTable() with a capital "D".
Example Three
The above examples operate on all data tables in the page - it's just that the only one which is affected is the one you see in the selected tab.
If you want to explicitly target only one table in your tab event, you can use the approach shown in this question:
How to make DataTable responsive in Bootstrap tabs
In that answer, the approach retrieves the specific table name from a unique attribute value 'data-bs-target' defined for each tab, for example:
data-bs-target="#home"
See the API reference page for details.
I am trying to figure out from couple of days how to display label for filters on category page. As mentioned in document I have added attribute inside config.products.defaultFilters[] and the filter have started showing there.
I have color and brand filters. For color filters I have mapped color id to color name in config.products.colorMappings so it is displaying correctly there. But for brand I can do the same but it is a static solution so every time admin adds new brand I will need to add its mapping and build the storefront again.
I have tried to check their forum but nothing useful. I checked Vue Storefront vuex catalog and category-next stores for hint but cannot find anything related there.
The label for option under brand_filter should be readable but it is showing that brand attribute option's id
Ok, after spending couple of days finding solution to this problem, I finally got a hint from this answer.
I am using theme vsf-capybara, and according to its guide, to setup I generated a local.json from generate-local-config.js and I merged configuration manually from that local.json to config/local.json file. Prior to this there was no filter named brand or color added already to the main config file.
The config property responsible for the filter labels to be incorrect was entities.attribute.loadByAttributeMetadata and it was set to true I changed it to false because core/module/catalog/CatalogModule has one action attribute/list needs to be dispatched for application use. So if entities.attribute.loadByAttributeMetadata in config/local.json is set to true, this action will not be dispatched. Here is the excerpt from CatalogModule:
if (!config.entities.attribute.loadByAttributeMetadata) {
await store.dispatch('attribute/list', { // loading attributes for application use
filterValues: uniq([...config.products.defaultFilters, ...config.entities.productListWithChildren.includeFields])
})
}
i am using dropdown widget in dojo (dijit), i want to set the selected option the top menu
i tried this code:
dijit.byId('projectId').addOption({ label: item.projname , value: item.projid, selected:true });
here the selected: true
is not working
Thanks
The asker's code is not correct as the selected property applies for the construction of the object. As PaulR suggested, the asker should use dijit.byId('projectId').set("value",item.projid); when the select widget has already been created.
Aside: I would suggest using the AMD module "dijit/registry" rather than the root dijit object.
According to the documentation, "selected: true" is the correct way to specify the selected item. See https://dojotoolkit.org/reference-guide/1.9/dijit/form/Select.html.
I noticed the same issue in the past, and noticed that this only works correctly when an option has a value. So, can you check if "item.projid" contains a value?
I have a layout, but cannot define all of its regions in advance because they are not known.
So later on an ItemView is created and I'd like to create a new region in the layout using the view's ID as the region's name so I can then say:
layout.dynamicRegionName.show(newItemView);
But there is cyclic dependency here.
I haven't rendered the view yet, so I cannot make a reference to its DOM element to be used in the layout's call to .addRegion()
I cannot render it, precisely because I want it to get attached to the DOM tree through the dynamically added region by calling its .show()
#DerickBailey In the Marionette.Layout docs in github I believe there is an error in the example that has: layout.show(new MenuView());
but technically this is close to what we'd need here i.e. to be able to do:
layout.addRegion(VAR_WITH_NEW_REGION_NAME, aViewInstance);
and have this add a new Region into the layout rendering inside it directly the view instance.
Am I missing some other obvious way to achieve this? Is that a known missing functionality? Is there a reason not to have it?
I'm aware of this previous Q: "Dynamically add/remove regions to a layout"
but don't see any clear/definite answer to it.
Marionette v1.0 (v1.0.2 is latest, right now) supports dynamic regions in Layouts.
var MyLayout = Marionette.Layout.extend({
template: "#some-template"
});
var layout = new MyLayout();
layout.render();
layout.addRegion("someRegion", "#some-element");
layout.someRegion.show(new MyView());
In one of my projects, I faced a similar issue. I needed to create a form dynamically, i.e the form would contain different field views that could not be determined prior runtime. I needed the fields to be Marionette views because they had pretty complicated behaviour.
The way I have done it in Marionette 1.4 in CoffeeScript:
class Module.AdditionalOptionsLayout extends Marionette.Layout
tagName: 'form'
initialize: (options = {}) ->
#_fieldViews = options.fieldViews || []
onRender: ->
#_showFields #_fieldViews
_showFields: (fieldViews) ->
fieldViews.forEach (fieldView) => #_addRegion().show fieldView
_addRegion: ->
regionClass = _.uniqueId('field-region__')
#$el.append $("<div class=\"#{regionClass}\"></div>")
#addRegion regionClass, '.' + regionClass
Please, let me know if it needs further explanation or I can clarify this in JS. I am also aware that it is a late answer, however, hope somebody could find it still useful. Also, note - the answer is relevant only for Marionette 1.x
I'm getting frustrated because my store keeps getting filtered whenever I use it to back a combofield. Is there any way I can disable this?
The Scenario
I have a Store with a data field on it; an array of objects loaded when the store is instantiated. I use this store to drive a bunch of combo's in different areas of my app. Unfortunately, my combos are applying filters on the store, causing other combos using the same store to only display the filtered values later on, not the whole list.
Workarounds
My goofy workaround is to call combo.getStore().clearFilter() after I'm done with the combo, but that's going to get old very quick, and probably introduce a bug somewhere, I'm sure.
If I remove queryMode:'local' from my combo's config, all is well, except that now the handy type-ahead feature no longer works; I'm just shown a list of items in a drop-down that I can't even navigate around my typing letters of matching items. That's worse than a regular html select tag!
Any ideas?
Thanks!
You can't do that since the filtering is applied not on the combo but on the store. You could try creating multiple instances of the same store and work with that. Though I don't know if it'll work.
Ext.create('combo', {
//other config
store : Ext.create('my.store')
});
It'll work if you make the combo non-editable since no filtering can be applied then. But, as you say, you need the type ahead feature, you'll need to create multiple instances of the store.
In light of the fact that combos will add filters on the backing store, hence affecting all combos that use the store within my application, I've opted to add an override to the combo class so it will clear the filter on the store when the combo box is destroyed.
Ext.define('MAP.override.Combo', {
override : 'Ext.form.field.ComboBox',
initComponent : function()
{
this.callParent(arguments);
this.on('beforedestroy',function(combo){
if(combo.leaveFilter === true) return;
console.log('clearing filter on store');
combo.getStore().clearFilter();
});
}
});
it's a bit of a hack, but I do allow for the escape hatch of indicating not to clear the filters, too.
The simplest way I have found to handle this solution is to add the following listener to the combo:
listeners: {
beforequery: function(queryPlan){
queryPlan.query = true;
}
}
by default queryPlan.query is the text currently in the combo field which is used for filtering. Setting it to false cancels the query, but setting it to true allows the query to go through without a filter value, therefore keeping all values in the drop down list for all combo fields.
I've had similar problem with ExtJS 4.2 and combo. Store kept being filtered but I couldn't use clearFilter() because after that combo was unusable. My solution, which worked, is this listener on combo:
listeners: {
blur: function(combo) {
if (combo.queryFilter) {
combo.queryFilter.setValue('');
combo.getStore().filter();
}
}
}