I am new to ExtJS and working on application where I have a form(lets call it outerForm). I have buttons to add/remove forms dynamically to/from the outerForm.
Now i am using outerForm.getValues() to retrieve all the field values(of all the dynamic forms; lets call these forms innerForm[ ] ).
The problem am facing is : even after removing/destroying the form(say
innerForm[k]), I get its values in the object returned by outerForm.getValues(),although outerForm.items does not have
innerForm[k].
I Know i can loop over outerForm.items for retrieving values rather than using outerForm.getValues(), I just want to know the reason of this inconsistency.
Try below code to remove the element from inner form.
Ext.getCmp('outerFormId').innerItems[olditem.initialConfig.tabIndex].removeAll();
Here i consider outeFormId is a kind of tab panel and it contains different tabs so on tab changes,it removes the current inneritem elements,before moving to new one.
Related
When using the tree structure for nested data, I want to be able to identify which row a button is clicked from. Using row.getPosition only works for non-nested rows and returns -1 for a nested row. The data I am using also does not have an identifier field I can easily use so the row.getIndex function can't be used. Is there a simple way to do this?
if I understand your question (without a jsfiddle example), I think you can use the cellClicked callback to get access to the cell, and then the row for where the event occured.
so I have this basic bootstrap form and I have a button called add another location which will dynamically create another 4 inputs to add more location. This is achieved via jquery and jquery UI. So I made 3 copies of this form and put them in a list because eventually, they are going to come from a server and loop the form depends on however many sets of information available. The problem I am having is that, only my first add another location button works and it's creating additional inputs on the second and third one as well. I can give different id/class to the buttons where the new form goes but that wouldn't do me any good since more or fewer forms can be displayed via the server. My question is how can each button act independently without giving different id/class to it. so if I click add another location button on the second set of form, it only creates additional inputs on the second set not first or 3rd, same for 1st set and 3rd set.
this is the jquery code that clones and appends the new inputs
$("#pm-do-clone1").click(function () {
$(".pm-clone-this3 .pm-clone4").clone().appendTo(".pm-clone-here1");
});
here's my jsfiddle : https://jsfiddle.net/jaisilchacko/yqvd4Lvv/4/
ps: the fiddle the first add location is not creating new inputs, but it works on my local.Probably an external resource issue
alright, as I understand You gotta grab the clicked button by referancing it with;
$("#pm-do-clone1").click(function () {
$(this).//rest of the code
and at the rest of the code as we captured the clicked one, we now have to find its parent where we gonna add the new inputs. For example,
var y = document.createElement('input');
var x =$(this).parents('.form');
$(x).append(y);
Edit: Btw, you are clicking an ID, ID is not the best model to catch one from multiple elemets because it sometimes make mistakes, use class instead.
Edit2: Check this snippet too. I belive this will help you. View DEMO
Edit3: Why do you wrapping each inputs into divs? It seems not necessary no create too much elements as you could achive the same result with only inputs.
I'm attempting to input some values into the grid's new row template from outside the grid since selecting this particular input would be more than impractical to get done from inside de webdatagrid.
How can I reach the to be added row via javascript from outside the control? According to the documentation ig_controls.wdgTransaccion.get_behaviors().get_editingCore().get_behaviors().get_rowAdding().get_row(); should do the trick, but it fails to return any row at all
Thank you
Are you sure you calling this from the right place? Can't really tell without more context, however I think i can help you get the functionality you need. Have a look at this sample:
ASP.NET Data Grid: Add New Row - Client Events
The best place I can think of doing this is probably at the time of actual editing happening, so have a look at the EnteringEditMode event and you can do the following inside:
function WebDataGridView_EnteringEditMode(webDataGrid, evntArgs) {
webDataGrid.get_behaviors().get_editingCore().get_behaviors().get_rowAdding().get_row().get_cell("1").set_value("test");
}
Or if you want to do it on your own flow you can grab the grid client object and use the same code as the event above:
var webDataGrid = $find('<%=WebDataGrid1.ClientID%>');
webDataGrid.get_behaviors().get_editingCore().get_behaviors().get_rowAdding().get_row().get_cell("1").set_value("test");
Both of those methods work and allow you to fill in a cell value.
I have a directive that generates a drag/drop reorderable list with add and remove functionality. If you click in the container, an input is added dynamically, you type in it and when you type a comma, the value you typed is pushed into the list used with ng-repeat to build the list. (Should be kinda familiar to users of this site :) )
This works awesome when the initial object backing it is not null. But when the object begins null and you try to add the first item (by detecting the null and scope.$apply the initialization)the markup is not generated.
Here is a plunk to show what I mean.
http://plnkr.co/edit/Momlgpfy82kHRPwXGR8V?p=preview
In my app, the data is coming from an external source, so I can't ensure non-null lists. How can I get angular to properly respond to the array initialization (and later push)?
Set list to empty array...whenevr a new item is pushed into array angular listeners will update directive
http://plnkr.co/edit/h3GOpTX6Chh1wjcM9QrV?p=preview
I've got a table with the type ahead feature from jQuery UI. It is working with my form when there is only 1 table row (initial view). There's a button to allow the user to create additional table rows as required which also increments the IDs for the text inputs and select menus.
There's another script that inserts a matching value into the select menu based on the typeahead selection. Both of these work fine for the first row, but stop working for any additional Rows that are created.
I've setup a sample JSFiddle:
http://jsfiddle.net/fmdataweb/hxzME/1/
I think I understand why they only work for the first row - they are tied to these IDs: #lastYearSelect1 and #nextYearSelect1 - but I'm not sure how to change them so they then work with #lastYearSelect2, #nextYearSelect2, #lastYearSelect3, #nextYearSelect3 and so on.
There's a few problems with the script.
Firstly you're right, you need to setup all the scaffolding again after you clone the row, the clone method will not copy the functionality, just the html elements.
To find the right element you can use the JQuery ^= selector, which matches the start of an attribute name, on the on the clone object to find the right child input to turn into an autocomplete field. You can do the same trick in the function to change the dropdown to the correct function.
Finally a lot of your code and variables were in the wrong scope to be accessible properly. I've moved a lot of the vars around so they're accessible, mainly into the global scope. When you're a bit more experienced you won't want to do this, but for now this is fine.
I also created a new function setDropDown, but this code is almost identical to what was there before.
Here is a working version of your code:
http://jsfiddle.net/hxzME/3/
Add classes to elements and use class selectors when binding an event handlers.