How to create new Object or Cloning of ListGrid in Smart Client - smartclient

I want to create an object of ListGrid component in Smart Client.
isc.ListGrid.create({
ID: "countryList",
width:500, height:224, top:50, alternateRecordStyles:true,
fields:[
{name:"countryCode", title:"Flag", width:50, type:"image", imageURLPrefix:"flags/16/", imageURLSuffix:".png"},
{name:"countryName", title:"Country"},
{name:"capital", title:"Capital"},
{name:"continent", title:"Continent"}
]}) ;
Now countryList is the ID for the ListGrid component .
Let us suppose that this Grid has possess some values and i want to put some other values like values from database and there is a condition that we don't have to override or change previous values.So we need to create a new object of countryList .
How can we achieve this?

I don't understand if you need another instance of the same ListGrid, or if you need to display different data in the same ListGrid.
If you need another instance, you could define a class:
isc.defineClass("MyGrid", "ListGrid");
isc.MyGrid.addProperties({
width:500, height:224, top:50, alternateRecordStyles:true,
fields:[
{name:"countryCode", title:"Flag", width:50, type:"image", imageURLPrefix:"flags/16/", imageURLSuffix:".png"},
{name:"countryName", title:"Country"},
{name:"capital", title:"Capital"},
{name:"continent", title:"Continent"}
]
});
isc.MyGrid.create({ID: "countryList"});
isc.MyGrid.create({ID: "countryList2"});
Otherwise, if you need to show different data in the same ListGrid instance, you could do:
countryList.setData(newData); // or:
dataSource.fetchData(criteria, "countryList.setData(data)"); // or:
countryList.fetchData(newCriteria); // if countryList has a dataSource attribute

Related

How to retrieve the values of the checkboxes 'Available carriers' that we check

In order to reproduce a list of checkboxes like the one of the 'available carriers' in the Delivery section of the product page in the admin which allows to record the product-carrier associations, I ask for your help because I can't find how to retrieve the selected checkboxes to be able to use the setter of the association table ps_product_carrier defined in the product.php class
it would be in a JavaScript?
[Screen Admin Product page checkboxes list][1]
[1]: https://i.stack.imgur.com/4C79g.png
To get the carriers you need to use the getCarriers() function from the product class.
If the list is empty, all carriers are available. Therefore, if you want to display them you will need to use the Carrier::getCarriers() function to retrieve the list
If the list contains data, then that product has the specific carriers set.
So working directly on the front won't be enough as the variable is not loaded by default in the templates. What I would do is to create a micro-module with just the function to get that data.
Then you can use either a standard hook or create your own to display the data exactly where you want.
An example could be:
In the TPL add a custom hook call:
{hook h='displayProductCarriers' product=$product}
Then in your micro module:
public function hookDisplayProductCarriers($params)
{
if (isset($params['product'])) {
// Depending on the PS version product will be an array or an instance
if (is_array($params['product'])) {
$p = new Product((int)$params['product']['id_product']);
} elseif (is_object($params['product'])) {
$p = $params['product']);
}
$carriers = $p->getCarriers();
if (empty($carriers)) {
// Product has no specific carrier assigned
// Get all carriers here and assign them to smarty
$carriers = Carrier::getCarriers();
}
$this->context->smarty->assign('product_carriers', $carriers);
return $this->display(__FILE__, 'views/templates/hook/product-carriers.tpl');
}
}
That will allow the usage of the variable inside the template product-carriers.tpl there you can iterate through the {$product_carriers} variable and display whatever you need.

Using dgrid/dstore's REST store with a filter

I would like to extend dstore/Rest to take a parameter that is used to filter the store. This article suggests this is the desired method to alter the query of a dstore: http://www.sitepen.com/blog/2014/11/17/introducing-dstore/
Example:
new MyExtendedRestStore({color: 'red'});
I would like the internals of MyExtendedRestStore to alter the GET query so that color would now be set in the filter so any refresh calls would stick to adding color=red to the query. If I understand this correctly, it should also force the dstore/Trackable mixin to obey the filter.
In dgrid 0.4, instances using OnDemandList or Pagination can accept any collection - whether it be a root store, or a collection generated as a result of performing operations on that store. filter is one such operation.
In your case you state you want the grid to always show only red items, so you could very easily pass the grid a filtered collection, and no custom extension of Rest is required:
var TrackableRestStore = declare([ Rest, Trackable ]);
var store = new TrackableRestStore({ target: '...' });
var filteredCollection = store.filter({ color: 'red' });
var grid = new OnDemandGrid({
collection: filteredCollection,
columns: ...
});
This is also discussed towards the end of dgrid's Grids and Stores tutorial.

ComponentQuery for specific listitem

