I am creating an ExtJS MVC application with a dynamic menu. I have several menu elements which will call the same screen (set an active card in a layout) but need to pass a different value in as a parameter each time. So that one card can display different data depending on the parameter which will act as a filter.
my menu elements have a click listener:
listeners: {
itemclick: function(view, record, item, index, e){
Ext.getCmp('contentpanel').layout.setActiveItem(record.getId());
}
}
the record Id will be the card I am setting as active.
How can I pass along a parameter to the card?
You could just add another attribute to the Panel if you want. For example:
Ext.define('YourApp.view.YourCardPanel' ,{
extend: 'Ext.panel.Panel',
id: 'contentpanel',
alias : 'widget.yourcardpanel',
layout: 'card',
newParam: null, // Just to know that this attribute exists but there is no need to declare it.
items: [],
changeLayout: function(){
if (this.newParam == 'new value') {
// Do your stuff
}
}
});
And then you could change the value of that parameter.
listeners: {
itemclick: function(view, record, item, index, e){
var cardPanel = Ext.getCmp('contentpanel');
cardPanel.newParam = 'new value';
cardPanel.changeLayout();
cardPanel.layout.setActiveItem(record.getId());
}
}
Related
Inside my kendo grid, some column is filtered with a kendo multiselect control. The control has a placeholder.
columns.Bound(p => p.ModuleName).Title("Module").Filterable(filterable => filterable.UI("moduleFilter"));
function moduleFilter(element) {
element.kendoMultiSelect({
placeholder: "Select Module",
dataSource: {
transport: {
read: {
url: "#Url.Page("Module", "ReadAll")",
data: function() {
return kendo.antiForgeryTokens();
}
}
}
}
});
}
In this filter, I have removed some default filter elements for better appearance.
function filterMenuInit(e) {
if(e.field == 'ModuleName') {
e.container.find('[title="Operator"]').remove(); //gives focus to multiselect
e.container.find('.k-filter-help-text').remove();
}
}
The problem is by doing this, the multiselect gets the focus, losing the initial placeholder. Is it possible to make the multiselect lose focus or trick the filter to give the focus to another control? I tried various ideas without success.
I am using a Kendo UI in angular Js and binded my TreeList with Json, where I have set my parent and child properties as given.
schema: {
model: {
id: "Id",
fields: {
parentId: { field: "ParentId", nullable: true }
}
}
}
And then I have a filter function on a button click which gets the required data from the json.
$scope.getFilteredData = function (id) {
var filterData = _.filter($scope.bookSource, (item) => { return item.BookId == id; });
if (filterData.length > 0) {
$scope.filteredDataSource = filterData;
$scope.ktlBookTreeList.setDataSource({
data: $scope.filteredDataSource
});
}
}
Although the data I get after the filter is correct , I dont have the expand collapse function any more. In one of the result set I got the parent record and two child records, even then the tree displayed it as separate rows, rather than with in the Expanded / collapsed rows.
Can you please guide me to understand what I am doing wrong here..
Probably you have to add the parent child model again, when you are resetting the data source.
I am working with the latest Tianium Appcelerator and my project is using Alloy.
I have a TableView with the id: tblResults
In my controller, I populate this table view with rows like this:
// Dummy data
var results = [];
results.push({
title: 'Hello World',
value: '123456'
});
results.push({
title: 'Bye World',
value: '654321'
});
// Build result data
var resultData = [];
for (var i = 0; i < results.length; i++) {
resultData.push(createResultRow(
results[i].title,
results[i].value
));
}
// Method to create result row
function createResultRow(myTitle, myValue) {
var tableRow = Titanium.UI.createTableViewRow({
height: 160
id: 'row-'+ myValue
});
var tableRowView = Titanium.UI.createView({
layout: 'horizontal'
});
var myButton = Titanium.UI.createButton({
title: myTitle,
btnValue: myValue
});
myButton.addEventListener('click', function(e) {
handleButtonClick(e);
});
tableRowView.add(myButton);
tableRow.add(tableRowView);
return tableRow;
}
// Set table data
$.tblResults.setData(resultData);
// Method to handle button click
function handleButtonClick(e) {
if (e.source && e.source.btnValue) {
// how to select row having a id: 'row-'+ e.source.btnValue ???
}
}
What this will do is, generate a dummy array of objects. Then using that, populate the table view with row that has a view, within it there is a button.
What I am trying to achieve is, when the button is clicked, I want to select the table row having the id like this:
'row-'+ e.source.btnValue
in pure javascript/jquery DOM style, I would have done something like this:
$('#row-'+ e.source.btnValue)
How can I achieve this in Titanium Appcelerator? Is there a element selector functionality of some sort like in jQuery?
This is a very often requested feature that we don't currently support, but should. Right now, you'd have to keep a hash of id -> view reference and look it up that way. However, I opened a Feature Request here https://jira.appcelerator.org/browse/TIMOB-20286
If you have a select method on rows, you can do like this:
$.table.addEventListener('click',function(e) {
if(e.row.select) e.row.select();
//or
if(rows[e.index]) rows[e.index].select();
});
For tables and lists views always use the click and itemclick event on the table/list. These events provide you with both the selected row (e.row) as well as the actual view clicked upon (e.source). It is also more efficient then having a listener on the buttons of all rows.
Your code would look like:
$.tblResults.addEventListener('click', handleButtonClick); // or bind in XML
// Method to handle button click
function handleButtonClick(e) {
// user tapped on button
if (e.source.btnValue) {
var row = e.row;
}
}
I am using form editing. I would like to disable certain fields in my add and edit forms based on the selection from a drop down box. What event is best to use to trigger this? I have attempted using dataEvents:
{ name:'type_cd',
edittype:'select',
editoptions:{
dataUrl:'functions.php',
dataEvents:[{
type:'change',
fn: function(e){
$(this).setColProp('cntrct_id',{
editoptions:{editable:false}
});
}
}]
}
},
This has no visible effect on my form fields, but I know that it's being reached because I can get an alert message from it if I put one in.
EDIT
If I submit the form, the next time I open it, the column that was set to editable:false will not appear. This is a step in the right direction, BUT I want it to immediately be uneditable. Really, I would like it to be visible, but disabled (i.e. disabled:true)
First of all dataEvents allows you to register callbacks on elements of edit elements. Inside of callbacks this will be initialized to the DOM element which will be bound. So $(this) inside of change handler it will be wrapper on <select> element and not on the grid. The usage of $(this).setColProp will be incorrect.
To disable some input field in Add/Edit form you can use the fact that all input elements get the same id like the value of name property on the corresponding column in colModel. So if you need to disable input of cntrct_id you can set disabled property to true on the element with id="cntrct_id"
{
name: 'type_cd',
edittype: 'select',
editoptions: {
dataUrl: 'functions.php',
dataEvents: [{
type: 'change',
fn: function (e) {
// disable input/select field for column 'cntrct_id'
// in the edit form
$("#cntrct_id").prop("disabled", true);
}
}]
}
}
It's important to understand that editoptions will be used for any existing editing modes (form editing, inline editing and cell editing). If you want to write the code of dataEvents which supports all editing modes you have to detect editing mode and use a little other ids of editing fields. The code (not tested) can be about as below
{
name: 'type_cd',
edittype: 'select',
editoptions: {
dataUrl: 'functions.php',
dataEvents: [{
type: 'change',
fn: function (e) {
var $this = $(e.target), $td, rowid;
// disable input/select field for column 'cntrct_id'
if ($this.hasClass("FormElement")) {
// form editing
$("#cntrct_id").prop("disabled", true);
} else {
$td = $this.closest("td");
if ($td.hasClass("edit-cell") {
// cell editing
// we don't need to disable $("#cntrct_id")
// because ONLY ONE CELL are edited in cell editing mode
} else {
// inline editing
rowid = $td.closest("tr.jqgrow").attr("id");
if (rowid) {
$("#" + $.jgrid.jqID(rowid) + "_cntrct_id")
.prop("disabled", true);
}
}
}
}
}]
}
}
The last remark. If you still use old version of jQuery (before jQuery 1.6) which don't support prop method you have to use attr instead.
#Oleg: This is working(could get the alert messages) but its not disabling the field.
Should the form field require any special values?
what I am trying to do is to get different reaction on a different tree LEAF click!
var myTree = Ext.create('Ext.tree.Panel',
store: store,
rootVisible: false,
border: false,
listeners: {
itemclick: function(index) {
var record = store.getAt(index);
alert(record);
}
}
});
I tried with index, to get the index of leaf, nothing.
I can get a reaction on a node click, but how to get a specific reaction on every leaf?
I also tried giving ID to the leafs, no luck???
Maybe a simple example of
itemclick: function(Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e) {
}
Pleeasse help!!
The itemclick event listener's function param "index" does not point to your tree node's index. Like you mentioned in end of your question the syntax for the itemclick event is:
function(Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e) {
}
Here is an example:
itemclick : function(view,rec,item,index,eventObj) {
// You can access your node information using the record object
// For example: record.get('id') or record.get('some-param')
if(r.get('id')=='SP') {
// I do my necessary logic here.. may be open a perticular window, grid etc..
}
if(r.get('id')=='CO') {
// I do my necessary logic here.. may be open a perticular window, grid etc..
}
}
And here is an example of my tree node's data:
{ text: 'SP Reports', id: 'SP', leaf: true},
{ text: 'CO Reports', id: 'CO', leaf: true},
Itemclick handler already gives you everyting you need:
itemclick(view, record, item, index, e ) {
var id = record.get('id');
// do something depending on the record data.
// console.log(record);
}
I was trying to do a generic treepanel's item click handler and to be able to get a custom field I added to the node object. This helped me out. I dunno if this is the standard and compatible ExtJs 4 way:
(Some Panels Here),
items: [{
xtype: 'treepanel',
listeners: {
itemclick: {
fn: function (view, record, item, index, e) {
console.log(record.raw.userData);
}
(removed...)