Related
I am trying to use local storage for storing the multistep form values.So here the issue is if i am entering the values at input fields and all the values are storing at local storage. But while I am signing in with other mails then the same value are appearing in the form which is enterd with before mail. So here the same entered value should not appear while we login with other mail. So where i am going wrong please tell me
<vue-form-g :schema="schema_Antiques" :model="model" :options="formOptions"></vue-form-g>
new Vue({
el: '#q-vikreya',
components: {
"vue-form-g": VueFormGenerator.component
},
data() {
return {
model:{}
},
schema_Antiques: {
fields: [{
type: "input",
inputType: "text",
placeholder: "Type",
model: "Type",
styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
}, {
type: "input",
inputType: "text",
placeholder: "Origin",
required: true,
model: "Origin",
styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
}, {
type: "input",
inputType: "text",
placeholder: "Age",
required: true,
model: "Age",
styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
}, {
type: "input",
inputType: "text",
placeholder: "Condition",
required: true,
model: "Condition",
styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
}, {
type: "input",
inputType: "text",
placeholder: "Size",
required: true,
model: "Size",
styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
}, {
type: "input",
inputType: "text",
placeholder: "Maker",
required: true,
model: "Maker",
styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
}, {
type: "input",
inputType: "text",
placeholder: "Material",
required: true,
model: "Material",
styleClasses: ["half-width col-xs-12 col-sm-4", "job_title"]
}, {
type: "textArea",
model: "Other_specializations",
max: 500,
placeholder: "Other specializations",
styleClasses: ["half-width col-xs-12 col-sm-4", "Experience"]
}]
},
mounted() {
if (localStorage.getItem('model') !== null)
this.model = JSON.parse(localStorage.getItem('model'));
},
methods: {
localStorage.setItem('model', JSON.stringify(this.model));
}
Here I have used vue form generator. where I have written components for real Estate form where I have all the input fields. So this is a normal form and i want to make this component and schema as update form like if user clicks on edit button and He is able to edit the form. SO i want make this components as editable form. SO if anyone have an idea please let me know.
vue form generator
<div>
<vue-form-g :schema="schema_Real_Estate:" :model="model" :options="formOptions"></vue-form-g>
<span class="prev_next">
<button class="prev_next_btn" #click.prevent="prev()">Previous</button>
<button class="prev_next_btn"#click.prevent="next()">Next</button>
</span>
</div>
new Vue({
el: '#q-vikreya',
components: {
"vue-form-g": VueFormGenerator.component
},
data() {
return {
model: {
Basement:'',
Bedrooms:'',
SQFT:'',
Lotsize:'',
TotalRooms:'',
Stories:'',
YearBuilt:'',
HOA:'',
Garages:'',
Roof:'',
Exterior:'',
Cooling:'',
Heating:'',
Elementary_school:'',
Middle_school:'',
High_school:'',
},
schema_Real_Estate: {
fields: [{
type: "input",
inputType: "number",
placeholder: "Bedrooms",
model: "Bedrooms",
styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
}, {
type: "input",
inputType: "number",
placeholder: "Bathrooms",
required: true,
model: "Bathrooms",
styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
}, {
type: "input",
inputType: "number",
placeholder: "SQFT",
required: true,
min: 18,
model: "SQFT",
styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
}, {
type: "input",
inputType: "number",
placeholder: "Lot size",
required: true,
min: 18,
model: "Lotsize",
styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
}, {
type: "input",
inputType: "number",
placeholder: "Total rooms",
required: true,
min: 18,
model: "TotalRooms",
styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
}, {
type: "input",
inputType: "number",
placeholder: "Stories",
required: true,
min: 18,
model: "Stories",
styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
}, {
type: "input",
inputType: "number",
placeholder: "Year Built",
required: true,
min: 18,
model: "YearBuilt",
styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
}, {
type: "input",
inputType: "number",
placeholder: "HOA",
required: true,
min: 18,
model: "HOA",
styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
}, {
type: "input",
inputType: "number",
placeholder: "Garages",
required: true,
min: 18,
model: "Garages",
styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
}, {
type: "input",
inputType: "text",
placeholder: "Basement",
required: true,
min: 18,
model: "Basement",
styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
}, {
type: "input",
inputType: "text",
placeholder: "Roof",
required: true,
min: 18,
model: "Roof",
styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
}, {
type: "input",
inputType: "text",
placeholder: "Exterior",
required: true,
min: 18,
model: "Exterior",
styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
}, {
type: "input",
inputType: "text",
placeholder: "Cooling",
required: true,
min: 18,
model: "Cooling",
styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
}, {
type: "input",
inputType: "text",
placeholder: "Heating",
required: true,
min: 18,
model: "Heating",
styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
}, {
type: "input",
inputType: "text",
placeholder: "Elementary school",
required: true,
min: '',
model: "Elementary_school",
styleClasses: ["half-width col-xs-12 col-sm-4", "job_title"]
}, {
type: "input",
inputType: "text",
placeholder: "Middle school",
required: true,
min: '',
model: "Middle_school",
styleClasses: ["half-width col-xs-12 col-sm-4", "Experience"]
}, {
type: "input",
inputType: "text",
placeholder: "High school",
required: true,
min: '',
model: "High_school",
styleClasses: ["half-width col-xs-12 col-sm-4", "job_title"]
}]
},
methods: {
prev(currentStep) {
if(this.checkForm()) {
if (currentStep === 4) {
this.step = 3
} else {
this.step--;
}
}
},
onlyForCurrency ($event) {
// console.log($event.keyCode); //keyCodes value
let keyCode = ($event.keyCode ? $event.keyCode : $event.which);
// only allow number and one dot
if ((keyCode < 48 || keyCode > 57) && (keyCode !== 46 || this.price.indexOf('.') != -1)) { // 46 is dot
$event.preventDefault();
}
// restrict to 2 decimal places
if(this.price!=null && this.price.indexOf(".")>-1 && (this.price.split('.')[1].length > 1)){
$event.preventDefault();
}
},
next(currentStep) {
if(this.checkForm()) {
if (currentStep === 4) {
this.step = 5
} else {
this.step++;
}
},
<!--By using checkForm function we are preventing the form to navigate next screen until all the fields are-->
<!--filled completely-->
checkForm: function (e) {
if (this.category && this.title && this.address && this.city && this.state && this.price && this.description) {
return true;
}
this.errors = [];
if (!this.category) {
this.errors.push('Name required.');
}
if (!this.title) {
this.errors.push('Age required.');
}
if (!this.address) {
this.errors.push('Age required.');
}
if (!this.city) {
this.errors.push('Age required.');
}
if (!this.state) {
this.errors.push('Age required.');
}
if (!this.price) {
this.errors.push('Age required.');
}
if (!this.description) {
this.errors.push('Age required.');
}
if (!this.description) {
this.errors.push('Age required.');
}
if (!this.model) {
this.errors.push('Age required.');
}
e.preventDefault();
},
<!--This submitForm is the function used for submitting the post Ad form-->
submitForm: function(){
axios({
method : "POST",
url: "{% url 'PostAd' %}", //django path name
headers: {'X-CSRFTOKEN': '{{ csrf_token }}', 'Content-Type': 'application/json'},
data : {"category":this.category, "title":this.title,
"address":this.address,
"city": this.city,
"state": this.state,
"zip": this.zip,
"price": this.price,
"description": this.description,
"radio_price": this.radio_price,
"Job_title": this.model,
},//data
}).then(response => {
localStorage.clear();
console.log("response");
console.log(response.data);
this.success_msg = response.data['msg'];
window.location.replace('{% url "classifieds" %}') // Replace home by the name of your home view
}).catch(err => {
this.err_msg = err.response.data['err'];
console.log("response1");
console.log(err.response.data);
});
},
},
})
I'm having a hard time figuring out how to access item properties from within a v-data-table slot with a specific JSON format.
The items bound to the v-data-table have a nested property called "technicals" which also contains several nested properties for each interval like "5m", "15m" etc...
I generated the v-data-table headers with a computed property and everything is displaying fine but now I want to access the data with a slot inside the table to manipulate the boolean values of true/false with some additional styling etc. I just can't find out how to access the properties in the slot tag.
The values assigned to the headers are of this structure
Object.technicals.side.interval.value
Where "side" and "interval" are component props stored in the data object.
{
"market": {
"id": "xyx"
},
"technicals": {
"buy": {
"1m": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": true,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"5m": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": true,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"15m": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": false,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"30m": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": false,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"1h": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": false,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"4h": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": true,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
}
}
}
<v-data-table
:headers="headers"
:items="tickerStats"
:sort-by.sync="sortBy"
:sort-desc.sync="isDescending"
>
<template v-slot:item.technicals.side.interval.RSI_OVERSOLD="{ item }">
<v-chip>doSomething</v-chip>
</template>
</v-data-table>
I need to get access from this line but I can't access the props from the component (side and interval) and can't access the other things either by trying.
<template v-slot:item.technicals.side.interval.RSI_OVERSOLD="{ item }">
It only works accessing the market ID like so, but I don't need to modify the ID column.
<template v-slot:item.market.id="{ item }">
UPDATE
Here is how I generate the headers
headers() {
let fnc = this.functions.filter(f => {
return f.type == this.side;
});
let headers = [
{
text: "MARKET",
align: "start",
sortable: true,
value: "market.id",
type: String
}
];
let side = this.side;
for (let i = 0; i < fnc.length; i++) {
headers.push({
text: fnc[i].name,
align: "start",
sortable: true,
type: Boolean,
value:
"technicals[" +
this.side +
"]." +
this.interval +
"[" +
fnc[i].name +
"]"
});
}
return headers;
}
Function is an array of objects of this format
{
name: "RSI_OVERSOLD",
formatted_name: "RSI OVERSOD"
}
This is the structure of one item inside the items array used for: items from which I only want to display the market.id and the technicals for the given side and interval passed as a prop to the component.
{
"id": "ETHUSDT",
"ticker": {
"exchange": "Binance",
"base": "ETH",
"quote": "USDT",
"timestamp": 1613375545712,
"last": "1753.52000000",
"open": "1671.49000000",
"high": "1847.54000000",
"low": "1655.67000000",
"volume": "935312.43155000",
"quoteVolume": "1656379605.10542940",
"change": "-82.03000000",
"changePercent": "-4.469",
"bid": "1753.37000000",
"bidVolume": "5.70749000",
"ask": "1753.52000000",
"askVolume": "0.21402000"
},
"market": {
"limits": {
"amount": {
"min": 0.001,
"max": 10000
},
"price": {
"min": 0.01,
"max": 100000
},
"cost": {
"min": 1
},
"market": {
"min": 0.001,
"max": 10000
}
},
"precision": {
"base": 8,
"quote": 8,
"amount": 3,
"price": 2
},
"tierBased": false,
"percentage": true,
"taker": 0.001,
"maker": 0.001,
"id": "ETHUSDT",
"lowercaseId": "ethusdt",
"symbol": "ETH/USDT",
"base": "ETH",
"quote": "USDT",
"baseId": "ETH",
"quoteId": "USDT",
"info": {
"symbol": "ETHUSDT",
"pair": "ETHUSDT",
"contractType": "PERPETUAL",
"deliveryDate": 4133404800000,
"onboardDate": 1569398400000,
"status": "TRADING",
"maintMarginPercent": "2.5000",
"requiredMarginPercent": "5.0000",
"baseAsset": "ETH",
"quoteAsset": "USDT",
"marginAsset": "USDT",
"pricePrecision": 2,
"quantityPrecision": 3,
"baseAssetPrecision": 8,
"quotePrecision": 8,
"underlyingType": "COIN",
"underlyingSubType": [],
"settlePlan": 0,
"triggerProtect": "0.0500",
"filters": [
{
"minPrice": "0.01",
"maxPrice": "100000",
"filterType": "PRICE_FILTER",
"tickSize": "0.01"
},
{
"stepSize": "0.001",
"filterType": "LOT_SIZE",
"maxQty": "10000",
"minQty": "0.001"
},
{
"stepSize": "0.001",
"filterType": "MARKET_LOT_SIZE",
"maxQty": "10000",
"minQty": "0.001"
},
{
"limit": 200,
"filterType": "MAX_NUM_ORDERS"
},
{
"limit": 100,
"filterType": "MAX_NUM_ALGO_ORDERS"
},
{
"notional": "1",
"filterType": "MIN_NOTIONAL"
},
{
"multiplierDown": "0.8500",
"multiplierUp": "1.1500",
"multiplierDecimal": "4",
"filterType": "PERCENT_PRICE"
}
],
"orderTypes": [
"LIMIT",
"MARKET",
"STOP",
"STOP_MARKET",
"TAKE_PROFIT",
"TAKE_PROFIT_MARKET",
"TRAILING_STOP_MARKET"
],
"timeInForce": [
"GTC",
"IOC",
"FOK",
"GTX"
]
},
"type": "future",
"spot": false,
"margin": true,
"future": true,
"delivery": false,
"active": true
},
"technicals": {
"buy": {
"1m": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": true,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"5m": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": true,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"15m": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": false,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"30m": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": false,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"1h": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": false,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"4h": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": true,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
}
},
"sell": {
"1m": {
"RSI_OVERBOUGHT": false,
"UPPER_BBAND": false,
"DOWNTRENDING": false,
"MFI_OVERBOUGHT": false,
"BEARISH_MACD_CROSS": false
},
"5m": {
"RSI_OVERBOUGHT": false,
"UPPER_BBAND": false,
"DOWNTRENDING": false,
"MFI_OVERBOUGHT": false,
"BEARISH_MACD_CROSS": false
},
"15m": {
"RSI_OVERBOUGHT": false,
"UPPER_BBAND": false,
"DOWNTRENDING": true,
"MFI_OVERBOUGHT": false,
"BEARISH_MACD_CROSS": false
},
"30m": {
"RSI_OVERBOUGHT": false,
"UPPER_BBAND": false,
"DOWNTRENDING": true,
"MFI_OVERBOUGHT": false,
"BEARISH_MACD_CROSS": false
},
"1h": {
"RSI_OVERBOUGHT": false,
"UPPER_BBAND": false,
"DOWNTRENDING": true,
"MFI_OVERBOUGHT": false,
"BEARISH_MACD_CROSS": false
},
"4h": {
"RSI_OVERBOUGHT": false,
"UPPER_BBAND": false,
"DOWNTRENDING": false,
"MFI_OVERBOUGHT": false,
"BEARISH_MACD_CROSS": false
}
}
}
},
I want to build such relation:
erd
I want each User to containt list of messages and each message to contain information about sender. Relevant to ERD that I posted.
Code that I have for migrations:
module.exports = {
up: (queryInterface, Sequelize) =>
queryInterface.createTable('Messages', {
id: {
allowNull: false,
autoIncrement: true,
primaryKey: true,
type: Sequelize.INTEGER,
},
text: {
type: Sequelize.STRING,
allowNull: false,
},
toUserId: {
type: Sequelize.INTEGER,
// TODO changed from CASCADE - not sure about change
onDelete: 'CASCADE',
references: {
model: 'Users',
key: 'id',
as: 'toUserId',
},
},
fromUserId: {
type: Sequelize.INTEGER,
// TODO changed from CASCADE - not sure about change
onDelete: 'CASCADE',
references: {
model: 'Users',
key: 'id',
as: 'fromUserId',
},
},
createdAt: {
allowNull: false,
type: Sequelize.DATE,
},
updatedAt: {
allowNull: false,
type: Sequelize.DATE,
},
}),
down: (queryInterface /* , Sequelize */) =>
queryInterface.dropTable('Messages'),
};
module.exports = {
up: (queryInterface, Sequelize) =>
queryInterface.createTable('Users', {
id: {
allowNull: false,
autoIncrement: true,
primaryKey: true,
type: Sequelize.INTEGER,
},
firstName: {
type: Sequelize.STRING,
allowNull: false,
},
lastName: {
type: Sequelize.STRING,
allowNull: false,
},
lat: {
allowNull: true,
type: Sequelize.INTEGER,
},
lng: {
allowNull: true,
type: Sequelize.INTEGER,
},
createdAt: {
allowNull: false,
type: Sequelize.DATEONLY,
},
updatedAt: {
allowNull: false,
type: Sequelize.DATEONLY,
},
}),
down: (queryInterface /* , Sequelize */) => queryInterface.dropTable('Users'),
};
And for models:
module.exports = (sequelize, DataTypes) => {
const User = sequelize.define('User', {
id: {
allowNull: false,
autoIncrement: true,
primaryKey: true,
type: DataTypes.INTEGER,
},
firstName: {
type: DataTypes.STRING,
allowNull: false,
},
lastName: {
type: DataTypes.STRING,
allowNull: false,
},
lat: {
allowNull: true,
type: DataTypes.INTEGER,
},
lng: {
allowNull: true,
type: DataTypes.INTEGER,
},
createdAt: {
allowNull: false,
type: DataTypes.DATEONLY,
},
updatedAt: {
allowNull: false,
type: DataTypes.DATEONLY,
},
});
User.associate = (models) => {
User.hasMany(models.Message, {
foreignKey: 'toUserId',
as: 'messages',
});
};
return User;
};
module.exports = (sequelize, DataTypes) => {
const Message = sequelize.define('Message', {
id: {
allowNull: false,
autoIncrement: true,
primaryKey: true,
type: DataTypes.INTEGER,
},
text: {
type: DataTypes.STRING,
allowNull: false,
},
createdAt: {
allowNull: false,
type: DataTypes.DATE,
},
updatedAt: {
allowNull: false,
type: DataTypes.DATE,
},
});
Message.associate = (models) => {
Message.belongsTo(models.User, {
foreignKey: 'toUserId',
});
};
return Message;
};
However when I try to add new message fromUserId appears as Null value.
When I try to get messages, it looks like:
[
{
"id": 1,
"text": "mytext",
"createdAt": "2018-11-29T20:12:22.253Z",
"updatedAt": "2018-11-29T20:12:22.253Z",
"toUserId": 2,
"User": {
"id": 2,
"firstName": "name1",
"lastName": "name2",
"lat": null,
"lng": null,
"createdAt": "2018-11-29",
"updatedAt": "2018-11-29"
}
}
]
According to your ERD I think your relationships should be some thing like this.
User has many messages
Message belongs to user
In that case your Message migration should be something like this.
id: {
allowNull: false,
autoIncrement: true,
primaryKey: true,
type: Sequelize.INTEGER,
},
text: {
type: Sequelize.STRING,
allowNull: false,
},
fromUserId: {
type: Sequelize.INTEGER,
// TODO changed from CASCADE - not sure about change
onDelete: 'CASCADE',
references: {
model: 'Users',
key: 'id',
},
},
Note that I removed toUserId column and this alias as: 'fromUserId', too.
In your User migration, it's correct you don't need to change anything in there.
In your Message model
Message.belongsTo(models.User, {
foreignKey: 'fromUserId',
});
};
Note that you have only one FK and it is fromUserId
In your User model.
User.associate = (models) => {
User.hasMany(models.Message, {
foreignKey: 'fromUserId',
});
};
After doing all of this you will be able to get the messages belongs to a user_id.
I have a requirement to create a tree grid which has unknown number of columns and data which gets rendered on click on a button. I have following code for the same.
//Model
Ext.define('SM.model.DynamicTreeModel', {
extend: 'Ext.data.Model'
});
//Store
Ext.define('SM.store.DynamicTreeStore',{
extend:'Ext.data.TreeStore',
model:'SM.DynamicTreeModel',
root: {
expanded: true
},
proxy: {
type: 'ajax',
url: 'TGData1.json',
reader: {
type: 'json',
root: 'children'
}
},
autoLoad: true
});
Ext.define('SM.view.compareScenario.DynamicTree', {
extend: 'Ext.tree.Panel',
alias: 'widget.DynamicTree',
frame: true,
columnLines: true,
autoLoad: false,
initComponent: function(){
var config = {
columns: [],
rowNumberer: false
};
Ext.apply(this, config);
Ext.apply(this.initialConfig, config);
this.callParent(arguments);
},
storeLoad: function(){
var columns = [];
Ext.each(this.store.proxy.reader.jsonData.columns, function(column){
columns.push(column);
});
this.reconfigure(this.store, columns);
this.store.getRootNode(this.store.getRootNode);
},
onRender: function(ct, position){
SM.view.compareScenario.DynamicTree.superclass.onRender.call(this, ct, position);
this.store.load({
scope: this,
callback: function(records, operation, success) {
this.storeLoad();
}
});
}
});
var influencesTree = {
xtype: 'DynamicTree',
id: 'influencesTree',
pading: '5',
region: 'south',
height: '70%',
collapsible: true,
rootVisible: false,
store: 'DynamicTreeStore'
};
The json file is as follows:
{
"metaData": {
"fields": [
{"name":"0", "type":"string"},
{"name":"1", "type":"string"},
{"name":"2", "type":"string"}
]
},
"columns" : [
{
"xtype":"treecolumn", //this is so we know which column will show the tree
"text":"Override Type",
"flex":"2",
"sortable":"true",
"dataIndex":"0"
},
{
"text":"Scenario 1",
"dataIndex":"1"
},
{
"text":"Copied Scenario",
"dataIndex":"2"
}
]
,
"text": ".",
"children": [{
"0":"CFO",
"1":"15",
"2":"16",
"children":[{
"0":"AW",
"1": "5",
"2": "5",
"leaf": "true",
},
{
"0":"AV",
"1":"10",
"2":"11",
"leaf": "true",
}
]
}
]
}
The tree renders, but the child nodes cannot be expanded as the + icon is not shown. Instead of + icon, a checkbox is rendered.
Any help/suggestions for the same will be highly appreciated.
Thanks,
Shalini
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.dd.*']);
Ext.onReady(function () {
var myData = [{
name: "Rec 0",
type: "0"
}, {
name: "Rec 1",
type: "1"
}, {
name: "Rec 2",
type: "2"
}, {
name: "Rec 3",
type: "3"
}, {
name: "Rec 4",
type: "4"
}, {
name: "Rec 5",
type: "5"
}, {
name: "Rec 6",
type: "6"
}, {
name: "Rec 7",
type: "7"
}, {
name: "Rec 8",
type: "8"
}, {
name: "Rec 9",
type: "9"
}];
// create the data store
var firstGridStore = Ext.create('Ext.data.Store', {
model: 'Apps.demo.model.Resource',
autoLoad: true,
proxy: {
type: 'ajax',
url: '/echo/json/',
actionMethods: {
read: 'POST'
},
extraParams: {
json: Ext.JSON.encode(myData)
},
delay: 0
}
});
// Column Model shortcut array
var columns = [{
text: "Name",
flex: 1,
sortable: true,
dataIndex: 'name'
}, {
text: "Type",
width: 70,
sortable: true,
dataIndex: 'type'
}];
// declare the source Grid
var firstGrid = Ext.create('Ext.grid.Panel', {
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
ddGroup: 'selDD'
},
listeners: {
drop: function (node, data, dropRec, dropPosition) {
}
}
},
store: firstGridStore,
columns: columns,
stripeRows: true,
title: 'First Grid',
margins: '0 2 0 0'
});
// create the destination Grid
var secondTree = Ext.create('Apps.demo.view.TreeGrid', {
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',
ddGroup: 'selDD'
},
listeners: {
beforedrop: function (node, data) {
data.records[0].set('leaf', false);
data.records[0].set('checked', null);
},
drop: function (node, data, dropRec, dropPosition) {
firstGrid.store.remove(data.records[0]);
}
}
}
});
var displayPanel = Ext.create('Ext.Panel', {
width: 650,
height: 300,
layout: {
type: 'hbox',
align: 'stretch',
padding: 5
},
renderTo: 'panel',
defaults: {
flex: 1
}, //auto stretch
items: [
firstGrid,
secondTree],
dockedItems: {
xtype: 'toolbar',
dock: 'bottom',
items: ['->', // Fill
{
text: 'Reset both components',
handler: function () {
firstGridStore.loadData(myData);
secondTreeStore.removeAll();
}
}]
}
});
});
var response = Ext.JSON.encode({
"children": [{
"itemId": 171,
"type": "comedy",
"name": "All the way",
"children": [{
"leaf": true,
"itemId": 171,
"type": "actor",
"name": "Rowan Atkinson"
}],
}, {
"itemId": 11,
"type": "fantasy",
"name": "I love You",
"children": [{
"itemId": 11,
"leaf": true,
"type": "actor",
"name": "Rajan",
}]
}, {
"itemId": 173,
"type": "Action",
"name": "Fast and Furious",
"children": [{
"itemId": 174,
"type": "actor",
"name": "Dwayne Johnson",
"children": [{
"leaf": true,
"itemId": 175,
"type": "wrestler",
"name": "The Rock"
}]
}]
}]
});
Ext.define('Apps.demo.model.Resource', {
extend: 'Ext.data.Model',
fields: [{
name: "name",
type: "string"
}, {
name: "type",
type: "string"
}]
});
Ext.define('Apps.demo.view.TreeGrid', {
extend: 'Ext.tree.Panel',
title: 'Demo',
height: 300,
rootVisible: true,
singleExpand: true,
initComponent: function () {
Ext.apply(this, {
store: new Ext.data.TreeStore({
model: 'Apps.demo.model.Resource',
"root": {
"name": "",
"type": "",
"expanded": "true"
},
proxy: {
type: 'ajax',
url: '/echo/json/',
actionMethods: {
read: 'POST'
},
extraParams: {
json: response
},
delay: 0
}
}),
listeners: {
'beforeiteminsert' : function(obj, node) {
console.log(node);
}
},
columns: [{
xtype: 'treecolumn',
text: 'Name',
dataIndex: 'name',
width: 200
}, {
text: 'Type',
dataIndex: 'type'
}]
});
this.callParent();
}
});
var grid = Ext.create('Apps.demo.view.TreeGrid');
Please check this code .It might not give u the proper answer but will surely give u the hint how to achieve the output.