I want to create a controller with a ref to a specific item in a List, is this possible?
So really I need the ComponentQuery to reference a listitem. I am setting the data inline in the list:
Ext.define('MyApp.view.MyView', {
extend : 'Ext.List',
alias : 'widget.mylist',
config : {
title : 'Title',
itemTpl : ['{displayName}'].join(''),
data : [{
displayName : 'One',
id : 1
}, {
displayName : 'Two',
id : 2
}, {
displayName : 'Three',
id : 3
}, {
displayName : 'Four',
id : 4
}]
}
});
Then on in my controller (this is obviously not working):
refs : {
oneListItem: 'mylist.list[id=1]',
twoListItem: 'mylist.list[id=2]',
threeListItem: 'mylist.list[id=3]',
fourListItem: 'mylist.list[id=4]'
}
Hopefully this is possible. If it is not I can listen for an 'itemtap' on the list and call a method from there, however, I would prefer not have to do that for cleanliness.
Thanks in advance.
Brad
First off: adding id to the objects in your data section will not have any effect, that is just the data that's taken and substituted in the itemTpl you specified before.
As to your question: Sencha Touch 2 Documentation does not mention a way to have Ext.ComponentQuery select the n-th child of a Component, so, assuming you want to create your list objects with inline data, the only way I see is to use the id that Sencha automatically applies to each listItem on creation.
These ids are of the #ext-listitem-1 kind, see an example of how to use them in this Sencha Fiddle demo.
This is however bad practice, because you cannot rely on those id, if for example you add another list to your application they can change breaking your code.
I do not see any valid reason why you shouldn't use itemtap to act on the list, since with the event you get all the data you need to manipulate the proper list item:
itemtap( this, index, target, record, e, eOpts )
For completeness sake, I must mention that you could also add your items dynamically with Ext.dataview.List.add(), that way you should be able to create your dataitems with a custom id.
You might try Ext.select('.x-list-item-first'); or Ext.select('.x-list-item-last'); if you want a handle on the first or last item. I would encourage you to add an xtype set to "mylist" instead of using alias.

How can I create a new model that is an extention of an existing model with an additional field

Currently the additional field is calculted in the grid columnCfgs using an xtype of templatecolumn. I need to add this field to the grid data store so that it can be used to filter the grid data.
Model classes fields property is processed in a special fashion. Instead of replacing the parent class' ones as a normal property would, child fields are appended to them.
See this example:
Ext.define('Base', {
extend: 'Ext.data.Model'
,fields: ['foo','bar']
});
Ext.define('Extended', {
extend: 'Base'
,fields: ['baz']
});
var record = Ext.create('Extended');
record.fields.each(function(field) {
console.log(field.name);
});
That gives the following output:
foo
bar
id
baz

insert in sencha touch data store

Could someone please explain how the insert works to add a record in a datastore
with tha fields: "title", "info" and "price"?
because i tried some things and none of them work. and the sencha website doesnt make it very clear.
Adding a new item to an existing Store isn't that hard actually.
First of you will need to configure your model and store. In your question you name the fields 'title, 'info' and 'price'.
Model:
Ext.regModel('myModel', {
fields: [
{name: 'id', type: 'int' },
{name: 'title', type: 'string' },
{name: 'info', type: 'string' },
{name: 'price', type: 'int' }
]
});
Next you configure the store that will hold the data, based on the above model. I think that, in your case, it should be a model without any data preloaded via, for example, JSON?
So lets make a localstorage (empty store). The Store consists of the model (myModel), you give it a storeID (so that you can later on reference the store by this ID). The proxy is localstorage and the unique ID of the Store will be the ID field of the Model.
Store:
var myStore = new Ext.data.Store({
model: "myModel",
storeId: "myStoreID",
proxy: {
type: "localstorage",
id: "id"
}
});
Now, suppose you have some kind of Form (in which the user can add input a title, info and price, and you want to add these items to the existing store on submittal.
Within the handler of the submittal button you now have to 'call' the store, and perform the add function on it. Within this add function you will have to define the params (the model params) and the data to insert.
Below I have used a mixture of fixed data and a variable to insert.
myStoreID.add({ title: "Mijn Titel", info: "Informatie, price: prijsvar });
The store will now be filled will now be filled with an extra data-record which you can use. Lets say for example that the store is attached to a dataview, then you can perform:
dataView.update();
The above isn't a full tutorial, but I think this will help you along?
Just an update of the YDL answer.
As per the dataView should be related to the updated store, the last sentence dataView.update() should not be needed, due to the automatic update of the views related to a store when it change.
new Ext.DataView({
store: MyStore,
itemSelector: 'div.thumb',
tpl: thumbTpl
});
later, if I do the following, the new item should be displayed in views (List, DataView, etc.) that have MyStore as store.
MyStore.add(newItem);
HTH.
Milton Rodríguez.
If you are trying to pass in an object that was returned from a getValue() on your form, make sure that you run a
myStore.sync();
after you have called the add() method, or you wont see it in your browsers local store.
It is Very easy try these
// first get those values and store in locally
var A_select1=Ext.getCmp('select1').getValue(); // get value
localStorage.setItem("Adult1_select1",A_select1); // set localStore
var AdultSalutation={
'Adult1_select1':A_select1, // assign the value
};
var AdultSalutationstore = Ext.getStore('Adult_AdultSalutationstore'); // get store
AdultSalutationstore.add(AdultSalutation); // add object
AdultSalutationstore.sync(); // sync
AdultSalutationstore.load(); // load