I have used composite views to build tree structure using code given in following example.
http://jsfiddle.net/derickbailey/AdWjU/. Additionally my model contains index (1,1.1,1.2,1.3 etc) which I have set using some logic. Now I want to remove rows (parent and header). So when I remove any row I want to update the indexes of the remaining rows.
for ex:
1. Root
1.1 a
1.2 b
1.3 c
So if I remove 1.2 from above children, then indexes for remaining rows should be
1. Root
1.1 a
1.2 c
I tried re-rendering view by binding event like :
if (this.collection) {
this.listenTo(this.collection, "remove", this.render);
}
But it is not working as it is not maintaing the values I have entered(in textboxes of sibling rows).
Make sure you are taking input from your textboxes and updating your models accordingly. Then re-rendering won't be a problem.
If the index is a property of your models, isn't the problem that you aren't updating the models when another is removed?
The following might be a useful starting point.
this.listenTo(this.collection, 'remove', this.collection.updateIndexes.bind(this.collection));
Related
I want to how can we undo the specific being added in the grid before actually saving it .
Please have a look at this
I 've added two rows but since for eg: for some validations failures the second row is not valid so I want to undo the second row but keeping the first dirty for the saving of that data to the db.
What i was trying is I was pushing all the dirty rows to an array and then updating in the database. But I don't know how to undo or delete the invalid row being added. Without reloading the grid
Example for reference
Live example
You shouldn't have to push the rows into an array for synchronization. What you really want to use is the methods available on the underlying store and/or model.
To reject the second model and update all other ones in the database, two lines suffice. The exact code may differ depending on the Ext version; in ExtJS 6.2.1, it would be:
grid.getStore().getAt(1).reject() (or .drop())
grid.getStore().sync()
while the generalized approach would be to reject all invalid models:
var store = grid.getStore(),
invalidRecords = store.query(function(record) {
return !record.getValidation().isValid();
});
invalidRecords.each(function(record) {
record.reject();
})
store.sync();
A grid is configured with a store that use a model that I can call modelA
I need to change on the fly the model of the store related to the grid.
I followed following approach without results:
grid.getStore().setModel(modelB);
grid.reconfigure(
grid.getStore(),
columns
);
grid.getStore().load();
It continues to use the model defined at the beginning. In fact if I debug the record that is passed to the renderer function as follows:
function(value, metadata, record)...
record continues to reference modelA instead of modelB.
How can I change dynamically the model of the store?
I think that although you set new model you haven't re-read the records, at least you do not show any store.load() call. Models are used by store/proxy/reader to create instances when the store is loaded.
Now, I wouldn't use this approach anyway. Store is not a very expensive in terms of performance or memory so if I'd need to reconfigure the grid I'd use another store with that another model.
To achieve this task, you can change fields of model dynamically instead of changing the model itself. Sample fiddle
store.model.setFields(fieldsArray);
store.load(); // or store.load(newData);
grid.reconfigure(store,columnInfo);
Hope this helps.
I am looking at a different way of doing my application.
Actually It's kind of static. My Projects have Categories. Each Category has Subcategories. Categories are containers and Subcategories are element which have values that can be edited.
After analysis of the data , we saw that it was not enough general for it. We are now looking at a Tree Structure. Doing so, we would have Projects filled with Folders/Categories) and those Folders would be filled with other Category/Folders or with SubCategories/Items/Files. That way we can go has deep has we want in complexity.
That is doable, I know it. What I need to know is how hard it will be to implement it in the app.views...
Is it possible to have a single Ext.DataView.dataview display different Ext.DataView.component.DataItem side by side.
Exemple : Having a row in my List that shows a slider and update itself according to it, but that on the 2nd row it is an arrow that on click would open the next level of my Tree.
Visual:
DataView_List
Small Car---------------------------Label------------------------SLIDER
Fuel----------------------------------Label------------------------------ >
SUV----------------------------------Label------------------------TxtField
Small Car and SUV are leaves with different template and Fuel is a category/folder that need to open on click.
So I already have 3 differents templates that would need to show in the same dataview list.
How should I proceed to achieve such results? Is Dataview List the way to good or should I implement my own kind of list inside a container?
If you want to present different kinds of data inside one list or dataview - you can achieve by following strategy:
You still need to use one store to keep it all
In the model class include something like 'record_type' field indicating what kind of data you have
Combine all data you need into one model
Create a template that based on the 'record_type' would render different content
Here is how your template would look like:
<tpl switch="record_type">
<tpl case="car">
<div>CAR + SLIDER</div>
<tpl case="fuel">
<div>FUEL + LABEL</div>
<tpl default">
</tpl>
This is screenshot from my list which contains multiple record types and uses this approach:
I have a treestore in which all nodes have the initial config checked:false , so that a checkbox will appear, allowing the user to check items in the treepanel. I then get the checked items from the treestore and move them to another treestore, in another tree panel. My question is how do I, when moving the node, make sure it is not checked in the treepanel it is moved to?
Here's what I have done:
I have gotten a reference to the node I am moving(adding to one store, removing from the other), and I have set it's config checked:false. When I view the node in firebug after it is within the new treestore, sure enough, checked:false, which is what I wanted, however, within the panel, visually, it is still checked. So How do I make it uncheck??
There are a couple of reasons why this could be happening.
The dataIndex of the new column does not match the dataIndex of the old column(in the case of using a treegrid)
Your model assigned to both stores is not the same Ext.data.Model in both cases.
I have noticed some weirdness with treenodes and attributes not working if you don't specifically add that config option to your Ext.data.Model. So try assigning the same model to both trees with "checked" as one of the fields with dataType: "boolean"
I had the same problem last week.
I made this kind of operations last week to solve it:
currentNode.data.checked = false;
currentNode.raw.checked = false ;
currentNode.triggerUIUpdate();
It seems it didn't work without the triggerUIUpdate. I am working with extjs4.2.1
Is there a way to suppress model validation in Backbone.js when a new model is first created?
In my app, I have a collection with an arbitrary number of models, which are represented as list items. The user can click a button on each item, which inserts a new empty item beneath the current item. The empty item is failing validation, obviously, because I don't want an empty item being saved later.
There's no way for me to know what sensible defaults might be when I'm creating the new item, so prepopulating the new model with valid data doesn't seem like an option.
Any suggestions?
Update: While working on a tangentially related problem, I realized that I was using Backbone.js version 0.9.0. When this version was released, other people had the same problem I was having, and they complained in this issue on GitHub.
Jeremy modified validation in 0.9.1 to fix this. Adding a (temporarily) empty model to a collection is a valid real-world usecase. You could handle the new, empty model in the view, but if you're managing a list of items like I am, that forces you to have a collection of item views (including the empty one) in addition to your collection of must-be-valid models. That's a really clunky workaround for an otherwise straightforward scenario. Glad this got fixed.
You're not supposed to add invalid models :)
Digging a bit in Backbone source code (0.9.1 at least) showed that the mechanism can be circumvented by passing options to your add method:
var Mod=Backbone.Model.extend({
validate: function(attrs,opts) {
if (opts.init) return;
return "invalid";
}
});
var Col=Backbone.Collection.extend({
model:Mod
});
var c=new Col();
c.add({},{init:true});
console.log(c.length);
A Fiddle: http://jsfiddle.net/jZeYB/
Warning : it may break things down the line.
Do you need to add the model to the collection right away? I presume that validation fails because you add it to the collection immediately.
Instead, when the button is pressed you could just create the view and blank model. When the model validates you add it to the collection. You would need a submit button/mechanism on the new row to add it to the collection (which invokes validation automatically).