I have a datagrid that has additional information I'd like to show in a pop up.
I display an icon to alert the user this information exists. The icon has a click action that performs a callback to the server to get this information. When I click this, I have all my data ready to view, but am not sure of the MVVM logistics of this.
Here is a mockup of what I'm trying to do. The alert function displays a modal popup. The click handler works, and the callback works fine.
I'm wondering, where do I create the new grid model, should it be a part of the current grid model, where do I apply bindings?
var initialData = [
{ name: "ABC", number: 1, icon: true},
{ name: "DEF", number: 2, icon: false },
];
var GridModel = function(items) {
this.items = ko.observableArray(items);
this.gridViewModel = new ko.simpleGrid.viewModel({
data: this.items,
columns: [
{ headerText: "Name", rowText: "name" },
{ headerText: "Number", rowText: "number" },
{ headerText: "Addl Info",
rowText: function (item)
{
return item.icon ? "<i class=\"icon\"></i>" : "";
},
clickHandler: function (item)
{
function callback(data) {
// data is now an array of objects I want a data grid for that displays in the pop up.
alert("Additional Information", <HTML GOES HERE>);
}
$$.getJSON("url", [], callback);
}
],
});
};
ko.applyBindings(new GridModel(initialData));
Related
I have a form with two chained comboboxes. The first chained combobox dictates the values that appear in the second. I have forceSelection:true on the second combobox so that when a user changes the first combo, the second will be set blank because it no longer will be a valid option. The chained combos function as expected but when I load a record into this form using getForm().loadRecord(record) the value for the first combo is set properly but the second is not unless I set forceSelection:false.
The following fiddle should make things pretty clear: sencha fiddle
Clicking "Load Record" should load in Fruits/Apple, but only Fruits is shown. Clicking "Load Record" a second time achieves the desired result. If you comment out forceSelection: true it works as expected but then the chained combos don't function as desired. Is there anything I'm doing wrong here?
It is not so easy. What is happening when you are running form.loadRecord(rec).
you set the FoodGroup combobox
you set the FoodName combobox. BUT the value is not there, because your filter did not switch to appropriate food groups. That is why commenting force selection helps. (That is why commenting filter also help).
turned on the filter of food names. Store now have new values.
You are clicking the button second time. The first combobox value is the same, filters are not trigged (triggered?), you already have appropriate values in the second store and the value is selected.
How to fix:
The fix is ugly. You can listen on store 'refresh' (it means the filters are triggered) and then set the second value (or set the values again).
Ext.define('Fiddle.view.FormModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.fiddle-form-model',
stores: {
foodgroups: {
fields: ['name'],
data: [{
foodgroupname: 'Fruits'
}, {
foodgroupname: 'Vegetables'
}]
},
foods: {
fields: ['foodgroupname', 'foodname'],
filters: {
property: 'foodgroupname',
value: '{selectedFoodgroup.foodgroupname}'
},
data: [{
foodname: 'Apple',
foodgroupname: 'Fruits'
}, {
foodname: 'Banana',
foodgroupname: 'Fruits'
}, {
foodname: 'Lettuce',
foodgroupname: 'Vegetables'
}, {
foodname: 'Carrot',
foodgroupname: 'Vegetables'
}]
}
}
});
Ext.define('Fiddle.view.Form', {
extend: 'Ext.form.Panel',
xtype: 'fiddle-form',
viewModel: {
type: 'fiddle-form-model'
},
title: 'Combos',
items: [{
xtype: 'combo',
itemId: 'FoodGroup', // To access FoodGroup
displayField: 'foodgroupname',
bind: {
store: '{foodgroups}',
selection: '{selectedFoodgroup}'
},
valueField: 'foodgroupname',
forceSelection: true,
name: 'foodgroup',
fieldLabel: 'Food Group',
value: 'Vegetables'
}, {
xtype: 'combo',
itemId: 'FoodName', // To access FoodName
bind: {
store: '{foods}'
},
queryMode: 'local',
forceSelection: true, //COMMENTING THIS OUT ACHIEVES DESIRED LOAD RECORD BEHAVIOR
displayField: 'foodname',
valueField: 'foodname',
name: 'food',
fieldLabel: 'Food',
value: 'Carrot'
}],
buttons: [{
text: 'Load Record',
handler: function (btn) {
// OUR UGLY FIX
var form = btn.up('form'),
foodGroupComboBox = form.down('combobox#FoodGroup'),
foodNameComboBox = form.down('combobox#FoodName'),
record = Ext.create('Ext.data.Model', {
foodgroup: 'Fruits',
food: 'Apple'
});
foodNameComboBox.getStore().on('refresh', function (store) {
form.loadRecord(record);
}, this, {
single: true
})
form.loadRecord(record);
}
}]
});
Ext.application({
name: 'Fiddle',
launch: function () {
var form = new Fiddle.view.Form({
renderTo: document.body,
width: 600,
height: 400
});
}
});
I'm evaluating OpenUI5 and I'm not clear about the binding concept.
In a XML login view, I have a Combobox that I want to populate after a successful login:
<ComboBox id="cboJoraniInstance" enabled="false" />
So, into my controller I've created an Ajax call with a parameter:
return Controller.extend("sap.ui.jorani.wt.controller.Login", {
onCheckEmail : function () {
var oDialog = this.getView().byId("BusyDialog");
oDialog.open();
var sMail = this.getView().byId("txtEmail").getValue();
var oListInst = this.getView().byId("cboJoraniInstance");
var aData = jQuery.ajax({
type : 'POST',
url : 'http://localhost/dummy/getJoraniInstances.php',
data: {
mail: sMail
},
async: false,
success : function(data,textStatus, jqXHR) {
//Link Combobox
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(data);
oListInst.setModel(oModel);
oListInst.bindElement("/Instances");
oListInst.bindProperty("value", "Url");
oListInst.bindProperty("name", "name");
oListInst.setEnabled();
},
error: function (jqXHR, textStatus, errorThrown){
MessageToast.show('An error occured');
}
});
oDialog.close();
},
});
The call to my web service is OK and returns:
{
"Instances": [{
"Name": "Local",
"IsDefault": true,
"Url": "http:\/\/localhost\/jorani\/"
}, {
"Name": "D\u00e9mo",
"IsDefault": false,
"Url": "https:\/\/demo.jorani.org\/"
}]
}
The code executes without error, but the control is not filled by my binding attempts.
I've checked the various SO questions on this topic and they all add a new ComboBox into the view dynamically, for example:
oListInst.placeAt("content");
But that is not what I want to achieve, I'd like to fill an existing object. Is it possible?
Concerning the view, if I fill the Combobox with the code below, it is working fine (but it doesn't use the binding feature):
$.each(data.Instances, function(i, obj) {
oListInst.addItem(new sap.ui.core.ListItem({key:obj.Url, text:obj.Name}));
});
In jstree , I can right click on a node and select an item from the context menu.
In the code below, I am trying to use the obj object to get the tree item. I can get that using $(obj) however this is just a HTML list item. How do I get metadata (foo) associated with that ?
$(element).jstree(
"data" : { "data" : {"title" : "An item"}, "metadata":{"foo" :"bar"}},
"plugins" : ["themes", "ui", "contextmenu"],
"contextmenu" : {
"items" : function($node) {
return {
"Menu1" : function(obj){
//my menu action
}
};
};
}
);
Here is how the metadata can be accessed.
obj.data().foo
I had the same issue, when trying to fetch the ID of a selected jsTree node.
It can be done, you just need to create your own function to populate the contextmenu, to fetch the relevant values from your JSON data:
jsTree Context Menu selected item?
In arguments of function contextmenu.items you have access of current item data. This dynamically invocable function, fired every time on new right click event on node, See example:
$('#post-tree').jstree({
core: {
data: treeData
},
plugins: ['contextmenu'],
contextmenu: {
items: function (item) {
return {
addPost: {
label: 'Add new Post',
action: function () {
console.log(item.original); // metadata object
}
},
addSubcategory: {
label: 'Add subcategory',
action: function () {
console.log('addSubcategory');
}
},
editCategory: {
label: 'Properties',
action: function () {
console.log('editCategory')
}
},
delete: {
label: 'Delete',
action: function () {
console.log('delete Category');
}
}
};
}
}
});
I'm new to Sencha, trying to implement a Sencha formpanel with a field to pick from a list of objects in a store. This seems like a sufficiently basic pattern that there must be a simple solution. I have a model which defines an ajax endpoint returning a json array (places) of name/id pairs:
Ext.define('MyApp.model.Place', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'name', type: 'string'},
{name: 'id', type: 'int'},
],
proxy: {
type: 'ajax',
url: '/m/places/',
reader: {
type: 'json',
rootProperty: 'places',
},
},
},
});
And a store:
Ext.define('MyApp.store.Place', {
extend: 'Ext.data.Store',
requires: ['MyApp.model.Place'],
config: {
model: 'MyApp.model.Place',
autoLoad: true,
sorters: [
{
property : 'name',
direction: 'ASC',
},
],
},
});
I want a read-only text field for the place name and a hidden field to submit the place id:
{
xtype: 'textfield',
name: 'place_name',
label: 'Place',
readOnly: true,
listeners: {
focus: function () {
var place_picker = Ext.create('Ext.Picker', {
slots: [
{
name: 'place_name',
title: 'Choose a Place',
store: Ext.create('MyApp.store.Place'),
itemTpl: '{name}',
listeners: {
itemtap: function (obj, index, target, record, e, eOpts) {
var form = Ext.getCmp('entityform');
form.setValues({
place_name: record.get('name'),
place_id: record.get('id'),
});
// how to dismiss the picker?
obj.parent.hide();
},
},
},
]
});
Ext.Viewport.add(place_picker);
place_picker.show();
},
},
},
{
xtype: 'hiddenfield',
name: 'place_id',
},
At this point, tapping the field causes the picker to slide up from the bottom and display the loading animation, but it is not being populated with the list of place names, although I can see that the ajax request has been made and that it has returned the expected json document.
I'll stop here and ask if I'm on the right track or is there some better approach out there?
Why isn't the picker being populated with the results of the ajax request? Is my use of itemTpl incorrect?
Am I setting the form fields in a sencha-appropriate way?
How should I dismiss the picker on itemtap? I somehow doubt that my use of hide() is the proper way.
Picker slots has an data config which is an array of objects. It should have a specific format with text and value.
slots :[
data : [{
text : someValue,
value : someValue1,}] ]
You need to add objects which has the fields text and value to slots.
I am new to ExtJS 4 and am trying to implement a simple application in MVC style. The documentation is really good and this is one of the topics covered in the Form package guide, but it doesn't seem to work in my case.
The app basically can create, edit and delete articles.The creation and editing are in pop-up windows.
The pop-up window contains a form with a text field and html-editor.
Please click on the link below,this is the error in Google Chrome Console when I click on the submit button in the 'window'
http://www.freeimagehosting.net/mjig7
Here is the code which I've written
Model:
Ext.define('AM.model.Article', {
extend: 'Ext.data.Model',
fields: ['name', 'data'],
proxy: {
type: 'rest',
url: 'users/data',
reader: {
type: 'json',
root: 'myJaxBean',
successProperty: 'success'
},
writer: {
type: 'json'
}
}
});
View:
Ext.define('AM.view.New', {
extend: 'Ext.window.Window',
alias : 'widget.new',
title : 'New Article',
autoShow: true,
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
layout: 'fit',
bodyStyle:'padding:5px 5px 0',
width: '70%',
height: '40%',
initComponent: function() {
this.items = [
{
xtype: 'form',
anchor: '99%',
items: [
{
xtype: 'textfield',
name : 'name',
fieldLabel: 'Article Name',
anchor: '99%'
},
{
xtype: 'htmleditor',
name : 'data',
fieldLabel: 'Article',
anchor: '99% -25'
}
],
buttons: [
{
text: 'Submit',
handler: function() {
var form = this.up('form').getForm(), // get the basic form
record = form.getRecord(); // get the underlying model instance
if (form.isValid()) { // make sure the form contains valid data before submitting
form.updateRecord(record); // update the record with the form data
record.save({ // save the record to the server
success: function(user) {
Ext.Msg.alert('Success', 'User saved successfully.')
},
failure: function(user) {
Ext.Msg.alert('Failure', 'Failed to save user.')
}
});
} else { // display error alert if the data is invalid
Ext.Msg.alert('Invalid Data', 'Please correct form errors.')
}
}
},
{
text: 'Cancel',
scope: this,
handler: this.close
}
]
}
],
this.callParent(arguments);
}
});
and finally the code in my controller which makes the window visible
Controller:
.....
'viewport > panel > panel > tbar button[action=newarticle]' :{
click: this.newArticle
},
....
newArticle: function(button){
var view = Ext.widget('new');
},
Please point me in the right direction in case I am doing something wrong.
Thanks in advance.
Check the docs getRecord():
Returns the last Ext.data.Model instance that was loaded via
loadRecord
so it's clear that you haven't load any record, so you getRecord() returns undefined. And you are getting your error further.