I'm totaly net to javascript and ExtJS. So maybe someone can help me.
I want to display ExtJS made form on Web page when I call javascript method.
The code is:
.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Car Wiki</title>
<link rel="stylesheet" type="text/css" href="extJSLib\extjs-4.1.1\resources\css\ext-all.css">
<script type="text/javascript" src = "extJSLib\extjs-4.1.1\ext-all-dev.js"></script>
<link rel ="stylesheet" type="text/css" href="mainPageStyle.css">
<script type = "text/javascript" src="mainPageScript.js"></script>
</head>
<body>
<div class="mainForm" >
<div id="mainPanel">
<script>mainModule.testMethos();</script>
</div>
</div>
</body>
</html>
mainPageScript.js
(function(exports){
exports.testMethos = function()
{
var formPanel = Ext.create('Ext.form.Panel',{
title: 'Search Form',
width:300,
height:200,
layout: 'anchor',
defaults:
{
anchor:'80%'
},
renterTo: document.body,
items:[
{
xtype: 'textfield',
fieldLabel: 'Car Name',
name: 'carName',
labelAlign: 'top',
cls: 'field-margin',
flex:1
},
{
xtype: 'textfield',
fieldLabel: 'Car Model',
name:'carModel',
labelAlign:'top',
cls:'field-margin',
flex: 1
}
]
});
};
} )(this.mainModule = {});
where is my mistake? (do not say, that in my genetic code :D)
First mistake is your use of Ext.onReady as this is an event which gets fired when the framework has finished loading.
Trying to use it within a function call like you have makes no sense, so just remove this altogether and just keep your form code.
Alternatively, you can still use Ext.onReady but it should be used in the main script block of your html file, that and your form code should be moved there.
I have got your form to display using this approach, you can see this working here
Fiddle above
Related
Where I am appending my dynamic checkbox items within a loop, I tried adding the additional suffix as seen below:
checkBoxTree.append({ text: plc + " (" + id + ")"}).attr("data-id", id).className = "id-item class";
I get no errors, but the attribute and two classes are not added anywhere. How Is this done?
the attempted above adding this at the end of where I'm writing the new checkbox elems'.attr("data-id", id).className = "id-item class";'
You should not play with Kendo's DOM, it's constantly redrawn. I suggest using template and wrapping the item content's inside a div. Then add any class or data attribute you would need over that div, instead of the item's li. Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js"></script>
</head>
<body>
<div id="treeview"></div>
<script>
let tv = $("#treeview").kendoTreeView({
template: "<div data-id='#= item.id #' class='id-item class'>#= item.text # (#= item.inStock #)</div>",
dataSource: [
{ text: "foo", inStock: 7, items: [
{ text: "bar", inStock: 2 },
{ text: "baz", inStock: 5 }
] }
]
}).data('kendoTreeView');
tv.append({ text: 'abc', id: 10, inStock: 1000 });
</script>
</body>
</html>
Dojo
If you inspect above tree's abc node, you will see...
I'm trying to have a kendo multiselect filled with some initial values which can't be removed later by the user.
I've tried to run through the DataBond event of multiselect widget and get each of the elements, but I couldn't accomplish what I'm trying.
Maybe (or more probably) I'm doing something wrong.
Also, I've seen this to disable elements:
<span class="#: unselectableItem ? 'k-state-disabled': ''#">
#: text #
</span>
But i'm not sure, how to implement it.
What I have so far:
#(Html.Kendo().MultiSelect().Name("msEquipoResponsable")
.DataValueField("Id").DataTextField("Tipo")
.DataSource(ds => ds.Read(r => r.Action("ObtenerPersonal","AuditoriaPlaneacionMemorandoEditor")))
.Value(Model.EquipoResponsable.Split(','))
.Events(ev => ev.DataBound("onBindingMS"))
)
DataBound function:
function onBindingMS(event)
{
var dataItems = event.sender._dataItems;
$.each(dataItems, (ind, el) => {
//Disabled logic should be here i guess...
});
}
Try preventing the deselect event to be completed using e.preventDefault() for those items which cannot be deselected.
deselect: function(e) {
if (e.dataItem.unselectableItem)
{
// Call preventDefault() to prevent the deselection
e.preventDefault();
}
}
In the snippet below, items Item1 and Item3 starts selected and cannot be deselected according to the unselectableItem property:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script></head>
<body>
</body>
<select id="multiselect" multiple="multiple">
<option selected>Item1</option>
<option>Item2</option>
</select>
<script id="item-template" type="text/x-kendo-template">
<span class="#: unselectableItem ? 'k-state-disabled': ''#">
#: text #
</span>
</script>
<script>
$("#multiselect").kendoMultiSelect({
dataSource: [{
id: 1,
text: "Item1",
unselectableItem: true
},{
id: 2,
text: "Item2",
unselectableItem: false
},{
id: 3,
text: "Item3",
unselectableItem: true
},{
id: 4,
text: "Item4",
unselectableItem: false
}],
dataValueField: "id",
itemTemplate: $("#item-template").html(),
tagTemplate: $("#item-template").html(),
deselect: function(e) {
if (e.dataItem.unselectableItem)
{
// Call preventDefault() to prevent the deselection
e.preventDefault();
}
},
value: [1,3]
});
</script>
</html>
Demo
how are you. I'm implementing a rating at IONIC, although this is basically angular. I want to get the value for each category. if I qualify rubric "animals" I want to get the value I selected. if I qualify "cars" I want to get the value I selected.
My problem is that I always get the same value for both categories. What can I do?. I want to know what is the best solution because then I think creating dynamic code and do not want to repeat code in n categories.
http://plnkr.co/edit/1PomwzklGD2Y8esbsnxT?p=preview
HTML
What do you think about the animals?
<ionic-ratings ratingsobj='ratingsObject'></ionic-ratings>
What do you think about the cars??
<ionic-ratings ratingsobj='ratingsObject'></ionic-ratings>
JAVASCRIPT
$scope.ratingsObject = {
iconOn: 'ion-ios-star', //Optional
iconOff: 'ion-ios-star-outline', //Optional
iconOnColor: 'rgb(200, 200, 100)', //Optional
iconOffColor: 'rgb(200, 100, 100)', //Optional
rating: 4, //Optional
minRating: 1, //Optional
readOnly:false, //Optional
callback: function(rating) { //Mandatory
$scope.ratingsCallback(rating);
}
};
$scope.ratingsCallback = function(rating) {
$scope.cars=rating;
$scope.animals=rating;
console.log('Selected rating is : ', rating);
//is the same value :(
console.log("animals: "+$scope.animals);
console.log("cars: "+$scope.cars);
};
I suggest to use another ionic rating library like this one which enables the use of ng-model. So you can use ng-repeat with an array as a model, and then bind the <rating> directive to a property automatically updated when user set the rating.
Here below is your example adapted to use that lib and made dynamic:
angular.module('ionicApp', ['ionic', 'ionic.rating'])
.controller('MyCtrl', function($scope) {
$scope.myTitle = 'IONIC RATINGS DEMO';
$scope.categories = [{
name: "animals",
question: "What do you think about the animals?",
rating: 0
}, {
name: "cars",
question: "What do you think about the cars?",
rating: 0
}, {
name: "flowers",
question: "What do you think about the flowers?",
rating: 0
}];
$scope.rating = {};
$scope.rating.max = 5;
});
<!DOCTYPE html>
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>
<script src="https://rawgit.com/fraserxu/ionic-rating/master/ionic-rating.js"></script>
<link rel="stylesheet" href="https://rawgit.com/fraserxu/ionic-rating/master/ionic-rating.css">
<script src="script.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-view>
<h1 class="text-center">{{myTitle}}</h1>
<div class="list">
<div class="item item-button-right" ng-repeat="category in categories">
{{category.question}}
<rating ng-model="category.rating" max="rating.max"></rating>
</div>
</div>
<pre>categories = {{categories|json}}</pre>
</ion-view>
</body>
</html>
P.S.: in the <pre> tag is shown the model only for debug and demo.
So I have this view
<!DOCTYPE html>
<html>
<head >
<link href="<%: Url.Content("~/Content/kendo/2012.3.1114/kendo.common.min.css")%>" rel="stylesheet" type="text/css" />
<link href="<%: Url.Content("~/Content/kendo/2012.3.1114/kendo.default.min.css")%>" rel="stylesheet" type="text/css" />
<title><%: ViewBag.GestionTitle %></title>
</head>
<body>
<h1><%: ViewBag.GestionTitle %></h1>
<div id="usuariosGrid"></div>
<button id="addUsuario" type="button" class="k-input"><%: ViewBag.Agregar %></button>
<script src="<%: Url.Content("~/Scripts/jquery-1.7.1.min.js")%>"></script>
<script src="<%: Url.Content("~/Scripts/kendo/2012.3.1114/kendo.web.min.js")%>"></script>
<script src="<%: Url.Content("~/Scripts/usuario/usuario.js")%>"></script>
</body>
</html>
The div usuariosGrid is filled with remote data with the following function:
$(function () {
var ds = new kendo.data.DataSource({
transport: {
read: {
url: "http://127.0.0.1:81/SismosService.svc/usuario/index",
dataType: "json"
}
},
schema: {
data: "Response"
},
});
$("#usuariosGrid").kendoGrid({
columns: ["UsuarioId", "Nombre", "ApellidoP", "ApellidoM"],
dataSource: ds
});
});
This creates a grid with the columns specified in the function. Now what I want to do is for every row inserted also to add a column with two hyperlinks, one that would redirect me to an Edit page and another one that would redirect me to a Delete page.
How can I do this? I've looked for examples but haven't been able to find anything that resembles what I'm trying to achieve. Any help will be appreciated.
Basically you have to add a column to the columns definition of your kendoGrid. This new cell will contain the links (or even some buttons).
For this you would probably be interested on using columns.template field where you can merge HTML with variable data, for example, data from row that you editing or deleting.
Instead of a link you might define a custom action by doing something like:
columns : [
...
{ command: { text: "Edit", click: editRecord }, title: " ", width: "140px" }
]
and in editRecord you can do whatever you want (see KendoUI example here).
I have the following code working with a DataGrid that has two column Column_A and Column_B respectively:
grid.filter({Column_A: '*test*', Column_B: '*'}, true)
This code works fine and finds all rows where Column_A has the word test in it... now, I'd like to do the same but look in either column.... the comma translates to an AND operation but I am looking for an OR operation.
I read the AndOrReadStore specs and based on my understanding I should be able to do something like this:
grid.filter({complexQuery: "Column_A: '*test*' OR Column_B: '*'"}, true)
however this does not work and I don't get any results... I can't even get it to work with one column, like this
grid.filter({complexQuery: "Column_A: '*test*'"}, true)
What am I doing wrong?
Thank you
Here is a working programmatic example (Click the button to invoke the filter: Column_A contains an e OR Column_B is 300):
the JavaScript (script.js):
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.form.Button");
dojo.require("dojox.grid.DataGrid");
dojo.require('dojox.data.AndOrReadStore');
dojo.ready(function(){
var appLayout = new dijit.layout.ContentPane({
id: "appLayout"
}, "appLayout");
var data = {
'items': [
{'Column_A': 'alpha', 'Column_B': '100'},
{'Column_A': 'beta', 'Column_B': '200'},
{'Column_A': 'gamma', 'Column_B': '300'},
{'Column_A': 'delta', 'Column_B': '400'}
]
};
var store = new dojox.data.AndOrReadStore({
data: data
});
var layout = [[
{name : 'A', field : 'Column_A', width : '125px'},
{name : 'B', field : 'Column_B', width : '100%'}
]];
var grid = new dojox.grid.DataGrid({
structure : layout,
store: store,
queryOptions: {ignoreCase: true}
});
var filterButton = new dijit.form.Button({
label: "Filter",
onClick: function () {
grid.filter({complexQuery: "Column_A: '*e*' OR 'Column_B: '300'"});
}
});
filterButton.placeAt(appLayout.domNode);
grid.placeAt(appLayout.domNode);
appLayout.startup();
});
And now the html (index.html)
<html lang="en">
<head>
<meta charset="utf-8">
<title>DataGrid with AndOrReadStore</title>
<link rel="stylesheet" href="style.css" media="screen"/>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/document.css" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojox/layout/resources/ExpandoPane.css" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojox/grid/resources/claroGrid.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojox/grid/enhanced/resources/claro/EnhancedGrid.css">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body class="claro">
<div id="appLayout"></div>
</body>
</html>
And finally the css (style.css)
html, body {
width: 100%; height: 100%;
margin: 0; padding: 0;
overflow: hidden;
}
#appLayout {
width: 100%; height: 100%;
}
I looked at the link you posted, and I think it's an issue of getting the brackets and parenthesis correct. Also, it looks like the 'complex query' is used for objects, whereas 'query' is used for strings:
grid.filter({query: ("Column_A: '*test*' OR Column_B: '*'")}, true);
Here's the link I looked at: http://dojotoolkit.org/reference-guide/dojox/data/AndOrReadStore.html#dojox-data-andorreadstore