I'm trying to insert a list in a navigation view after click on a button, but didnt show anything, i put a button to test and the button appeared but the list didn't.
here is the code: http://snipt.org/Bzfe0
Thanks
this line: view.add
should be view.push
push is the proper way to push new view into a navigation controller, not add
Update: I have just looked at your fiddle, let's add these 2 lines to your Main.js
xtype: 'container',
layout: 'vbox'
Explanation:
You must specify the xtype of the item which will be added, in this case, container is the best choice. If not, the framework won't understand it as a sencha component and treat as normal Javascript objects, which lack a lot of initializers.
The layout of your new item must be vbox because you might want to display both list and button in a vertical order.
Related
I want to display a component as emptyText for a grid, the ExtJS documentation states that only HTML can be shown.
For example a button that pop-ups a create window, as shown below:
Is there a workaround to use a component in a grid, or perhaps even a config that I'm missing?
Of course you can do that, just that you will have to debug a lot in order to see how to do that. That's why I have an alternative: add a hidden docked toolbar with your "Create new employee" button. Then add an listener for the load store event, and when no records are available, simply show the toolbar, otherwise hide the toolbar.
I have a table with a button to add a new element and another in the row to edit the element. Those actions shares the same form with the only difference that in edit mode the form is filled. When the user clicks on the button a new window is shown with the form.
The first time that i click the button, for example, to add a new element, works fine. The form is shown. But... if i close the window and i try to edit a user, appears an extrange window without content and an error "TypeError: b is null" Is it a problem with the definition of the form? Maybe the form istance is deleted with the window?
I've a form defined in a var:
var formPanel = Ext.create('Ext.form.Panel',{
extend: 'Ext.form.Panel',
id: 'policyForm',
...
I have a button in the tbar of the grid to show the window in order to add an user and another button in the row to edit him. This is the handler of the button:
handler : function(){
Ext.create('Ext.window.Window',{
layout: 'fit',
title: 'New Policy',
items: [formPanel],
width: 650,
height: 500,
id: 'myPolicyWindow'
}).show();
}
It is very likely that those ids that you have set in your Panel and Window code are causing you to not be able to reuse the same form in different windows. You should try to avoid using the id property on Ext components, it can cause issues like this one since IDs should be unique. Use the itemId property in conjunction with Ext.ComponentQuery to allow for getting references to components without using Ext.getCmp(compId).
I agree that you shouldn't use ids. However, the actual issue is probably what you suspect: the instance of the form is getting destroyed. This is because the default closeAction of Ext.window.Window is "destroy", which will wipe out any child components as well. Either change closeAction to "hide", or create a new instance of the form panel along with the new instance of the window.
i stuck with a problem which is really important i guess.
In a simple Sencha Touch App I have many views. My Mainview is a TabPanel with docking icons in the bottom. Sometimes in my App I switch to another views which are outside of the Tabpanel. I don't want the DOM to overload with views, i don't need anymore so i'm searching for a solution to destroy a view, when its inactive.
I've tried this, while switching into another view in my controller:
this.getMainview().destroy();
It seems that the Mainview gets deleted but I get an error:
Uncaught TypeError: Cannot read property 'dom' of null
So i guess something's wrong with the .destroy() - Method or is there a better way to handle this problem?
Before moving to new view you can call bellow code to remove current view
Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);
or you can also provide item object instead ActiveItem
I've got stucked with this problem many times before. It seems that currently, there's no efficient and actually bug-free solution in Sencha Touch 2. When the view is added again at second time, that unpleasant error will show again.
A possible solution:
This code snippet:
your_container(your_container.getActiveItem(), false);
will not actually destroy your sub-component from memory but from the DOM. Later when you add it, there will be no error (as I've tested).
Hope it helps.
I'll expose my situation and how I solved it.
I have a TabPanel with icons. One of those tabs shows a List of items. When you click on an item you're taken to a new Panel that shows its description. If you click a Back button, that Panel is destroyed and you return to the List. This way you destroy the "description" Panel which is unused now.
So what I did was creating a function to instantiate the Description Panels depending on the index of the Item clicked:
function project(i) {
var v;
switch(i) {
case 0:
v = Ext.create( 'Ext.Panel', {
title: 'title',
layout: { type: 'fit' },
id: 'project0',
iconCls: '',
style: '',
html: 'my html'
});
break;
}
return v;
}
Now, in the 'itemtap' event of the List I have this:
var lastItem = container.add(project(i));
itemsList.hide(); //hide the List and display only the new Panel in the container
Now, I have a button in the header to return to the previous View (i.e. the List), and this is the event 'tap' of that button:
container.remove(lastItem, true); //hide and destroy it
itemList.show(); //show the List again
So if I go back and forth between the List and the Description items (Panels) now there is no problem as I get a new instance everytime I clicked on them and likewise it gets destroyed when I return.
That solved my problem.
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()
I don't know if this is a browser general issue or if it is related to my code but here is my issue :
Lets say my page contains a link and a menu. I click the link and a popup opens [it contains a textfield or datefield]. When the popup is loaded, the textfield receives focus and the caret appears in the textfield : I can write. Now If i push my cursor on the side and it hovers on the menu, the focus changes and I can't continue writing in the textfield.
Is there a way to fix that ? I've googled it a bit but to no success.
Since you are using an Ext.Window, the browser doesn't know that things behind the window aren't invalid to hover or otherwise interact with. Indeed, someone actually might want their users to be able to interact with the main page behind the window. However, if you don't want this behavior, and the window is supposed to be the only thing the user interacts with, you are looking for modal: true. This will put a mask over the rest of the page, and no hovers or clicks will be applied to anything on the main page.
Example:
new Ext.Window({
modal: true
width: 400,
height: 600,
layout: 'fit',
items: ...
});
I do face the same issue with the following setup
1. using Ext.widget(widg) to create and open (show) a popup window
2. the widg is defined with modal: true configuration
3. one of widg's items is a form with several fields (fields are dynamically created and each time the form might contain different number of fields)
the issue: when I move the mouse out of the form's area (the mouse even stays inside the popup are), the filed that was on focus looses the focus. Happens 100% of the times.
Thanks, Charlie