I'm using vuejs#2.3.3, selectize#0.12.4, vue2-selectize.
I have a pretty big form with a few select inputs.
All options are loaded by ajax into a one property, which is initialized with a demo data before being replaced by ajax data:
addTrackData : {
styles : [
{ id: 1, title: 'style 1' },
{ id: 2, title: 'style 3' },
{ id: 3, title: 'style 2' },
],
authors: [
{inn: '111', name: 'demo 1'},
{inn: '222', name: 'demo 2'},
{inn: '333', name: 'demo 3'}
]
....
},
And I've got 2 problems:
1) If I use settings in this way, options doesn't loads at all:
<selectize v-model="form.data.authors[i]['id']" :settings="selectize.authors"></selectize>
selectize: {
authors: {
valueField: 'inn',
labelField: 'name',
searchField: ['name', 'inn'],
options: this.addTrackData.authors // that doesn't works, but hard coded array works
}
}
Because of error Error in data(): "TypeError: Cannot read property 'authors' of undefined".
Both this.addTrackData.authors and addTrackData.authors makes this error.
But this way works:
<selectize v-model="form.data.authors[i]['id']"
:settings=" {
valueField: 'inn',
labelField: 'name',
searchField: ['name', 'inn'],
options: addTrackData.authors, // It works, but looks too ugly!
}" >
</selectize>
2) Options are not reactive - when ajax data comes, all selects elements still shows a demo data. And I have no idea how to update them all...
UPDATE
Second problem could be fixed with If Conditional and empty initial array:
<selectize v-if="addTrackData.authors.length" v-model="form.data.authors[i]['id']"
:settings=" {
valueField: 'inn',
labelField: 'name',
searchField: ['name', 'inn'],
options: addTrackData.authors, // It works, but looks too ugly!
}" >
</selectize>
addTrackData : {
styles : [],
authors: []
....
}
But the first problem still makes me cry
I just read the source code of vue2-selectize and noticed that it's watch code for options key is incorrect.
his code is this way:
watch: {
value() {
this.setValue()
},
options (value, old) {
if (this.$el.selectize && !equal(value, old)) {
this.$el.selectize.clearOptions()
this.$el.selectize.addOption(this.current)
this.$el.selectize.refreshOptions(false)
this.setValue()
}
}
},
while it should be this way to work:
watch: {
value() {
this.setValue()
},
options (value, old) {
if (this.$el.selectize && !equal(value, old)) {
this.$el.selectize.clear();
this.$el.selectize.clearOptions();
var vm = this;
this.$el.selectize.load(function(callback) {
callback(vm.current);
});
this.$el.selectize.refreshOptions(false);
this.setValue();
}
}
},
I just prepared a hacky way to make it working but I dont encourage you using it in production.
Here is the fiddle's link: https://jsfiddle.net/ahmadm/h8p97hm7/
I'll try to send a pull request to his creator as soon as possible but until that time, your solution is already the only possible solution.
I am trying to implement the "RowSelectors" feature on the iggrid, but it will not change to a the next row.
On further inspection, i have got the selected row method and each row shows the same id. I am returning my data via ajax, if i use static json in a variable and use that as a datasource, it works as expected so not sure what the issue is..
$("#selector").igGrid("selectedRow");
I can only acheive a row change when holding control and clicking..
Object {element: n.fn.init(1), index: 0, id: 3407751001}
then next row is
Object {element: n.fn.init(1), index: 1, id: 3407751001}
Settings..
features: [
{
name: "Sorting",
columnSettings: [
{
columnIndex: 4,
allowSorting: true,
firstSortDirection: "ascending",
currentSortDirection: "descending"
}
]
},
{
name: 'RowSelectors',
enableCheckBoxes: true,
checkBoxStateChanging: function (ui, args) {
return false;
},
multipleSelection: true,
rowSelectorClicked: function (evt, ui) {
// Handle event
},
},
{
name: 'Selection'
}
]
The issue is already resolved, but I'm adding the answer so it doesn't stay unanswered.
The primaryKey column the igGrid uses needs to be a column with unique identifiers for each record.
I have a form that is suposed to help to user to choose a specific thing at the end, but as the user fills the first options, the others below change. Something like this:
Type:
{
t1:{
Number of X:{
1:{...}
2:{...}
}
Number of Y:{...}
}
t2:{
Number of X:{
100:{...}
200:{...}
}
Number of Y:{...}
}
}
The user has the field Type with the options t1 and t2, when they choose t1, the field "Number of X" will be filled with 1 and 2, if they choose t2, the field "Number of X" will be filled with 100 and 200, and so on. Some of the choices depend on more than one field, its not straight down dependency (something like, if the user chooses "Number of X" = 100 then Foo is "A", else, Foo can be "A", "B" or "C", but Foo is not bellow "Number of X").
I tried a really naive implementation where I would set up event listeners on every field and see their changes, but eventually the code started growing out of control and I have a bunch of $("#foo").change(function(){...}); and its not imediatly obvious that the field listening to this is bar and not fbar.
I also tried JSON (as the example above), but there's a lot of repetition, the deeper the tree grows and the number of possibilites increase, I have to write the same fields again and again. Sometimes choosing t1 will change an option directly even though its not directly bellow it, and even though it usually depends on another field entirely, and that's more repetition in JSON.
How do I approach this problem? Is there a readable solution? Too much code is not the problem, as long as one can look at the code and understand the dependencies and their effects.
A code example (kinda like my code right now):
HTML:
<select id="type">
<option value=1>a</option>
<option value=2>b</option>
</select>
<select id="numOfX">
</select>
<select id="numOfY">
</select>
js:
$("#type").change(function()
{
if($("#type").val() == 1)
{
$("#numOfX").append(new Option(1, "1", false, false));
$("#numOfX").append(new Option(2, "2", false, false));
}
else if($("#type").val() == 2)
{
$("#numOfX").append(new Option(1, "100", false, false));
$("#numOfX").append(new Option(2, "200", false, false));
}
});
$("#numOfX").change(function()
{
...
});
Update - Add example
Have you try backbone.js library? It will make the Javascript code more manageable by adding models & structures. There is a learning curve though but it is really great. Once you learn Backbone, you can make use of the Backbone Forms plugin which will help in the dropdown management. Below is the demo link & sample code:
Example 1
$(function() {
var cities = {
'UK': ['London', 'Manchester', 'Brighton', 'Bristol'],
'USA': ['London', 'Los Angeles', 'Austin', 'New York']
};
var subAreas = {
'London' : ['L1', 'L2', 'L3', 'L4'],
'Manchester' : ['M1', 'M2', 'M3', 'M4'],
'Brighton' : ['B1', 'B2', 'B3', 'B4'],
'Bristol' : ['BR1', 'BR2', 'BR3', 'BR4'],
'Los Angeles' : ['LA1', 'LA2', 'LA3', 'LA4'],
'Austin' : ['A1', 'A2', 'A3', 'A4'],
'New York' : ['NY1', 'NY2', 'NY3', 'NY4']
};
//The form
var form = new Backbone.Form({
schema: {
country: { type: 'Select', options: ['UK', 'USA'] },
city: { type: 'Select', options: cities.UK },
subArea: { type: 'Select', options: subAreas[cities.UK[0] ] }
}
}).render();
form.on('country:change', function(form, countryEditor) {
var country = countryEditor.getValue(),
newOptions = cities[country];
form.fields.city.editor.setOptions(newOptions);
var city = newOptions[0],
areaOptions = subAreas[city];
form.fields.subArea.editor.setOptions(areaOptions);
});
form.on('city:change', function(form, cityEditor) {
var city = cityEditor.getValue(),
newOptions = subAreas[city];
form.fields.subArea.editor.setOptions(newOptions);
});
//Add it to the page
$('body').append(form.el);
});
Example 2
$(function() {
var cities = {
'UK': ['London', 'Manchester', 'Brighton', 'Bristol'],
'USA': ['London', 'Los Angeles', 'Austin', 'New York']
};
var subAreas = {
'UK.London' : ['L1', 'L2'],
'USA.London' : ['L3', 'L4'],
'UK.Manchester' : ['M1', 'M2', 'M3', 'M4'],
'UK.Brighton' : ['B1', 'B2', 'B3', 'B4'],
'UK.Bristol' : ['BR1', 'BR2', 'BR3', 'BR4'],
'USA.Los Angeles' : ['LA1', 'LA2', 'LA3', 'LA4'],
'USA.Austin' : ['A1', 'A2', 'A3', 'A4'],
'USA.New York' : ['NY1', 'NY2', 'NY3', 'NY4']
};
var hashFunc = function(country, city){
return country + "." + city;
};
//The form
var form = new Backbone.Form({
schema: {
country: { type: 'Select', options: ['UK', 'USA'] },
city: { type: 'Select', options: cities.UK },
subArea: { type: 'Select', options: subAreas[ 'UK.London' ] }
}
}).render();
form.on('country:change', function(form, countryEditor) {
var country = countryEditor.getValue(),
newOptions = cities[country];
form.fields.city.editor.setOptions(newOptions);
var city = newOptions[0],
areaOptions = subAreas[hashFunc(country, city) ];
form.fields.subArea.editor.setOptions(areaOptions);
});
form.on('city:change', function(form, cityEditor) {
var city = cityEditor.getValue(),
newOptions = subAreas[hashFunc(form.getValue().country, city)];
form.fields.subArea.editor.setOptions(newOptions);
});
//Add it to the page
$('body').append(form.el);
});
As you also develop for mobile (probably Phonegap), you can also try ZeptoJS as an alternative for jQuery. It will improve the speed alot.
The task outlined is complex because of dependencies, so you must think of the ways to define your dependencies. Here is one way I would do it:
Define models which handle data.
Define dependencies.
Manage dependencies.
Below you can see a conceptual model how I see this all implemented (at the end of my answer I describe things which are not provided in this pseudo code):
//data/model structure for Type.
var type = {
//list all values.
values: [
{ id: 1, text: 't1', visible: true },
{ Id: 2, text: 't2', visible: true }
],
//evaluates visibility of item using dependencies.
//depends on nothing, so takes no arguments except item.
evaluate: function(item) {
return; //depends on nothing.
},
// this event fires when selected item changes.
onChange: event
};
//data/model structure for number of X.
var numberOfX = {
//list all values.
values: [
{ id: 1, text: '1', visible: true },
{ id: 2, text: '2', visible: true },
{ id: 3, text: '100', visible: true },
{ id: 4, text: '200', visible: true }
],
//evaluates visibility of item using dependencies.
//since numberOfX depends on Type, it takes type as second argument.
//it would take more arguments if it depended on other things too.
evaluate: function(item, type) {
// next line will fire onChange event.
item.visible =
( [1,2].indexOf(item.id) >=0 && type.id == 1 ) ||
( [3,4].indexOf(item.id) >=0 && type.id == 2 );
},
// this event fires when selected item changes.
onChange: event
};
//data/model structure for number of Y.
var numberOfY = { /* omitted. This is similar to the previous ones */ }
//numberOfX depends on Type.
//if it depended on more objects, then we would pass them as additional arguments.
register_dependency(numberOfX, type);
//numberOfY depends on Type.
register_dependency(numberOfY, type);
//... etc: define other dependencies.
Event mechanism is not there in JavaScript, but implementing one is not hard. You can use some framework for that as well.
register_dependency function builds a graph of dependencies simply by registering for events, as described below (managing dependencies):
When onChange event fires on any model, evaluate is called for each item in the dependency tree. For example, when type.onChange fires, we have numberOfX and numberOfY objects. Their values array is enumerated in loop and evaluate is called for each item (passing item and type as arguments).
Conclusion: although this code seems complex, still it's more self-descriptive and allows to have graph of dependencies between multiple objects on the page. Also, all the complexity lays on the toolkit/framework level, which could be easily re-used when implemented only once.
EDIT: Forgot to outline that you would need to have some mechanism to bind to this kind of model and show it on the page, which is also trivial. For example, have a look at knockout.js.
I am newbie to EXT and I am having problem with reloading EXT 4 tree. I have been trying with:
Ext.tree.getLoader().load(tree.root);
Ext.tree.load(tree.root);
Ext.tree.getRootNode().reload();
Ext.tree.TreePanel.root.reload();
Ext.data.TreeStore.reload();
And nothing helped, I hope someone could clarify this to me, here is the code:
Edit: I have added complete code, as you can see everything is inside extOnReady method, I have removed var before var tree and still I got the same result
Ext.QuickTips.init();
var store = Ext.create('Ext.data.TreeStore',{
proxy: {
type: 'ajax',
url: 'url1'
},
root: {
text: 'TOPP',
id: '1',
expanded: true
},
folderSort: true,
sorters: [{
property: 'text',
direction: 'ASC'
}]
});
tree = Ext.create('Ext.tree.Panel',{
id:'company_tree',
store: store,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop'
}
},
renderTo: 'tree-div',
height: 300,
width: 766,
title: gettext('Companies'),
useArrows: true,
dockedItems: [{
xtype: 'toolbar',
items: [ {
text: gettext('Collapse All'),
handler: function(){
tree.collapseAll();
}
}]
}]
});
var loadingMask = new Ext.LoadMask(Ext.get('tree-div'),{
msg: gettext("Loading...")
});
tree.on('itemmove', function(tree, oldParent, newParent, index, options){
if(confirm(gettext('Are you sure you want to move this company?'))){
loadingMask.show();
Ext.Ajax.request({
scope: this,
url: 'url2/',
success:function(){
loadingMask.hide();
},
params: {
'ajaxAction[moveNode]': '',
index: index,
nodeid: tree.data.id,
parentNodeID: newParent.data.id,
oldParentNodeID: oldParent.data.id
}
});
}else{
Ext.getCmp('company_tree').getStore.load();
}
});
Also I have tried to reload through console[Ext.getCmp('company_tree').getStore.load();] and it worked. When I try it through code it returns an error regarding fly function
n is null
[Break On This Error]
Ext.fly(n.firstChild ? n.firstChild : n).highlight(me.dropHighlightColor);
Are you really trying to call these methods directly on Ext.tree namespace or Ext.tree.TreePanel class? If so you really need to educate yourself on the difference between objects and classes.
And don't just attempt to guess what a method might be named. Had you looked it up from the manual you would have found out that there is no such method as reload on Tree, TreeStore or TreeView.
What you need to call to reload the tree is the load method of TreeStore:
tree.getStore().load();
This is the code im using and im firing button click event once the window show event is called. this works fine. but how to do the same without using Ext.getCmp
this is the line
Ext.getCmp('recent_refresh').fireEvent('click');
this is the code
Ext.create('widget.window', {
title: 'Activity',
closable: true,
closeAction: 'hide',
width: 250,
height: 300,
bodyBorder: true,
tbar: {
xtype: 'toolbar',
ui: 'plain',
items: [{
iconCls:'refresh',
id: 'recent_refresh',
listeners: {
click: function(){
Ext.Ajax.request({
url: 'control.php',
params: {
'case': '18'
},
success: function(response){
var json = Ext.decode(response.responseText);
}
});
}
}
},
'->',
{
xtype: 'displayfield',
name: 'act_date',
id: 'act_date',
value: new Date(),
formatValue: Ext.util.Format.dateRenderer('Y-m-d')
}]
},
layout:'accordion',
border: false,
items: [ grid1, grid2, grid3 ],
listeners: {
show: function() { Ext.getCmp('recent_refresh').fireEvent('click'); }
}
}).show();
Regards
There are many ways to do this. One way is to make an assignment with the Ext.create call since Ext.create returns such a reference. The app namespace in the example below is a filler since any namespaces you are using are unknown from your text. Once you have the variable reference to the widget, you can get use it to get a reference to the top toolbar and then get a reference to the item you want inside of the toolbar.
Ext.ns('app');
app.activityWin = Ext.create('widget.window', {...}
app.activityWin.getTopToolbar().get('recent_refresh').fireEvent('click');
Use the ref property.. I don't know if it has been carried forward to Ext JS 4, but here's how we do it in Ext Js 3.3
var win = new Ext.Window({
..config..
buttons : [{
text : 'save'
ref : 'saveButton'
}],
listeners : {
show : function(win){
win.saveButton.fireEvent('click'); //saveButton here is the same as used in ref above.
}
}
});
ref can now been used directly and no need to use Ext.getCmp
check the correct usage of ref in your case and implement it..
Cheers.