I'm currently using extJS4 for the userinterface in a Zend Framework 1.9 application.
Currently I'm in the process of creating a popup where I want to show specific data, depending
on the data the page calling the iframe has.
I've got as far as creating the iframe when I click on the appropriate button
upWin=new Ext.Window({
title : "iframe",
width : 300,
height: 300,
layout : 'fit',
items : [{
xtype : "component",
autoEl : {
tag : "iframe",
src : "<?= $this->baseUrl("/mytest.php")?>"
}
}]
});
upWin.show();
My question here is how I could transfer the needed content/data into it. I don't want to use the GET paramter there if possible so is there any other option to do this?
(examples of the data I need in the mytest.php are id's and title text, .... so that I don't need a new .php page for each variant where I use this iframe).
EDIT:
To formulate it a bit more clearly...the get parameters or URL parameters are a thing I don't want to use if possible (thus I don't want to use /mytest.php?param1=value1¶m2=value2........ if it is avoidable).
You could possibly send the data you need in your php as parameters in the url (eg.
mytest.php?param1=value1¶m2=value2¶m3=value3&.........)
php provides functions in order to access the values of the aforementioned url parameters ...
google it
Related
I'm using the kendo MultiSelect with odata paging and using the angularJS integration. Populating the data from scratch works great. When I want to re-populate the data from initial data then I seem to have a problem.
Cause of the problem:
The data only gets populate from the initial or previous dataset. So, if I the paging size is 10 then only products that exist in the first page will be displayed as normal. All product that don't fall within the first page will just not be displayed.
Possible workarounds:
Increase the page size. I have used this on other pages where the results are quite small. However this is not a realistic work around as we are expecting much bigger datasets in the future ( hence using odata in the first place)
Was thinking we could possibly do some sort of initial sorting. However this could also be slow and could still be a problem if there were more items selected than exist in the first page.
Ideal solution
Is there a way to tell kendo component to load all data based on current value? This will then build the required odata call and populate the component.
Example of the current issue:
http://dojo.telerik.com/ODaLe/2
I worked 2-4 hours to find a solution for this. Dunno if yall would like it, but it might help somebody, so I'd type it here. Following are the steps:
Step 1: Create the data source
First, setup the dataSource object which you would be using for reading remote data (for offline data, improvise by reading the API).
var dataSource = new kendo.data.DataSource({
dataType: "jsonp",
transport: {
read: {
url: options.source,
type: 'POST'
},
},
serverFiltering: true
});
Step 2: Load the selected items
This can be tricky as you need to have the selected item IDs on the client side. For me, I did it by adding a data-options-selected="1;3;9" attribute to my select element. Later, in my JavaScript, I split this attribute by ";" and retrieve an array of selected IDs. Lets say these values are in var valuesArray;
Once we have an array of selected IDs, we need to read them from the data-source. In my case, it was remote, so I ran a dataSource.read() with filters as under:
dataSource.read({
filter: {
logic: 'and',
filters: [
{
field: options.dataValueField,
operator: 'equals',
value: options.value
}
]
}
});
On the server side, this should return an array containing the items having the given identifiers. Thus, we now have those items on the client-side as well.
Step 3: Set values for the widget
Now that the value related data is loaded, we can set the values for the widget using the values() method. Here, $el is the jQuery object representing the select element which I was using for multiSelect.
var oWidget = $el.data('kendoMultiSelect');
oWidget.value(valuesArray);
That's it! One multiselect widget pre-loaded with values, ready to rock and roll. Served my purpose. Dunno if any short-cuts exist.
When using Kendo with Angular, you want to use the k-rebind attribute to refresh the pulldown options + update the picker with the values in your $scope.countries object when it changes.
If you want like the picker to update when $scope.products changes as well, you can initialize the picker using a k-options attr pointed to an object in your controller, and set the k-rebind to that object.
This kendo tutorial provides a useful example, also using odata paging.
http://docs.telerik.com/kendo-ui/web/multiselect/how-to/AngularJS/pre-select-items
I'm a new developer in Sencha Touch 2 and I'm trying to create my first application using its provided MVC architecture. I find issues with toolbar/titlebar text overlapping when navigating between pages. Take a look at these screenshots:
Example 1
Example 2
I'm not pretty sure what's happening out there. I am using animateActiveItem and routing method to move across my application.
Users.js controller file, login method
// Ajax code here, not included here
// on ajax success:
this.redirectTo("login");
Routes.js controller file
routeLoginPage: function() {
console.log("routeLoginPage");
Ext.Viewport.animateActiveItem({ xtype: "loginpage" }, { type: "slide", direction: "left" });
},
Has anybody really faced a problem like this? I have no idea what to do right now as I was trying to resolve this issue for 2 days+.
EDIT
Basically I need to move across the pages defined as views. I define each view in different file containing properties: extend, requires, alias, config and methods defined by me. Every config property has titlebar attached as its first item.
When I'm trying to change page, I load another view by controller command which changes address hash. Routes controller then fires an animateActiveItem method which loads another View (defined previously as xtype by alias property).
I was using Miami Coder's Tutorial (miamicoder.com/2012/how-to-create-a-sencha-touch-2-app-part-1/) to learn Sencha Touch basics.
I think you mean title bar and not toolbar...
Use navigation view to navigate between views instead of Ext.Viewport.animateActiveItem
It is a better method. For using navigation view use this guide in sencha docs...
Sencha has a steep learning curve so be ready for frustrations like this...
Navigation View Guide
You can add your required views in one panel class and enable the required view using
mainclass.setActiveItem(0)
or else use the navigation view
{
xtype: 'navigationview',
id: 'navView',
navigationBar: {
hidden: true
}
}
The above code will hide the title bar generated by navigation view... Now you need to define your own titlebar like so
{
xtype: 'titlebar',
title: 'title',
items: [
{
xtype: 'button',
text: 'back',
listeners: [
{
fn: function(button){
Ext.getCmp('navView').pop();//this will pop the view and show previous view
},event: 'tap'
}
]
}
]
}
Hope it helps...
I am using Backbone.Notifier for showing alerts. How could I display custom backbone view inside it?
Any suggestion?
Don't think it's suited to adding your own custom view. Customization of the notifications view comes through CSS.
For customising buttons you can use the css property :
buttons: [
{'data-role': 'myOk', text: 'Sure', 'class': 'default', css: {width: 120}},
{'data-role': 'myOk', text: 'Yes'}]
For customising the base notification window use the 'notifier' CSS class.
You can change this with the 'baseCls' property on the notifier.
Unfortunately I don't think there's a way of assigning a Backbone view to the notifier but if it's just customization of the aesthetics you want then hopefully the CSS is enough.
If you really wanted to go for a hacky approach you could use the NotificationView which is a standard Backbone View (part of the Notifier class - Backbone.Notifier.NotificationView). You could try overriding this to your implementation but it's definitely a hack so wouldn't recommend it. It's worth taking a look at the notifer.js source code.
To show my custom view inside backbone.notifier i am adding following lines inside the plugin
In notify function before the return statement
.......
if(options.custView){
msgInner.off('click'); //the turn off default behaviour which is to destroy view on click
options.custView.destroyNotifier = removeFn; //now in the custom view i just call this.destroyNotification to destroy the notification
msgView.$el.find('.notifier-message').html(options.custView.render().el); //pasting my view on notification to display
}
return msgView;
}
This is how I now call the plugin
var notifier = new Backbone.Notifier({
el : 'body',
theme : 'clean'
});
notifier.notify({
custView : (new SomeView({
x : 'xyz'
})),
ms : false, //to aviod a timeout
destroy : true
})
I have multiple store on my page to load data in extjs grid. I am using a js function to load these store. Based on the search button click event I attach the respective store to the grid. Its working fine. In the load function I have lots of params that I need to send to the backend to fetch the results and show in the grid. Now with pagination in place. Is there anyway that I can add that js function call inside the paging so I can pass those params. Because right now if I click next button in paging nothing is getting returned. since the required parameters are missing to fetch the results. I tried all the given sample on internet but nothing is working.
It would be great if somebody can actually post an example on paging passing parameters or calling js function on next button event.
Any help will be really appreciated. Thank you.
below is the load store function that I want to call on my next event on pagination.
function loadStore(prodId, productsName, doctype, criteria, filename, titlename) {
store.removeAll();
store.load({
params: {
// specify params for the first page load if using paging
start: 0,
limit: g_perPage,
ajax: "true",
productId: prodId,
ProductsNameArr: productsName,
assetsname: doctype,
criterianame: criteria,
newfilename: filename,
newtitlename: titlename
}
});
}
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.data.Store-property-baseParams
As Nigel said above the beforeload event is what you are after, see below for an example:
store.on('beforeload',function(store,opts) {
store.baseParams = { param1: 'foo', param2: 'bar', ... }
});
baseParams does not seem particularly useful because it sends static values, not the latest search criteria. Getting the dynamic search criteria is tricky too because the grid (i.e. the form fields) may not exist yet.
The Ext JS devs seem to have consistently mistaken docstring fragments for real documentation making for quite a hellish learning curve with their product. A few real examples here would go a long way.
I see there are lot's of examples in Ext JS where instead of actually creating Ext JS objects, an object literal with an xtype property is passed in.
What is this good for? Where is the performance gain (if that's the reason) if the object is going to be created anyway?
xtype is a shorthand way to identify particular components: panel = Ext.Panel, textfield = Ext.form.TextField, etc. When you create a page or a form, you may use these xtypes rather than instantiate objects. For example,
items: [{
xtype: 'textfield',
autoWidth: true,
fieldLabel: 'something'
}]
Moreover, creating pages in this manner allows Ext JS to render lazily the page. This is where you see a "performance gain." Instead of creating a large number of components when the app loads, Ext JS renders components when the user needs to see them. Not a big deal if you have one page, but if you exploit tabs or an accordion, many pages are initially hidden and therefore the app will load more quickly.
Furthermore, you may create and register new components creating xtypes of your choosing. Ext JS will similarly render your components lazily.
You may also retrieve components by ID. Since your component (as well as the Ext JS components) may provide a bunch of nice behavior, it is sometimes convenient to search for and retrieve a component rather than a simple DOM element or node.
In short, xtypes identify components and components are a key aspect of Ext JS.
I'm new to Sencha/Ext JS but I think at this point the odd notion of having a shorthand definition identifier string for only UI components must be to satisfy legacy users.
Look at the "List of xtypes" here: http://docs.sencha.com/touch/2-0/#!/guide/components
Is there any good reason to use a similar-but-not-quite-the-same string identifier as the "class" name as the shorthand definition identifier? I don't think so.
Check the following sample of some xtype to class name mappings for Sencha touch:
video - Ext.Video Ok this sort of makes sense - lowercase version of 'class' name
carousel - Ext.carousel.Carousel Same pattern here
carouselindicator - Ext.carousel.Indicator Um, ok - we'll include a package too
navigationview - Ext.navigation.View And again here
datepicker - Ext.picker.Date Ok, wtf?
Some of the arguments above for xtype were that it allowed deferred instantiation of components. I think that is completely irrelevant - what allows deferred instantiation is the fact that Sencha/Ext JS supports the specification of a string identifier in place of an instantiated component in a view hierarchy.
The mapping of a particular string to a particular component that might be instantiated later is completely arbitrary - and in the case of Sencha/Ext JS, unfortunately silly (see examples above).
At least just follow a sensible pattern - for example why couldn't a Ext.Label have an "xtype" of Label? Too simple?
In reality I know why - it's because they made xtype names that read well - there are many repeated class names that wouldn't work (Ext.Panel and Ext.tab.Panel), and pickerDate would just sound stupid.
But I still don't like it - it's an odd little inconsistent shortcut that obfuscates more than it helps.
I asked the same question as Joe, but I found the answer. If you use xtype, one approach is to also specify an itemId in the same object:
{
itemId: 'myObject',
xtype: 'myClass'
...
}
Then you can find it with getComponent() as in
this.getComponent('myObject');
If you declare a class and give it an xtype, you can query it later with Ext.ComponentQuery.query()
For example:
Ext.create('MyApp.view.MyButton', {
xtype: 'mybutton',
.....
});
Later in your code, if you do:
var buttonArray = Ext.ComponentQuery.query('mybutton');
then buttonArray will contain an array of components of that class type. If you create components inline, your component query will be more complex.
Another advantage of xtypes is that if you move your classes around (let's say, you add another subdirectory under "view": MyApp.view.button.MyButton), then your component queries can still remain the same, since your xtype doesn't change. Once your project gets large, you will start creating subdirectories and moving classes around.
An xtype is simply a name given to represent a class. It is a
definition object which don't need to be instantiated when used in
any part of application.
While registering a xtype, we simply use this syntax: Ext.reg(<xtype name>,<classname>). But, we don't use the new keyword with the class name because the Component Mgr will automatically create instance of this class only if needed eg. in response to an event like click.
We don't need to get an instance manually because after registering an xtype, the 'Component Mgr' will automatically create an instance for the class represtented by that xtype only if it is used anywhere in the application or it simply don't instantiate that class if not used elsewhere. Component Mgr runs this code:
create : function(config, defaultType){
return new types[config.xtype || defaultType](config);
}
xtype don't instantiate the class when Ext.Ready runs. But, new Ext.Container() will create all instances when Ext.Ready runs. So, using xtype is intelligent for large applications to get rid of garbage objects.