I need activate the last tab in tabpanel in EXTJS - extjs

I need activate the last tab in tabpanel in extjs. I have a button that adds new tabs and I need to change the last added.

You can get the length of the items array and setActiveTab using that.
var last = tabPanel.items.length -1;
tabPanel.setActiveTab(last)
Here is fiddle demonstrating a simple working example.
Sencha docs is a huge help in figuring these things out.

Related

height issue AutoCompleteTextField CN1

I have an issue with the AutoCompleteTextField component.
It is displayed on a form, which also contains a Picker (set with Display.PICKER_TYPE_TIME type);
So before clicking on the picker all works well: the AutoCompleteTextField shows (after writing some characters) a list populated with String elements.
But after using the hour picker (that seems to display over the layer), the AutoCompleteTextField list already contains the String elements, but the height of this list is very short (list.getHeight() at only 9px, when it should be 105px).
Moreover, I noticed the same issue after using the AutoCompleteTextField setText() method (even after performing a backspace operation).
For your information, I don’t use the setCompletionRenderer() method. I just use the constructor (new AutoCompleteTextField with DefaultListModel<String>) and the setHint() method.
Thanks for advance for your help
After making a change that does or may trigger a change in the layout and requires a reflow of the UI you need to explicitly invoke revalidate() or animateLayout().
See this discussion on layout reflows.
unfortunately the problem persists.
I try with this simple block of code:
Form form = new Form("test");
AutoCompleteTextField actf = new AutoCompleteTextField("Short", "Shock", "Sholder", "Shrek");
form.add(actf);
form.show();
actf.setText("Short"); //triggers the issue
form.revalidate(); //that does not solve the issue
form.getContentPane().animateLayout(0); //neither

How to Close Angular-Strap Tabs

In my app I have 3 static tabs that get rendered when the application loads. Using ng-grid, when a user double clicks on a row a new tab is generated with the results of that row. My question is..... how do I close the tab? It seems so simple but, I've goggled and tinkered with no results.
What I'd like is that after viewing the results the user would click on a small X near the tab heading to close/dismiss the tab. I've created a plunker http://plnkr.co/edit/ZkamtnBK01h0IvC9Hmjh?p=preview that resembles my tab layout. It has a button that you can click to add a new tab. Any help would be greatly appreciated. Thank you.
you can easily remove tabs by altering scope, http://plnkr.co/edit/AKlmUaRkaYWjOYnPRnWF
$scope.remove = function() {
$scope.tabs.splice($scope.tabs.activeTab,1);
}
These tabs are problably created with templates from the tabs directive, so I suggest using css positioning the element outside the bs-tabs div to get the effect you want

Filling select box from parent select box in cakephp

I want to implement the following image in my application:
Here i want to fill the second box with selected items from first box when clicking on ADD button.
How can i implement this with cakephp.
Iam new in cakephp
Image in google:
http://lh4.ggpht.com/70kyxWGqbi72F5L-DjvJ09UUkDVpXjsS5_6_ndgjRfPE7hmNfnlXRCxNzddgBcfh8YqI6w=s162
If there is any solution for this?
I bet you can do it with PHP, but I think jQuery would be a easier and better option
$("#move").click(function(){
$("#one :selected").each(function(index, item){
$("#two").append(item);
});
});​
Check the working jsfiddle
http://jsfiddle.net/4fCFb/
there is a plugin that creates this effect from a single multiselect box. Give this one a look:
http://www.quasipartikel.at/multiselect/

ExtJs GridPanel Scroll to last Element

I am trying to scroll to the last Element of a GridPanel, the last Element is already focused by
_this.testpanel.getSelectionModel().selectLastRow( );
I have tried many ways but none of them worked...
The GridPanel is saved via
_this.testpanel =new Ext.grid.GridPanel(...
In the load function I tried
_this.testpanel.getRow(_this.receiver_list.getStore().getCount()-1).scrollIntoView(_this.receiver_list.getView(),false);
This one does nothing.
_this.receiver_list.getView().getRow(_this.receiver_list.getStore().getCount()-1).scrollIntoView("receiver_list");
This one scrolls the Form, the GrindPanel is inside. But not in the GridPanel itself.
Take a look at the following function
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.Panel-method-setScrollTop
Use scrollTo() Elements method.

Add mask to tabpanel on grid sort (extjs)

I'm working on an internal extjs 4 project. I have a viewport with tabpanel. Each tab has an associated grid with MANY records. When a user sorts, the column headings are still accessible and they can initiate a new sort while the first is still processing. I'd like to add a mask to either the tabpanel or full viewport while the sort is still in progress. Is there an easy solution to this? Sorry, I cannot post any code here as it's on our intranet.
Thanks
This is quite easy. Run this code while your records are being sorted:
var loadmask = new Ext.LoadMask(Ext.getBody(), {msg:"Sorting..."});
loadmask.show();
Note that Ext.getBody() could be substituted by another element, whatever you want, you should only keep in mind that Ext.LoadMask wraps element, so getBody(), getEl(), both work ...
Again, when your process is completed, simply use loadmask.hide()

Resources