Hide and Show onButtonClick()

Hide and Show onButtonClick()

Hello,

Could anyone provide a small example on how to show a panel and hide a panel when we click on a button? my button is found on a toolbar..Im a bit lost. Also, am I (REALLY??) allowed to use only a function, and not a controller? (I saw in the documentation..but the button is a button only in the panel itself, how do I do this from a button found on a toolbar?)

I don't have a sample but you can do what you ask using a controller and you will learn so much more building it yourself, like this:

First, all you need to do in your View is give each control you need to interact with an "id" - in this case your panel and your button. The controls in your view fire events that the Controller can capture and act upon

Now create a Controller if you don't already have one and then add a "References" for each control. E.g. if your button id is "myButton" then for the Reference name (step 1 of 1) enter "myButton" and for the selector (step 2 of 2) enter the button id with a "#' in front so "#myButton", make sure you spell these correctly. Do the same for the panel.

Okay, now in the Controller let's capture a "tap" event on the button - in the Controller add an "Actions - Controller Action". Choose "Ext.Button" for the target type and "tap" for the event name. Now you have a new function that will be called when you tap the button. Let's check that it works:

Select the new tap function in the Controller and switch to the Code view and enter "alert('Hello world');". Now save you project and run it - when you tap the button you should see a popup with the test "Hello world"

Ok, now we simply need to show and hide the panel when you click the button instead of displaying a popup message. To do that we need to be able to reference the panel so we can show and hide it - remember how we added a reference for the panel id earlier? Now we get to use that. Sencha helps us here in that it will automatically create a "getter" for us to access the panel. The name will be the word "get" followed by the id of your panel with the first letter captialized. So, let's say your panel id is "myPanel", you will use the function getMyPanel() to find the panel. Now we need a context to do it so use the word "this" which means the Controller:

Code:

this.getMyPanel().hide(); // this will hide the panel

So simply replace your alert message (or add to it) with the above line and now when you tap the button your panel should hide. You can show the panel using...

Code:

this.getMyPanel().show(); // this will show the panel

I think you'll be able to figure it out from there and sorry if I made any mistakes.

ohhh! thank you so much so much so much! I'll try this. So I do this for everything that I want to show and hide? the controller then can hide, apart from this panel, other views that I have on my viewport but which I dont need at some time, right? Also, I have a small query..I was thinking, if I have a login form with two buttons, Login and Cancel..then the Login one when I click on it,goes to some "login.php" that checks whether the user can log in etc etc, and then how do I redirect this to another view in my extjs app? I use the success function? Thanks

Yes, the controller can do everything. The key is that by using References the Controller has access to every control item in your View. You can write local handlers in the Views too but your code will be more difficult to manage so it is good practice to use the Controller. When you get the MVC concept working you can move on to more "best practices" on how to manage events that will help you on larger projects.

Yes, you are thinking correctly on the login form. This form would have a username and password field with a login button. When the user presses the login button (which triggers a function in the Controller just like we did in the previous example), the Controller calls the login web-service. The callback from that webservice will have a "records" value (and a success). The records value is where your data will be. So for example, lets say the server returns a 0 value if the login is successful, you would check that like this in the login webservice callback and then jump to your main screen (and you should destroy the login form to get that memory back and reduce the DOM):

Use the id for now (not the itemId - as it works differently). Sencha has many different ways to reference controls, you just need to get one method working first and then you will understand what the other options means and when you might best use them.

Thanks a lot! when I have forms, may I submit them directly, without using a controller? Sometimes I see form panels have a url directly, and then I see buttons have handlers with url, success and failure functions, and then controllers...?

Absolutely, you can submit forms directly from UI components, but it goes against the MVC paradigm which separates the representation of data from how the user interacts with it. Changes and maintenance will be far easier and it will be easier to migrate to other UI's (mobile vs. Desktop for example) the less code you have tied directly to the UI. Notice how the UI (the Views) have no real knowledge of the Controller when using MVC? Controls just fire events and this is what keeps them abstracted from the Controller. If you place the code in the views then the code has exact knowledge of the Views (if you change the View the code will need to change with it).

The less dependencies you have in your code the better and it is this issue that MVC attempts to address.There are best practices on event handling for sure. One for example might be turning component-specific events into view events so for example you might turn a tap on a button in a view into firing a "createNewUser" event for the Controller - this would abstract the Controller from the View (you already have the View abstracted from the Controller) and give you even more independence in your code.

For example, let's say you tied the creation of a new user (the code for "createNewUser" above) to a button in a View, and later decide you want to also be able to create a new user from a menu as well. Now you will need to duplicate the code you have in the button into the menu (or some other workaround). A controller solves this because the button simply fires a "createNewUser" event that the controller handles. To add this functionality to a menu you would simply add a "CreateNewUser" event to it. This all becomes important when projects get bigger, but for now you should experiment and do what you think best.

Thank you very much I think I start to understand! My button has an id, and then nothing about functionalities inside the button. In my controller I have a reference to my button,using its id, and then all functions in the controller itself..right? But what about models and stores? Also, I was wondering..my php backend files, where do I place them (please)?

The stores and models are used to define and access your data. For example, each web service on your server will have a corresponding store in your application. Each store has a model. The store defines the URL, name, etc for your web service and the model defines the fields returned from the web service. These are super-easy to use.

You can also host your data locally which is a great way to start (and be able to demo). Simply create a new folder in your application called say "data" and put some data list records there in a JSON format. Now create a store in your app and the localhost path in it to your JSON data, attach a model that defines the fields of your data. Now simply insert a list and bind it to the store and you can see your data. There are a number of good examples of this online. Accessing data locally is a great way to start because you don't have to first write a server-side web service before you can do anything and by the time you need to write the web service you will have defined the data needs well in your app. It is an easy matter to swap out the local data for a web service as they are access the exact same way through a store and model.

If you want to get going with web-services right away then use some public ones like twitter, or Wordpress. Sencha has a "citybars" example for Touch that usesYelp which it is a really great way to begin.

thanks! you are helping me so much..may God bless you! actually, I need to use the models and stores with a php backend, and most examples are showing how to use local data. I think I understood that if I use php backend, and my php scripts they have to json encode the results returned by my queries..my problem is my models I define them with the fields and datatype that I have in the tables of MySQL database? and my store, the url is going to be one folder where I have, for example, data/addUser.php?